调试React-Native应用的最佳方法有哪些？

基础调试入口：开发者菜单 #

• 呼出方式：iOS模拟器按Cmd + D，Android模拟器按Cmd + M（Windows/Linux设备对应Ctrl + M），真机直接摇晃设备即可呼出
• 最常用的远程调试选项为Debug JS Remotely，选中后会自动拉起Chrome调试页面，默认地址为http://localhost:8081/debugger-ui/，打开Chrome DevTools即可实现JS代码断点、console日志查看、上下文变量查询等操作，和调试Web/Hybrid应用的操作逻辑基本一致
• 开发阶段建议开启Hot Reloading，修改JS代码后会在保留应用当前状态的前提下注入更新，无需重启应用就能看到修改效果；如果修改了原生代码，选择Reload刷新整个应用即可

日志调试 #

• 常规console.log()、console.warn()、console.error()语法完全兼容，日志会同时输出到Metro服务终端和Chrome调试器的Console面板
• 如果需要排查闪退、原生模块调用失败这类问题，可以直接在终端执行react-native log-android（Android端）或react-native log-ios（iOS端），可以查看JS层和原生层的合并输出日志

UI布局与性能调试 #

• 开发者菜单选择Show Inspector，点击应用内任意UI元素即可查看对应的样式属性、props、state值，和Chrome Elements面板用法一致，适合快速排查布局错位、样式不生效问题
• 开启Show Perf Monitor可以调出实时性能面板，查看FPS、内存占用、CPU使用率等指标，方便定位卡顿、性能损耗问题

原生层问题调试 #

• Android端直接用Android Studio打开项目根目录下的android文件夹，运行项目后可在Logcat面板查看完整的原生运行日志，也可以直接给原生代码打断点调试
• iOS端用Xcode打开项目根目录ios文件夹下的.xcworkspace文件，运行项目后即可在Xcode内查看原生日志、打断点排查原生模块的异常

常见问题排查技巧 #

• 遇到代码修改后不生效、莫名其妙的运行异常时，优先执行npx react-native start --reset-cache清除Metro缓存后重启服务，绝大多数玄学问题都可以通过该方式解决
• 状态管理相关的问题，可直接配合对应框架的调试工具使用，在调试器内就能查看全量状态变更流程

内容的提问来源于stack exchange，提问作者Neotrixs