5月29日 22:54

React Native 调试有哪些方法?各调试工具分别适用什么场景?

React Native 调试分 JS 层调试、原生层调试、性能分析 三个层面。

JS 层调试: Chrome DevTools 是最基础的方式,通过 Ctrl+M 打开开发者菜单选择 Debug 打开 Chrome 调试。但 Chrome 调试运行在 Chrome V8 而非设备 JSC/Hermes 上,存在兼容差异。推荐使用 Flipper,它内置 React DevTools 和网络检查器,支持断点、Console、组件树检查,是官方推荐的调试平台。

原生层调试: Android 用 Android Studio 的 Logcat 过滤 ReactNativeJNI 日志,可对原生模块设断点调试;iOS 用 Xcode 的 LLDB,在 RCTBridge 方法处打断点。

性能分析: Perf Monitor(开发者菜单内)查看 FPS 和内存;Systrace 记录帧渲染时间线定位掉帧原因;Hermes 引擎自带 CPU Profiler 生成 Chrome Trace 格式文件。React DevTools Profiler 分析组件渲染耗时和频率。

常用工具总结: Flipper(全能调试)、React DevTools(组件树)、Chrome DevTools(JS 断点)、Xcode/Android Studio(原生调试)、Systrace(性能分析)。

追问:

  1. Chrome 调试模式和 Hermes 引擎调试有什么区别?
  2. Flipper 在新架构下是否还适用?有什么替代方案?
  3. 如何对 React Native 的启动耗时进行量化分析?
  4. 生产环境如何收集 JS 异常和崩溃日志?
  5. Hermes 的 CPU Profiler 生成的 trace 文件如何分析?
标签:React