React Native Debug Toolkit 使用文档

一个简单但功能强大的React Native调试工具包，提供便捷的开发期浮动界面。

安装

1npm install react-native-debug-toolkit
2# 或
3yarn add react-native-debug-toolkit

iOS 额外设置

该工具包使用FLEX和DoraemonKit提供iOS调试功能。请按以下步骤正确集成：

1. 确保项目中已安装CocoaPods
2. 在Podfile中添加以下依赖：

1pod 'FLEX', :configurations => ['Debug']   
2pod 'DoraemonKit/Core', :git => 'https://github.com/superzcj/DoKit.git', :configurations => ['Debug'] #必选

3. 在didFinishLaunchingWithOptions方法中的AppDelegate.m文件中添加以下代码：

1#ifdef DEBUG
2#import <DoraemonKit/DoraemonManager.h>
3#endif
4
5  #ifdef DEBUG
6  DoraemonManager *doKit = [DoraemonManager shareInstance];
7  doKit.autoDock = false;
8  [doKit install];
9  [doKit hiddenDoraemon];
10  #endif

4. 在iOS目录中运行pod install：

1cd ios && pod install

Android 额外设置

1. 在android/settings.gradle中添加以下内容：

1include ':react-native-debug-toolkit'
2project(':react-native-debug-toolkit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-debug-toolkit/android')

2. 在android/app/build.gradle中添加以下依赖：

1dependencies {
2    // 其他依赖...
3    
4    debugImplementation 'io.github.didi.dokit:dokitx:3.7.1'
5    releaseImplementation 'io.github.didi.dokit:dokitx-no-op:3.7.1'
6    debugImplementation 'com.android.volley:volley:1.2.0'
7    
8    implementation project(':react-native-debug-toolkit')
9}

3. 在MainApplication.kt中初始化DoKit：

1import com.didichuxing.doraemonkit.DoKit 
2import com.reactnative.debuglibs.RNDebugLibsPackage
3
4// 在getPackages方法内
5add(RNDebugLibsPackage())
6
7 // 在onCreate方法内
8if (BuildConfig.DEBUG) {
9    DoKit.Builder(this)
10        .build()
11    DoKit.hide()
12}

使用方法

将调试工具包添加到您的应用程序中非常简单，只需一行代码即可启用所有功能：

1// 在App.js或其他初始化文件中
2import React, { useEffect } from 'react';
3import { initializeDebugToolkit, isDebugMode } from 'react-native-debug-toolkit';
4
5function App() {
6  useEffect(() => {
7    if (isDebugMode) {
8      // 使用所有默认功能初始化
9      initializeDebugToolkit();
10      
11      // 或选择特定的内置功能
12      // initializeDebugToolkit(['network', 'console', 'zustand', 'navigation', 'thirdPartyLibs']);
13    }
14    
15    return () => {
16      // 自动清理
17    };
18  }, []);
19  
20  return <YourApp />;
21}

就这么简单！现在您的应用程序将在开发模式下显示一个浮动的调试面板，让您可以访问所有调试功能。

内置功能

通过上面的一行代码初始化，您将自动获得以下所有调试功能：

• 网络监控：跟踪和检查所有网络请求和响应
• 控制台日志：在应用内查看所有控制台日志输出
• Zustand状态：监控Zustand状态管理（如果您的应用使用Zustand）
• 导航跟踪：自动记录应用内的导航事件
• 第三方调试工具：快速访问原生调试工具（iOS的FLEX，iOS和Android的DoraemonKit）

集成

高级Axios网络跟踪

对于使用Axios的项目，您可以启用更详细的网络请求跟踪：

1import axios from 'axios';
2import { createNetworkFeature, isDebugMode } from 'react-native-debug-toolkit';
3
4// 获取网络功能实例并设置Axios拦截器
5if (isDebugMode) {
6  const networkFeature = createNetworkFeature();
7  networkFeature.setupAxiosInterceptors(axios);
8  
9  // 可选：排除敏感URL（如认证接口）
10  networkFeature.addUrlToBlacklist('api.example.com/auth');
11  networkFeature.addUrlToBlacklist(/password/i); // 支持正则表达式
12}

监控Zustand状态（如果您使用Zustand）

如果您的应用使用Zustand进行状态管理，只需添加中间件即可跟踪所有状态变化：

1import { create } from 'zustand';
2import { zustandLogMiddleware } from 'react-native-debug-toolkit';
3
4// 只需添加zustandLogMiddleware来包装您的store
5const useStore = create(
6  zustandLogMiddleware(
7    (set) => ({
8      count: 0,
9      increment: () => set((state) => ({ count: state.count + 1 })),
10      decrement: () => set((state) => ({ count: state.count - 1 })),
11    })
12  )
13);

导航跟踪（React Navigation）

如果您使用React Navigation，添加导航跟踪只需一步：

1import React, { useRef } from 'react';
2import { NavigationContainer } from '@react-navigation/native';
3import { useNavigationLogger } from 'react-native-debug-toolkit';
4
5function AppNavigator() {
6  const navigationRef = useRef(null);
7  
8  // 添加这一行来启用导航日志
9  useNavigationLogger(navigationRef);
10  
11  return (
12    <NavigationContainer ref={navigationRef}>
13      {/* 您的导航配置 */}
14    </NavigationContainer>
15  );
16}

自定义配置

如果您不需要所有功能，可以选择性地启用特定功能：

1// 只启用网络和控制台日志功能
2initializeDebugToolkit(['network', 'console']);
3
4// 或者指定一组自定义功能
5initializeDebugToolkit([
6  'network',
7  'console', 
8  'zustand', 
9  'navigation',
10  'thirdPartyLibs'
11]);

常见问题排除

调试面板不显示

• 确保您在开发模式下（isDebugMode为true）
• 检查是否正确调用了initializeDebugToolkit()

iOS功能不工作

• 确认您已将FLEX和DoraemonKit添加到Podfile
• 在修改后重新运行pod install
• 确保您正在运行Debug构建版本

网络请求未被捕获

• 对于Axios，请确保调用了setupAxiosInterceptors(axios)
• 对于fetch请求，工具包会自动拦截，无需额外配置

应用性能问题

• 此调试工具包仅适用于开发阶段，请确保生产构建中未包含
• 如果开发模式下性能受影响，可以尝试只启用特定功能