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(性能分析)。
追问:
- Chrome 调试模式和 Hermes 引擎调试有什么区别?
- Flipper 在新架构下是否还适用?有什么替代方案?
- 如何对 React Native 的启动耗时进行量化分析?
- 生产环境如何收集 JS 异常和崩溃日志?
- Hermes 的 CPU Profiler 生成的 trace 文件如何分析?