React Native如何调试代码

React Native调试代码全流程

一 基础调试流程

• 打开开发者菜单
  • iOS 模拟器：按 Command + D；真机：摇晃设备
  • Android 模拟器：按 Command + M（macOS）/ Ctrl + M（Windows/Linux）；真机：摇晃设备
  • 注意：在 release/production 构建中开发者菜单会被关闭
• 刷新与自动重载
  • 手动重载：开发者菜单选 Reload；iOS 模拟器 Command + R，Android 模拟器 双击 R
  • 自动重载：开启 Enable Live Reload
  • 热重载：开启 Enable Hot Reloading（保持组件状态；遇到无法热更新的场景改用全重载）
• 红屏与黄屏
  • 开发构建下错误以 RedBox 全屏显示，警告以 YellowBox 显示；可用 console.error() / console.warn() 触发
  • 忽略警告：console.disableYellowBox = true 或 console.ignoredYellowBox = [‘Warning: …’]
  • 生产与发布构建中红黄屏自动关闭

二 远程调试与日志查看

• Chrome DevTools 调试 JS
  • 开发者菜单选 Debug JS Remotely，打开 http://localhost:8081/debugger-ui
  • 在 Chrome 中打开开发者工具（Mac：Command + Option + I；Windows/Linux：Ctrl + Shift + I），可用 Pause On Caught Exceptions 提升调试体验
  • 设备远程调试
    • iOS：在 RCTWebSocketExecutor.m 将 localhost 改为电脑 IP，再选 Debug JS Remotely
    • Android 5.0+：执行 adb reverse tcp:8081 tcp:8081；或在开发者菜单 Dev Settings 设置 Debug server host for device 为电脑 IP
  • 自定义调试器：设置环境变量 REACT_DEBUGGER 指向调试器命令，然后在菜单中选 Debug JS Remotely
• 查看原生与 JS 日志
  • React Native 日志：终端执行 react-native log-android 或 react-native log-ios
  • Android 系统日志：*adb logcat :S ReactNative:V ReactNativeJS:V
  • iOS 系统日志：在模拟器菜单 Debug -> Open System Log…

三 VS Code断点调试

• 准备
  • 安装 VS Code 与插件 React Native Tools
  • 启动 Metro 打包服务：在项目根目录运行 npx react-native start
• 配置与启动
  • 在 VS Code 中生成调试配置（运行/调试面板创建 launch.json）
  • 选择调试配置（如 Debug Android 或 Debug iOS），点击绿色启动按钮或按 F5
  • VS Code 将自动构建、安装并附加调试器到 React Native 进程
• 调试能力
  • 在代码行号左侧点击设置断点
  • 在调试面板查看变量、调用栈，并在控制台执行表达式或查看日志
• 常见问题
  • 无法连接：检查设备连接、确保 Metro 正常运行且无端口冲突
  • 源码映射错误：确认 sourceMap 配置正确；清理缓存并重新编译

四 原生与网络性能调试

• 原生代码断点
  • iOS：用 Xcode 打开 ios/YourApp.xcworkspace，在原生代码中设置断点并运行调试
  • Android：用 Android Studio 打开 android/ 工程，设置断点并调试
• 网络请求调试
  • Android 使用 Stetho：在 android/app/build.gradle 添加依赖，在 MainApplication 初始化 Stetho 并替换 OkHttpClient，随后在 chrome://inspect 的 Inspect device 中查看网络与数据库
• 性能监控
  • 开发者菜单选 Perf Monitor 打开性能覆盖层，查看 FPS、内存占用等指标
• Flipper 与 React DevTools
  • Flipper（桌面调试平台）：自 React Native 0.62+ 起集成默认启用；提供 Network、Logs、Databases 等插件，并内置 React DevTools 插件，适合全链路调试
  • React DevTools：专注 组件树、props/state 与组件性能分析；可独立运行 npx react-devtools，或在 Flipper 中作为插件使用

五 常见问题与排查清单

• 热重载不生效或异常：改用 Reload；新增 原生代码 或 资源文件（如 Images.xcassets、res/drawable）必须重新编译
• iOS 模拟器 Command + R 无效：在菜单 Hardware -> Keyboard 勾选 Connect Hardware Keyboard
• 远程调试连不上设备：确认 Metro 运行、设备与电脑在同一网络；Android 执行 adb reverse tcp:8081 tcp:8081；iOS 在 RCTWebSocketExecutor.m 中将 localhost 改为电脑 IP
• 断点无法命中或源码错位：检查 sourceMap 配置，清理缓存并重新编译；必要时重启 Metro 与调试会话
• 调试器被扩展干扰：在 Chrome 中暂时禁用扩展，逐个启用定位问题