react-native-debug-toolkit 0.4.3 → 0.5.1

package/README.md

@@ -22,35 +22,84 @@ pod 'FLEX', :configurations => ['Debug']
 pod 'DoraemonKit/Core', :configurations => ['Debug']
 ```
 
-3. Run pod install in your iOS directory:
+3. Add the following code to your AppDelegate.m in the `didFinishLaunchingWithOptions` method:
+
+```objc
+#ifdef DEBUG
+#import <DoraemonKit/DoraemonManager.h>
+#endif
+
+  #ifdef DEBUG
+  DoraemonManager *doKit = [DoraemonManager shareInstance];
+  doKit.autoDock = false;
+  [doKit install];
+  [doKit hiddenDoraemon];
+  #endif
+```
+
+4. Run pod install in your iOS directory:
 
 ```bash
 cd ios && pod install
 ```
 
+### Android Additional Setup
+
+1. Add the following to your `android/settings.gradle`:
+
+```gradle
+include ':react-native-debug-toolkit'
+project(':react-native-debug-toolkit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-debug-toolkit/android')
+```
+
+2. Add these dependencies to your `android/app/build.gradle`:
+
+```gradle
+dependencies {
+    // Other dependencies...
+    
+    debugImplementation 'io.github.didi.dokit:dokitx:3.7.1'
+    releaseImplementation 'io.github.didi.dokit:dokitx-no-op:3.7.1'
+    debugImplementation 'com.android.volley:volley:1.2.0'
+    
+    implementation project(':react-native-debug-toolkit')
+}
+```
+
+3. Initialize DoKit in your `MainApplication.kt`:
+
+```kotlin
+import com.didichuxing.doraemonkit.DoKit
+
+// Inside onCreate method
+if (BuildConfig.DEBUG) {
+    DoKit.Builder(this)
+        .build()
+    DoKit.hide()
+}
+```
+
 ## Basic Usage
 
+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, isDebugMode } 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();
+    if (isDebugMode) {
+      // Initialize with all default features
+      initializeDebugToolkit();
+      
+      // Or select specific built-in features
+      // initializeDebugToolkit(['network', 'console', 'zustand', 'navigation', 'thirdPartyLibs']);
     }
     
     return () => {
-      if (__DEV__) {
-        DebugToolKit.instance.destroy();
-      }
+      // Cleanup happens automatically
     };
   }, []);
   
@@ -58,69 +107,165 @@ function App() {
 }
 ```
 
-## Features
+That's it! Your app will now display a floating debug panel in development mode, giving you access to all debugging features.
 
-- Lightweight floating debug panel
-- Customizable debugging features
-- Development-only functionality (automatically disabled in production)
-- Easy to extend with your own debug tools
+## Built-in Features
 
-## API Reference
+By initializing with the single line of code above, you'll automatically get access to all these debugging features:
 
-### DebugToolKit
+- **Network**: Track and inspect all network requests and responses
+- **Console**: View all console logs within the app
+- **Zustand**: Monitor Zustand state management (if your app uses Zustand)
+- **Navigation**: Automatically track navigation events in your app
+- **ThirdPartyLibs**: Quick access to native debugging tools (FLEX for iOS, DoraemonKit)
 
-#### `new DebugToolKit()`
-Initializes a new instance of the debug toolkit. It's a singleton, so multiple calls will return the same instance.
+## Integration
 
-#### `addFeature(feature: Feature): DebugToolKit`
-Adds a new debugging feature to the toolkit. Returns the toolkit instance for chaining.
+### Advanced Axios Network Tracking
 
-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
+For projects using Axios, you can enable more detailed network request tracking:
 
