react-native-debug-toolkit 0.4.2 → 0.5.0

package/README.md

@@ -30,27 +30,27 @@ cd ios && pod install
 
 ## Basic Usage
 
+### Method 1: Quick Setup with Default Features
+
+The easiest way to add the debug toolkit to your app is using the `initializeDebugToolkit` function with default features:
+
 ```javascript
-// In your App.js
-import DebugToolKit from 'react-native-debug-toolkit';
+// In your App.js or other initialization file
+import React, { useEffect } from 'react';
+import { initializeDebugToolkit } from 'react-native-debug-toolkit';
 
 function App() {
   useEffect(() => {
     if (__DEV__) {
-      const debugToolKit = new DebugToolKit();
-      debugToolKit.addFeature({
-        name: 'network',
-        label: 'Network Logs',
-        setup: () => console.log('Feature ready'),
-        getData: () => ({ message: 'Hello debugging world!' })
-      });
-      debugToolKit.showDebugPanel();
+      // Initialize with all default features
+      initializeDebugToolkit();
+      
+      // Or select specific built-in features
+      // initializeDebugToolkit(['network', 'console', 'performance']);
     }
     
     return () => {
-      if (__DEV__) {
-        DebugToolKit.instance.destroy();
-      }
+      // Cleanup happens automatically
     };
   }, []);
   
@@ -58,12 +58,151 @@ function App() {
 }
 ```
 
-## Features
+### Method 2: Manual Setup
 
-- Lightweight floating debug panel
-- Customizable debugging features
-- Development-only functionality (automatically disabled in production)
-- Easy to extend with your own debug tools
+For more control, you can manually set up the toolkit:
+
+```javascript
+// In your App.js
+import React, { useEffect } from 'react';
+import DebugToolKit, { 
+  createNetworkFeature, 
+  createConsoleLogFeature 
+} from 'react-native-debug-toolkit';
+
+function App() {
+  useEffect(() => {
+    if (__DEV__) {
+      // Create toolkit instance
+      const debugToolKit = new DebugToolKit();
+      
+      // Add features you want
+      debugToolKit.addFeature(createNetworkFeature());
+      debugToolKit.addFeature(createConsoleLogFeature());
+      
+      // Show floating panel
+      debugToolKit.showDebugPanel();
+      
+      return () => {
+        // Clean up
+        debugToolKit.destroy();
+      };
+    }
+  }, []);
+  
+  return <YourApp />;
+}
+```
+
+## Available Features
+
+The toolkit comes with several built-in debugging features:
+
+- **Network**: Track and inspect network requests and responses
+- **Console**: View console logs within the app
+- **Performance**: Monitor performance metrics
+- **Zustand**: Monitor Zustand state management (if used)
+- **Navigation**: Track navigation events
+- **ThirdPartyLibs**: Access tools from third-party debugging libraries
+
+## Creating Custom Debug Features
+
+You can create your own custom debugging features:
+
+```javascript
+// In myCustomFeature.js
+export const createMyCustomFeature = () => {
+  let customData = [];
+  
+  return {
+    name: 'custom',
+    label: 'My Custom Feature',
+    
+    setup: () => {
+      // Initialize your feature
+      console.log('My custom feature initialized');
+      
+      // Start capturing data, set up listeners, etc.
+    },
+    
+    getData: () => {
+      // Return data to display in the panel
+      return {
+        someMetric: 123,
+        customData,
+        status: 'Ready'
+      };
+    },
+    
+    cleanup: () => {
+      // Clean up any listeners or resources
+      customData = [];
+    }
+  };
+};
+
+// In your App.js
+import { createMyCustomFeature } from './myCustomFeature';
+
+// Usage with manual setup
+const debugToolKit = new DebugToolKit();
+debugToolKit.addFeature(createMyCustomFeature());
+
+// Or with initializeDebugToolkit
+initializeDebugToolkit(['network', 'console', createMyCustomFeature]);
+```
+
+## Monitoring Zustand Stores
+
+To monitor Zustand stores, use the provided middleware:
+
+```javascript
+import { create } from 'zustand';
+import { zustandLogMiddleware } from 'react-native-debug-toolkit';
+
+const useStore = create(
+  zustandLogMiddleware(
+    (set) => ({
+      count: 0,
+      increment: () => set((state) => ({ count: state.count + 1 })),
+      decrement: () => set((state) => ({ count: state.count - 1 })),
+    })
+  )
+);
+```
+
+## Tracking Navigation
+
+To track navigation events:
+
+```javascript
+import { useNavigationLogger } from 'react-native-debug-toolkit';
+
+// In your navigation container
+function AppNavigator() {
+  useNavigationLogger(); // This will automatically track navigation events
+  
+  return (
+    <NavigationContainer>
+      {/* Your navigation structure */}
+    </NavigationContainer>
+  );
+}
+```
+
+Or manually log navigation events:
+
+```javascript
+import { addNavigationLog } from 'react-native-debug-toolkit';
+
+// Log navigation events manually
+addNavigationLog({
+  type: 'navigate',
+  from: 'HomeScreen',
+  to: 'DetailScreen',
+  params: { id: 123 }
+});
+```
 
 ## API Reference
 
