React-Native（7）调试指南

React-Native 之调试指南 （七）

在模拟器上开启Developer Menu
Android模拟器：
可以通过 Command⌘ + M 快捷键来快速打开 Developer Menu。也可以通过模拟器上的菜单键来打开。

心得：高版本的模拟器通常没有菜单键的，不过Nexus S上是有菜单键的，如果想使用菜单键，可以创建一个Nexus S的模拟器。

iOS模拟器：
可以通过Command⌘ + D快捷键来快速打开 Developer Menu。

Chrome开发者工具

QQ20180126-120512.png

在Chrome上调试js代码，需要在开发菜单中选择 Debug JS Remotely，这会打开一个新的http://localhost:8081/debugger-uitab页。

在Chrome中，按下⌘ + option + i或者选择视图(View) -> 开发者(Developer) -> 开发工具(Developer Tools)来打开开发工具控制台。打开有异常时暂停（Pause On Caught Exceptions）选项，能够获得更好的开发体验。

译注：Chrome 中并不能直接看到App的用户界面，而只能提供console的输出，以及在sources项中断点调试js脚本。

image

在真机上调试：

在iOS上 —— 打开 RCTWebSocketExecutor.m文件，将其中的 localhost 替换为你电脑的ip地址。然后晃动设备打开开发菜单，即可开始调试。
对于Android设备 —— 如果你通过usb连接了一个Android 5.0或更高版本的设备，则可以通过adb命令建立一个从设备向电脑转发的端口：adb reverse tcp:8081 tcp:8081 (点击这里查看adb命令的帮助)。或者，你可以通过摇晃打开开发者菜单，选择Dev Settings，然后在 Debug server host for device 中设置你电脑的ip地址:端口号。