-#### `showDebugPanel(): void`
-Shows the floating debug panel.
+```javascript
+import axios from 'axios';
+import { createNetworkFeature, isDebugMode } from 'react-native-debug-toolkit';
 
-#### `hideDebugPanel(): void`
-Hides the floating debug panel.
+// Get network feature instance and set up Axios interceptors
+if (isDebugMode) {
+  const networkFeature = createNetworkFeature();
+  networkFeature.setupAxiosInterceptors(axios);
+  
+  // Optional: exclude sensitive URLs (like authentication endpoints)
+  networkFeature.addUrlToBlacklist('api.example.com/auth');
+  networkFeature.addUrlToBlacklist(/password/i); // Regex patterns supported
+}
+```
 
-#### `updateDebugPanel(): void`
-Updates the debug panel with the latest feature data.
+### Monitoring Zustand Stores (If You Use Zustand)
 
-#### `destroy(): void`
-Cleans up the debug toolkit, removing all features and event listeners.
+If your app uses Zustand for state management, just add the middleware to track all state changes:
 
-## Example: Network Feature
+```javascript
+import { create } from 'zustand';
+import { zustandLogMiddleware } from 'react-native-debug-toolkit';
+
+// Simply add zustandLogMiddleware to wrap your store
+const useStore = create(
+  zustandLogMiddleware(
+    (set) => ({
+      count: 0,
+      increment: () => set((state) => ({ count: state.count + 1 })),
+      decrement: () => set((state) => ({ count: state.count - 1 })),
+    })
+  )
+);
+```
+
+### Navigation Tracking (React Navigation)
+
+If you're using React Navigation, adding navigation tracking is just one step:
+
+```javascript
+import React, { useRef } from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { useNavigationLogger } from 'react-native-debug-toolkit';
+
+function AppNavigator() {
+  const navigationRef = useRef(null);
+  
+  // Add this line to enable navigation logging
+  useNavigationLogger(navigationRef);
+  
+  return (
+    <NavigationContainer ref={navigationRef}>
+      {/* Your navigation configuration */}
+    </NavigationContainer>
+  );
+}
+```
+
+## Custom Configuration
+
+If you don't need all features, you can selectively enable specific ones:
 
 ```javascript
-// In debugFeatures.js
-import { NetworkFeature } from 'react-native-debug-toolkit/lib/features/NetworkFeature';
+// Only enable network and console logging features
+initializeDebugToolkit(['network', 'console']);
+
+// Or specify a custom set of features
+initializeDebugToolkit([
+  'network',
+  'console', 
+  'zustand', 
+  'navigation',
+  'thirdPartyLibs'
+]);
+```
 