@@ -75,13 +214,6 @@ Initializes a new instance of the debug toolkit. It's a singleton, so multiple c
 #### `addFeature(feature: Feature): DebugToolKit`
 Adds a new debugging feature to the toolkit. Returns the toolkit instance for chaining.
 
-Feature object must have:
-- `name`: Unique identifier for the feature
-- `label`: Display name in the debug panel
-- `setup()`: Function to run when the feature is added
-- `getData()`: Function that returns data to display in the panel
-- `cleanup()`: (Optional) Function to run when the feature is removed
-
 #### `showDebugPanel(): void`
 Shows the floating debug panel.
 
@@ -94,33 +226,25 @@ Updates the debug panel with the latest feature data.
 #### `destroy(): void`
 Cleans up the debug toolkit, removing all features and event listeners.
 
-## Example: Network Feature
+### initializeDebugToolkit
 
-```javascript
-// In debugFeatures.js
-import { NetworkFeature } from 'react-native-debug-toolkit/lib/features/NetworkFeature';
+#### `initializeDebugToolkit(features = defaultFeatures, options = {})`
+Convenience function to initialize and show the debug toolkit.
 
-export const createNetworkFeature = () => {
-  const feature = new NetworkFeature();
-  return {
-    name: 'network',
-    label: 'Network Logs',
-    setup: () => feature.setup(),
-    getData: () => feature.getData(),
-    cleanup: () => feature.cleanup()
-  };
-};
+- `features`: Array of feature names (strings) or creator functions
+- `options`: Additional options like `doraemonProductId` for iOS third-party debug libraries
 
-// In App.js
-const debugToolKit = new DebugToolKit();
-debugToolKit.addFeature(createNetworkFeature());
-debugToolKit.showDebugPanel();
-```
+## Troubleshooting
 
-## Contributing
+### Common Issues
 
-Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+1. **Debug panel not showing**
+   - Make sure you're in development mode (`__DEV__` must be true)
+   - Check that you've called `showDebugPanel()`
 
-## License
+2. **iOS features not working**
+   - Verify that you've added FLEX and DoraemonKit to your Podfile
+   - Run `pod install` again after making changes
 
-[MIT](https://choosealicense.com/licenses/mit/)
+3. **Performance issues**
+   - The Debug Toolkit is intended for development only. Make sure to use the `__DEV__` condition to prevent it from running in production.

package/android/src/main/java/com/reactnative/debuglibs/BuildTypeModule.java

@@ -0,0 +1,44 @@
+package com.reactnative.debuglibs;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.Promise;
+
+import java.util.HashMap;
+import java.util.Map;
+
+public class BuildTypeModule extends ReactContextBaseJavaModule {
+    private final ReactApplicationContext reactContext;
+
+    public BuildTypeModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+        this.reactContext = reactContext;
+    }
+
+    @Override
+    public String getName() {
+        return "BuildTypeModule";
+    }
+
+    @Override
+    public Map<String, Object> getConstants() {
+        final Map<String, Object> constants = new HashMap<>();
+        constants.put("buildType", BuildConfig.DEBUG ? "debug" : "release");
+        return constants;
+    }
+
+    @ReactMethod(isBlockingSynchronousMethod = true)
+    public String getBuildTypeSync() {
+        return BuildConfig.DEBUG ? "debug" : "release";
+    }
+
+    @ReactMethod
+    public void getBuildType(Promise promise) {
+        try {
+            promise.resolve(BuildConfig.DEBUG ? "debug" : "release");
+        } catch (Exception e) {
+            promise.reject("ERR_UNEXPECTED", e.getMessage(), e);
+        }
+    }
+} 

package/android/src/main/java/com/reactnative/debuglibs/BuildTypePackage.java

