React Native调试方法

如何开启Developer Menu

在模拟器上开启

Android模拟器：ctrl + M
IOS 模拟器：ctrl + D

在真机上开启

我只用了Andriod模拟器。真机上据说是摇一摇就可以开启。

开发者菜单各项

Reload： 改动代码后，看效果，可以重新运行，也可以点Reload
Debug ： 开启React-Naive的Debug模式
Enable Live Reload: 实时加载，改UI的时候，可以即时看到自己改的样式。不过会整个更新，展示最初页面。看子页面需要点进去。
Enable Hot Reloading： 热加载。只在当前页面更新。子页面即更新为子页面。

在development模式下，JS部分的Errors和Warnings会直接打印在手机或模拟器屏幕上。
红屏Error，也可以console.error()
黄屏Warning，也可以通过console.warn()，console.disableYellowBox = true来手动禁用Warnings的显示，或者通过console.ignoredYellowBox = ['Warning:...']; 来忽略相应的Warning。

提示：生产环境realease(production)下Errors和Warnings功能是不可用的。

Chrome Developer Tools

Chrome开发工具

命令行cd 到项目路径，react-native start
点击开发者菜单的debug项，成功图如下：

然后打开Developer Tools
ctrl+shift+I, 或者菜单找到这一项点击

Source-local host:8081下是我们项目的源代码

下面的Console栏可以看console.log();等的信息。
在Console栏输出信息是常用Debug法

在代码里加一行debugger；，执行到这里会暂停。
手动选中某一行，执行到这儿也暂停。

Chrome八大组件

Element面板：用于查看和编辑当前页面中的HTML和CSS元素。
Network面板：用于查看HTTP请求的详细信息，如请求头、响应头及返回内容等。
Source面板：用于查看和调试当前页面所加载的脚本的源文件。
TimeLine面板：用于查看脚本的执行时间、页面元素渲染时间等信息。
Profiles面板：用于查看CPU执行时间与内存占用等信息。
Resource面板：用于查看当前页面所请求的资源文件，如HTML，CSS样式文件等。
Audits面板：用于优化前端页面，加速网页加载速度等。
Console面板：用于显示脚本中所输出的调试信息，或运行测试脚本等。

提示：调试React Native应用，Sources 和Console是使用频率很高的两个工具。

在真机上调试

Android

先在电脑上把端口打开（见上文）。
方式一：
在Android5.0以上设备上，将手机通过usb连接到你的电脑，然后通过adb命令行工具运行如下命令来设置端口转发。

adb reverse tcp:8081 tcp:8081

方式二：
Developer Menu-Dev Settings 中设置你电脑的ip来进行调试。

IOS

打开“RCTWebSocketExecutor.m”文件，将localhost改为电脑ip，在Developer Menu下单击“Debug”启动JS远程调试功能。

提示：真机调试时，确保手机电脑在同一个网段内，即它们在同一个路由器下。

巧用Source面板

可暂停、恢复、步进等。窗口最下方按钮，遇到Exception时强制暂停。

执行控工具

从上图可以看到“执行控工具”按钮在侧板顶部，可按步执行代码，有几个按钮，调试利器：
Continue：继续执行代码直到遇到下一个断点。
Step over：步进代码以查看每一行代码对变量作出的操作，当代码调用另一个函数时，不会进入这个函数，so 你可以专注当前函数。
Step into：与Step over 类似，但当代码调用函数时，调试器会进去这个函数并跳转到函数的第一行。
Step out：但你进入一个函数后，可点击Step out 执行函数余下的代码并跳出改函数。
Toggle breakpoints：控制断点的开启和关闭，同时保持断点完好。

编辑断点

创建一个条件断点，你也可以在边栏（gutter line）右键并选择添加条件断点（Add Conditional Breakpoint）。在输入框中，输入一个可解析为真或假的表达式。仅当条件为真时，执行会在此暂停。

加油！