-export const createNetworkFeature = () => {
-  const feature = new NetworkFeature();
+## Creating Custom Debug Features
+
+You can create your own custom debugging features:
+
+```javascript
+// In myCustomFeature.js
+export const createMyCustomFeature = () => {
+  let customData = [];
+  
   return {
-    name: 'network',
-    label: 'Network Logs',
-    setup: () => feature.setup(),
-    getData: () => feature.getData(),
-    cleanup: () => feature.cleanup()
+    name: 'custom',         // Unique identifier
+    label: 'My Custom Feature', // Display name in UI
+    
+    setup: () => {
+      // Initialize your feature
+      console.log('My custom feature initialized');
+      
+      // Start capturing data, set up listeners, etc.
+      const interval = setInterval(() => {
+        customData.push({
+          timestamp: new Date(),
+          value: Math.random() * 100
+        });
+        
+        // Limit the amount of data stored
+        if (customData.length > 100) {
+          customData.shift();
+        }
+      }, 1000);
+      
+      // Return cleanup function if needed
+      return () => clearInterval(interval);
+    },
+    
+    getData: () => {
+      // Return data to display in the panel
+      return customData;
+    },
+    
+    cleanup: () => {
+      // Clean up any listeners or resources
+      customData = [];
+    }
   };
 };
 
-// In App.js
-const debugToolKit = new DebugToolKit();
-debugToolKit.addFeature(createNetworkFeature());
-debugToolKit.showDebugPanel();
+// Usage with initializeDebugToolkit
+initializeDebugToolkit(['network', 'console', createMyCustomFeature]);
 ```
 
-## Contributing
+## Troubleshooting
+
+### Debug panel not showing
+- Make sure you're in development mode (`isDebugMode` is true)
+- Check that you've correctly called `initializeDebugToolkit()`
 
-Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+### iOS features not working
+- Verify that you've added FLEX and DoraemonKit to your Podfile
+- Run `pod install` again after making changes
+- Make sure you're running a Debug build
 
-## License
+### Network requests not captured
+- For Axios, ensure you've called `setupAxiosInterceptors(axios)`
+- For fetch requests, the toolkit should automatically intercept them without additional configuration
 
-[MIT](https://choosealicense.com/licenses/mit/)
+### App performance issues
+- This debug toolkit is meant for development only, ensure it's not included in production builds
+- If performance is affected in development mode, try enabling only specific features

package/README.zh-CN.md

@@ -0,0 +1,230 @@
+
+
+
+# React Native Debug Toolkit 使用文档
+
+一个简单但功能强大的React Native调试工具包，提供便捷的开发期浮动界面。
+
+## 安装
+
+```bash
+npm install react-native-debug-toolkit
+# 或
+yarn add react-native-debug-toolkit
+```
+
+### iOS 额外设置
+
+该工具包使用FLEX和DoraemonKit提供iOS调试功能。请按以下步骤正确集成：
+
+1. 确保项目中已安装CocoaPods
+2. 在Podfile中添加以下依赖：
+
+```ruby
+pod 'FLEX', :configurations => ['Debug']   
+pod 'DoraemonKit/Core', :git => 'https://github.com/superzcj/DoKit.git', :configurations => ['Debug'] #必选
+```
+
+3. 在`didFinishLaunchingWithOptions`方法中的AppDelegate.m文件中添加以下代码：
+
+```objc
+#ifdef DEBUG
+#import <DoraemonKit/DoraemonManager.h>
+#endif
+
+  #ifdef DEBUG
+  DoraemonManager *doKit = [DoraemonManager shareInstance];
+  doKit.autoDock = false;
+  [doKit install];
+  [doKit hiddenDoraemon];
+  #endif
+```
+
+4. 在iOS目录中运行pod install：
+
+```bash
+cd ios && pod install
+```
+
+### Android 额外设置
+
+1. 在`android/settings.gradle`中添加以下内容：
+
+```gradle
+include ':react-native-debug-toolkit'
+project(':react-native-debug-toolkit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-debug-toolkit/android')
+```
+
+2. 在`android/app/build.gradle`中添加以下依赖：
+
+```gradle
+dependencies {
+    // 其他依赖...
+    
+    debugImplementation 'io.github.didi.dokit:dokitx:3.7.1'
+    releaseImplementation 'io.github.didi.dokit:dokitx-no-op:3.7.1'
+    debugImplementation 'com.android.volley:volley:1.2.0'
+    
+    implementation project(':react-native-debug-toolkit')
+}
+```
+
+3. 在`MainApplication.kt`中初始化DoKit：
+
+```kotlin
+import com.didichuxing.doraemonkit.DoKit 
+import com.reactnative.debuglibs.RNDebugLibsPackage
+
+// 在getPackages方法内
+add(RNDebugLibsPackage())
+
+ // 在onCreate方法内
+if (BuildConfig.DEBUG) {
+    DoKit.Builder(this)
+        .build()
+    DoKit.hide()
+}
+```
+
+## 使用方法
+
+将调试工具包添加到您的应用程序中非常简单，只需一行代码即可启用所有功能：
+
+```javascript
+// 在App.js或其他初始化文件中
+import React, { useEffect } from 'react';
+import { initializeDebugToolkit, isDebugMode } from 'react-native-debug-toolkit';
+
+function App() {
+  useEffect(() => {
+    if (isDebugMode) {
+      // 使用所有默认功能初始化
+      initializeDebugToolkit();
+      
+      // 或选择特定的内置功能
+      // initializeDebugToolkit(['network', 'console', 'zustand', 'navigation', 'thirdPartyLibs']);
+    }
+    
+    return () => {
+      // 自动清理
+    };
+  }, []);
+  
+  return <YourApp />;
+}
+```
+
+就这么简单！现在您的应用程序将在开发模式下显示一个浮动的调试面板，让您可以访问所有调试功能。
+
+## 内置功能
+
+通过上面的一行代码初始化，您将自动获得以下所有调试功能：
+
+- **网络监控**：跟踪和检查所有网络请求和响应
+- **控制台日志**：在应用内查看所有控制台日志输出
+- **Zustand状态**：监控Zustand状态管理（如果您的应用使用Zustand）
+- **导航跟踪**：自动记录应用内的导航事件
+- **第三方调试工具**：快速访问原生调试工具（iOS的FLEX，iOS和Android的DoraemonKit）
+
+## 集成
+
+### 高级Axios网络跟踪
+
+对于使用Axios的项目，您可以启用更详细的网络请求跟踪：
+
+```javascript
+import axios from 'axios';
+import { createNetworkFeature, isDebugMode } from 'react-native-debug-toolkit';
+
+// 获取网络功能实例并设置Axios拦截器
+if (isDebugMode) {
+  const networkFeature = createNetworkFeature();
+  networkFeature.setupAxiosInterceptors(axios);
+  
+  // 可选：排除敏感URL（如认证接口）
+  networkFeature.addUrlToBlacklist('api.example.com/auth');
+  networkFeature.addUrlToBlacklist(/password/i); // 支持正则表达式
+}
+```
+
+### 监控Zustand状态（如果您使用Zustand）
+
+如果您的应用使用Zustand进行状态管理，只需添加中间件即可跟踪所有状态变化：
+
+```javascript
+import { create } from 'zustand';
+import { zustandLogMiddleware } from 'react-native-debug-toolkit';
+
+// 只需添加zustandLogMiddleware来包装您的store
+const useStore = create(
+  zustandLogMiddleware(
+    (set) => ({
+      count: 0,
+      increment: () => set((state) => ({ count: state.count + 1 })),
+      decrement: () => set((state) => ({ count: state.count - 1 })),
+    })
+  )
+);
+```
+
+### 导航跟踪（React Navigation）
+
+如果您使用React Navigation，添加导航跟踪只需一步：
+
+```javascript
+import React, { useRef } from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { useNavigationLogger } from 'react-native-debug-toolkit';
+
+function AppNavigator() {
+  const navigationRef = useRef(null);
+  
+  // 添加这一行来启用导航日志
+  useNavigationLogger(navigationRef);
+  
+  return (
+    <NavigationContainer ref={navigationRef}>
+      {/* 您的导航配置 */}
+    </NavigationContainer>
+  );
+}
+```
+
+## 自定义配置
+
+如果您不需要所有功能，可以选择性地启用特定功能：
+
+```javascript
+// 只启用网络和控制台日志功能
+initializeDebugToolkit(['network', 'console']);
+
+// 或者指定一组自定义功能
+initializeDebugToolkit([
+  'network',
+  'console', 
+  'zustand', 
+  'navigation',
+  'thirdPartyLibs'
+]);
+```
+
+## 常见问题排除
+
+### 调试面板不显示
+- 确保您在开发模式下（`isDebugMode`为true）
+- 检查是否正确调用了`initializeDebugToolkit()`
+
+### iOS功能不工作
+- 确认您已将FLEX和DoraemonKit添加到Podfile
+- 在修改后重新运行`pod install`
+- 确保您正在运行Debug构建版本
+
+### 网络请求未被捕获
+- 对于Axios，请确保调用了`setupAxiosInterceptors(axios)`
+- 对于fetch请求，工具包会自动拦截，无需额外配置
+
+### 应用性能问题
+- 此调试工具包仅适用于开发阶段，请确保生产构建中未包含
+- 如果开发模式下性能受影响，可以尝试只启用特定功能     
+
+

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,25 @@
+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));
+        modules.add(new RNDebugLibsModule(reactContext));
+        return modules;
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+} 

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.3",
+  "version": "0.5.1",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",