@@ -0,0 +1,24 @@
+package com.reactnative.debuglibs;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class BuildTypePackage implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        modules.add(new BuildTypeModule(reactContext));
+        return modules;
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+} 

package/android/src/main/java/com/reactnative/debuglibs/RNDebugLibsModule.java

@@ -1,7 +1,6 @@
 package com.reactnative.debuglibs;
 
 import android.app.Application;
-import android.widget.Toast;
 import androidx.annotation.NonNull;
 
 import com.facebook.react.bridge.ReactApplicationContext;
@@ -56,15 +55,21 @@ public class RNDebugLibsModule extends ReactContextBaseJavaModule {
 
     @ReactMethod
     public void showDoraemonKit() {
-        DoKit.showToolPanel();
-        DoKit.show();
-
+        reactContext.runOnUiQueueThread(new Runnable() {
+            @Override
+            public void run() {
+                DoKit.show();
+            }
+        });
     }
 
     @ReactMethod
     public void hideDoraemonKit() {
-        // Toast.makeText(reactContext, "hideDoraemonKit被调用", Toast.LENGTH_SHORT).show();
-        // DoKit.hideToolPanel();
-        DoKit.hide();
+        reactContext.runOnUiQueueThread(new Runnable() {
+            @Override
+            public void run() {
+                DoKit.hide();
+            }
+        });
     }
 } 

package/index.js

@@ -3,7 +3,7 @@
  * A comprehensive debugging toolkit for React Native
  */
 import DebugToolKit from './lib/DebugToolKit'
-import { initializeDebugToolkit } from './lib'
+import { initializeDebugToolkit, isDebugMode } from './lib'
 
 import { createNetworkFeature } from './lib/features/NetworkFeature'
 import { createPerformanceFeature } from './lib/features/PerformanceFeature'
@@ -22,7 +22,8 @@ export {
   addZustandLog,
   createNavigationLogFeature,
   addNavigationLog,
-  useNavigationLogger
+  useNavigationLogger,
+  isDebugMode
 }
 
 export default DebugToolKit

package/lib/DebugToolKit.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { BackHandler, Pressable, Text } from 'react-native'
 import RootSiblings from 'react-native-root-siblings'
 import FloatPanelView from './views/FloatPanelView'
