react-native-debug-toolkit 0.5.0 → 0.5.1

package/README.md

@@ -22,31 +22,80 @@ 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
 ```
 
-## Basic Usage
+### 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`:
 
-### Method 1: Quick Setup with Default Features
+```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 or other initialization file
 import React, { useEffect } from 'react';
-import { initializeDebugToolkit } from 'react-native-debug-toolkit';
+import { initializeDebugToolkit, isDebugMode } from 'react-native-debug-toolkit';
 
 function App() {
   useEffect(() => {
-    if (__DEV__) {
+    if (isDebugMode) {
       // Initialize with all default features
       initializeDebugToolkit();
       
       // Or select specific built-in features
-      // initializeDebugToolkit(['network', 'console', 'performance']);
+      // initializeDebugToolkit(['network', 'console', 'zustand', 'navigation', 'thirdPartyLibs']);
     }
     
     return () => {
@@ -58,108 +107,48 @@ function App() {
 }
 ```
 
-### Method 2: Manual Setup
+That's it! Your app will now display a floating debug panel in development mode, giving you access to all debugging features.
 
-For more control, you can manually set up the toolkit:
+## Built-in Features
 
-```javascript
-// In your App.js
-import React, { useEffect } from 'react';
-import DebugToolKit, { 
-  createNetworkFeature, 
-  createConsoleLogFeature 
-} from 'react-native-debug-toolkit';
+By initializing with the single line of code above, you'll automatically get access to all these debugging features:
 
-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
+- **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)
 
-The toolkit comes with several built-in debugging features:
+## Integration
 
-- **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
+### Advanced Axios Network Tracking
 
-## Creating Custom Debug Features
-
-You can create your own custom debugging features:
+For projects using Axios, you can enable more detailed network request tracking:
 
 ```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 = [];
-    }
-  };
-};
+import axios from 'axios';
+import { createNetworkFeature, isDebugMode } from 'react-native-debug-toolkit';
 
-// 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]);
+// 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
+}
 ```
 
-## Monitoring Zustand Stores
+### Monitoring Zustand Stores (If You Use Zustand)
 
-To monitor Zustand stores, use the provided middleware:
+If your app uses Zustand for state management, just add the middleware to track all state changes:
 
 ```javascript
 import { create } from 'zustand';
 import { zustandLogMiddleware } from 'react-native-debug-toolkit';
 
+// Simply add zustandLogMiddleware to wrap your store
 const useStore = create(
   zustandLogMiddleware(
     (set) => ({
@@ -171,80 +160,112 @@ const useStore = create(
 );
 ```
 
-## Tracking Navigation
+### Navigation Tracking (React Navigation)
 
-To track navigation events:
+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';
 
-// In your navigation container
 function AppNavigator() {
-  useNavigationLogger(); // This will automatically track navigation events
+  const navigationRef = useRef(null);
+  
+  // Add this line to enable navigation logging
+  useNavigationLogger(navigationRef);
   
   return (
-    <NavigationContainer>
-      {/* Your navigation structure */}
+    <NavigationContainer ref={navigationRef}>
+      {/* Your navigation configuration */}
     </NavigationContainer>
   );
 }
 ```
 
-Or manually log navigation events:
+## Custom Configuration
+
+If you don't need all features, you can selectively enable specific ones:
 
 ```javascript
-import { addNavigationLog } from 'react-native-debug-toolkit';
-
-// Log navigation events manually
-addNavigationLog({
-  type: 'navigate',
-  from: 'HomeScreen',
-  to: 'DetailScreen',
-  params: { id: 123 }
-});
+// Only enable network and console logging features
+initializeDebugToolkit(['network', 'console']);
+
+// Or specify a custom set of features
+initializeDebugToolkit([
+  'network',
+  'console', 
+  'zustand', 
+  'navigation',
+  'thirdPartyLibs'
+]);
 ```
 
-## API Reference
-
-### DebugToolKit
-
-#### `new DebugToolKit()`
-Initializes a new instance of the debug toolkit. It's a singleton, so multiple calls will return the same instance.
-
-#### `addFeature(feature: Feature): DebugToolKit`
-Adds a new debugging feature to the toolkit. Returns the toolkit instance for chaining.
-
-#### `showDebugPanel(): void`
-Shows the floating debug panel.
-
-#### `hideDebugPanel(): void`
-Hides the floating debug panel.
-
-#### `updateDebugPanel(): void`
-Updates the debug panel with the latest feature data.
-
-#### `destroy(): void`
-Cleans up the debug toolkit, removing all features and event listeners.
+## Creating Custom Debug Features
 
-### initializeDebugToolkit
+You can create your own custom debugging features:
 
-#### `initializeDebugToolkit(features = defaultFeatures, options = {})`
-Convenience function to initialize and show the debug toolkit.
+```javascript
+// In myCustomFeature.js
+export const createMyCustomFeature = () => {
+  let customData = [];
+  
+  return {
+    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 = [];
+    }
+  };
+};
 
-- `features`: Array of feature names (strings) or creator functions
-- `options`: Additional options like `doraemonProductId` for iOS third-party debug libraries
+// Usage with initializeDebugToolkit
+initializeDebugToolkit(['network', 'console', createMyCustomFeature]);
+```
 
 ## Troubleshooting
 
-### Common Issues
+### Debug panel not showing
+- Make sure you're in development mode (`isDebugMode` is true)
+- Check that you've correctly called `initializeDebugToolkit()`
 
-1. **Debug panel not showing**
-   - Make sure you're in development mode (`__DEV__` must be true)
-   - Check that you've called `showDebugPanel()`
+### 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
 
-2. **iOS features not working**
-   - Verify that you've added FLEX and DoraemonKit to your Podfile
-   - Run `pod install` again after making changes
+### Network requests not captured
+- For Axios, ensure you've called `setupAxiosInterceptors(axios)`
+- For fetch requests, the toolkit should automatically intercept them without additional configuration
 
-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.
+### 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/BuildTypePackage.java

@@ -14,6 +14,7 @@ public class BuildTypePackage implements ReactPackage {
     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
         List<NativeModule> modules = new ArrayList<>();
         modules.add(new BuildTypeModule(reactContext));
+        modules.add(new RNDebugLibsModule(reactContext));
         return modules;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.5.0",
+  "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",