native 真机测试react_React Native调试技巧与心得

在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。

Developer Menu

Developer Menu是React Native给开发者定制的一个开发者菜单，来帮助开发者调试React Native应用。

提示：生产环境release (production) 下Developer Menu是不可用的。

如何开启Developer Menu

在模拟器上开启Developer Menu

Android模拟器：

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

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

iOS模拟器：

可以通过Command⌘ + D快捷键来快速打开Developer Menu。

在真机上开启Developer Menu：

在真机上你可以通过摇动手机来开启Developer Menu。

预览图

Developer Menu

Reloading JavaScript

在只是修改了js代码的情况下，如果要预览修改结果，你不需要重新编译你的应用。在这种情况下，你只需要告诉React Native重新加载js即可。

提示：如果你修改了native 代码或修改了Images.xcassets、res/drawable中的文件，重新加载js是不行的，这时你需要重新编译你的项目了。

Reload js

Reload js即将你项目中js代码部分重新生成bundle，然后传输给模拟器或手机。

在Developer Menu中有Reload选项，单击Reload让React Native重新加载js。对于iOS模拟器你也可以通过Command⌘ + R快捷键来加载js，对于Android模拟器可以通过双击r键来加载js。

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

小技巧：Automatic reloading

Enable Live Reload

Enable Live Reload

React Native旨在为开发者带来一个更好的开发体验。如果你觉得上文的加载js代码方式太low了或者不够方便，那么有没有一种更简便加载js代码的方式呢？

答案是肯定的。

在 Developer Menu中你会看到&