+import NativeDebugLibs from './NativeDebugLibs'
 
 export default class DebugToolKit {
   static instance = null
@@ -11,28 +12,38 @@ export default class DebugToolKit {
       return DebugToolKit.instance
     }
 
+    // Set the debug mode flag directly from NativeDebugLibs
+    this.isDebugMode = NativeDebugLibs.isDebugBuild()
     this.floatPanel = null
     this.features = []
     this.isPanelVisible = false
 
     const featuresToLoad = config.features || []
 
-    featuresToLoad.forEach(featureOrCreator => {
-      const feature = typeof featureOrCreator === 'function'
-        ? featureOrCreator()
-        : featureOrCreator
-      this.addFeature(feature)
-    })
+    // Only load features in debug mode
+    if (this.isDebugMode) {
+      featuresToLoad.forEach(featureOrCreator => {
+        const feature = typeof featureOrCreator === 'function'
+          ? featureOrCreator()
+          : featureOrCreator
+        this.addFeature(feature)
+      })
+
+      if (config.autoShow) {
+        this.showDebugPanel()
+      }
 
-    if (config.autoShow) {
-      this.showDebugPanel()
+      BackHandler.addEventListener('hardwareBackPress', () => true)
+    } else {
+      console.log('[DebugToolKit] Not initializing features - not in debug mode')
     }
-
-    BackHandler.addEventListener('hardwareBackPress', () => true)
+    
     DebugToolKit.instance = this
   }
 
   addFeature(feature) {
+    if (!this.isDebugMode) return this;
+    
     if (feature && typeof feature.name === 'string') {
       this.features.push(feature)
       feature.setup?.()
@@ -43,7 +54,7 @@ export default class DebugToolKit {
   }
 
   showDebugPanel = () => {
-    if (!__DEV__) {
+    if (!this.isDebugMode) {
       return
     }
 

package/lib/NativeDebugLibs.js

@@ -1,8 +1,32 @@
 import { NativeModules, Platform } from 'react-native'
 
-const { RNDebugLibs } = NativeModules
+const { RNDebugLibs, BuildTypeModule } = NativeModules
 
 export default class NativeDebugLibs {
+  // Build type methods
+  static getBuildType() {
+    if (BuildTypeModule) {
+      return BuildTypeModule.getBuildType();
+    }
+    return Promise.resolve(null);
+  }
+
+  static getBuildTypeSync() {
+    console.log('BuildTypeModule', BuildTypeModule);
+    if (BuildTypeModule) {
+      console.log('BuildTypeModule.getBuildTypeSync()', BuildTypeModule.getBuildTypeSync());
+      return BuildTypeModule.getBuildTypeSync();
+    }
+    return null;
+  }
+
+  static isDebugBuild() {
+    if (BuildTypeModule) {
+      return BuildTypeModule.getBuildTypeSync() === 'debug';
+    }
+    return false;
+  }
+
   // FLEX methods (iOS only)
   static showExplorer() {
     if (Platform.OS === 'ios' && RNDebugLibs) {

package/lib/index.js

@@ -1,6 +1,6 @@
 import DebugToolKit from './DebugToolKit'
 import { createNetworkFeature } from './features/NetworkFeature'
-import { createPerformanceFeature} from './features/PerformanceFeature'
+// import { createPerformanceFeature} from './features/PerformanceFeature'
 import { createConsoleLogFeature } from './features/ConsoleLogFeature'
 import { createZustandLogFeature, zustandLogMiddleware } from './features/ZustandLogFeature'
 import { createNavigationLogFeature, addNavigationLog } from './features/NavigationLogFeature'
@@ -11,7 +11,7 @@ import NativeDebugLibs from './NativeDebugLibs'
 const featureRegistry = {
   network: createNetworkFeature,
   console: createConsoleLogFeature,
-  performance: createPerformanceFeature,
+  // performance: createPerformanceFeature,
   zustand: createZustandLogFeature,
   navigation: createNavigationLogFeature,
   thirdPartyLibs: createThirdPartyLibsFeature,
@@ -22,17 +22,25 @@ const featureRegistry = {
 // List of default features (can use strings now)
 const defaultFeatures = ['network', 'console', 'zustand', 'navigation', 'thirdPartyLibs']
 
+// Export the debug mode status - this is used by the app
+const isDebugMode = NativeDebugLibs.isDebugBuild();
+
 /**
  * Initializes and shows the Debug ToolKit panel with specified features.
- * Only runs in development mode (__DEV__ === true).
+ * Only runs in debug mode.
  * Features can be specified as strings (e.g., 'network') or creator functions.
  * @param {Array<string|Function>} features - Array of feature names (strings) or creator functions. Defaults to standard features.
  * @param {Object} options - Additional options like doraemonProductId for third-party debug libraries
  */
 export function initializeDebugToolkit(features = defaultFeatures, options = {}) {
-
+  // Create instance but it will internally handle debug mode check
   try {
     const debugToolKit = new DebugToolKit();
+    
+    // If not in debug mode, the class methods won't do anything
+    if (!isDebugMode) {
+      return debugToolKit;
+    }
 
     // Initialize third-party debug libraries if configured
     if (options.doraemonProductId) {
@@ -89,12 +97,13 @@ export function initializeDebugToolkit(features = defaultFeatures, options = {})
 export { 
   DebugToolKit, 
   createNetworkFeature, 
-  createPerformanceFeature, 
+  // createPerformanceFeature, 
   createConsoleLogFeature, 
   createZustandLogFeature,
   createNavigationLogFeature,
   createThirdPartyLibsFeature,
   addNavigationLog,
   zustandLogMiddleware,  // Export middleware for use in Zustand stores
-  featureRegistry 
+  featureRegistry,
+  isDebugMode
 };

package/lib/views/FloatPanelView.js

@@ -16,7 +16,7 @@ import {
 // import AsyncStorage from '@react-native-async-storage/async-storage'
 import { IconRadius, DebugColors } from '../utils/DebugConst'
 import SubViewHTTPLogs from './SubViewHTTPLogs'
-import SubViewPerformance from './SubViewPerformance'
+// import SubViewPerformance from './SubViewPerformance'
 import SubViewConsoleLogs from './SubViewConsoleLogs'
 import SubViewZustandLogs from './SubViewZustandLogs'
 import SubViewNavigationLogs from './SubViewNavigationLogs'
@@ -305,9 +305,9 @@ export default class FloatPanelView extends Component {
     }
     
     // Special handling for performance view
-    if (feature.name === 'performance') {
-      return <SubViewPerformance />
-    }
+    // if (feature.name === 'performance') {
+    //   return <SubViewPerformance />
+    // }
 
     if (feature.name === 'console') {
       return <SubViewConsoleLogs logs={data} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",