如何调试react native项目

调试react native项目有两种方式：1、模拟器调试；2、真机调试。

一、模拟器调试

我们在 Android 模拟器上按快捷键 Command⌘ + M，在 iOS 模拟器上按快捷键 Command⌘ + D，即可弹出调试菜单。

调试面板功能介绍：

1. Reload

刷新页面，对于 iOS 模拟器其快捷键是 Command⌘ + R。对于 Android 模拟器可以通过双击 r 键来加载js。

提示：如果Command⌘ + R 无法使你的iOS模拟器加载js，则可以通过选中Hardware menu中Keyboard选项下的 "Connect Hardware Keyboard" 。

注意：只有修改 JavaScript 文件时，刷新功能才起作用。如果新增了文件或者修改了 Native 代码，就需要使用 Xcode 重新编译应用了。

2. Debug JS Remotely

（1）该功能允许开发人员在 Chrome 中调试应用，其调试方式和调试 Web 应用一样。

（2）当改功能被点击时，React Native 会启动 Chrome 浏览器，并且打开一个 http://localhost:8081/debugger-ui 的新标签。

（3）在这个标签页中，我们打开开发者工具，选择 Console，就可以看到输出的日志信息了。

（4）在 Sources Tab 页中还可以显示当前调试项目的所有 js 文件。并在上面进行断点调试。

3. Enable Live Reload

该功能主要用来实现自动刷新。当我们将实时加载启用后，如果应用中的 JavaScript 代码有任何修改，它都会自动帮我们更新，不需要人为去操作刷新功能。

4. Start Systrace

该功能主要用来监控应用在一段时间内的指标信息。

（1）我们点击“Start Systrace”开始监控。

（2）然后在操作后选择“Stop Systrace”结束监控。这时会弹出一个提示框，告诉我们数据已经生成。打开生成的 JSON 文件，就可以看到应用在这段时间内的详细指标信息了。

（3）如果我们装了 google 的 trace-viewer 插件，包服务器会帮我们自动调用 trace2html 命令打开这个 JSON 文件。

5. Enable Hot Reloading

启用热加载，同样是实现页面的自动刷新。

热加载的思想是运行时动态注入修改后的文件内容，同时不中断 APP 的正常运行。这样，我们就不会丢失 APP 的任何状态信息，尤其是 UI 页面栈相关的。

热加载（Hot Reloading）与上面提到的实时加载（Live Reload）最关键的区别：

（1）实时加载应用更新时需要刷新当前页面，可以看到明显的全局刷新效果。

（2）而热加载基本上看不出刷新的效果，类似于局部刷新。

6. Show Inspector

（1）我们可以很方便的查看到当前选中元素的位置、样式、层级关系、盒子模型信息等等。方便我们快速定位问题。

（2）同时还提供了监控应用性能的功能。

7. Show Perf Monitor

该功能启用后会显示一个监控窗口，显示出实时的内存占用、UI 和 JavaScript 的 FPS 等信息。帮助我们调试性能问题。

二、真机调试

（1）将手机连接电脑。并在 Xcode 中，选择你的手机作为目标设备。

（2）选择好项目使用的开发者账号。

（3）同时相关的 Tests target 里同样也要选择使用的开发者账号。

（4）确保手机和 Mac 电脑在同一个网络环境下。然后编译运行程序。

React Native iOS 在新版中 BundleURL 加载方法做了重大改变，新增了 RCTBundleURLProvider 单例类专门处理 BundleURL，使用 NSUserDefaults 保存配置信息。

在 Debug 模式下，执行 react-native-xcode.sh 编译脚本会自动获取当前网卡 en0 的 IP 地址，并打入 App 包中一个配置文件 ip.txt，App 运行时会读取 ip 文件，自动生成 Developer Server URL。

这种加载方式的好处是：我们不再需要手动去把"localhost"改成 Mac 的 IP 了，每次编译都会读取当前最新的 IP。

（5）应用启动后，只需要摇一摇手机可以调出调试菜单，里面具体功能同模拟器一样，这里就不再说明了。

（6）由于 React 的特性，手机运行应用后，就可以断开数据线了。后面电脑上只要修改了 js 文件，手机上就能自动加载或实时热更新。