RectNative教学|第二篇:调试技巧

如何开启Developer Menu

Reloading JS

Errors and Warnings

Chrome Developer Tools
真机调试
IOS调试

Android调试

在还没开始介绍整体功能的时候，为何先要说RectNative的调试篇呢，因为懂了RectNative调试篇后，才能更好的使用Hot Reloading功能。

如何开启Developer Menu

在模拟器上，ReactNative给我们开发者定制了一个开发者菜单来协助ReactNative应用的调试。

注意：生产环境release下Developer Menu是不可用的。

Android 模拟器：

可以通过

CTRL+M

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

IOS模拟器：

可以通过

Command⌘ + D

快捷键来打开Developer Menu

真机上：

可以通过摇动手机来开启Developer Menu

Reloading JS

在你不修改Native代码或修改Imges.xcassets,res/drawable中的文件（因为修改这些文件需要重新编译你的项目，因为Native不是脚本语言 都需要编译器编译）。当你只修改Js的情况下，则可以直接告诉React重新加载你的js即可。

原理

Reloading JS 是将你项目中的js代码重新生成bundle，然后重新给模拟器。

方法

你可以打开Developer Menu 中的Reload选项。

你可以在你模拟器处于焦点的状态下，双击

R

键

如果你觉得每次都要进行手动操作 很麻烦，那么我们可以使用Developer Menu提供的

Enable Live Reload

和

Enable Hot Reloading

进行自动的更新。那么详细介绍下这两者的区别

Enable Live Reload

当你的JS代码发生变化后，React Native会自动将生成的bundle上传至你的手机或模拟器。

Enable Hot Reloading

当你每次进行保存代码时，将会生成此次修改的代码增量包，节省时间。

Errors and Warnings

在development模式下，我们可以通过log来使屏幕以红黄展示。(生产环境不可用)

Errors

当程序出现Errors会被直接显示到屏幕上，以红色背景显示，并打印错误信息。我们可以通过

console.error()

来手动触发



* Warnings

你也可以通过

console.warn()

来手动触发Warnings。 你也可以通过

console.disableYellowBox = true

来手动禁用Warnings的显示，或者通过

console.ignoredYellowBox = ['Warning: ...'];

来忽略相应的Warning。

Chrome Developer Tools

通过Developer Menu 下的

Debug JS Remotely

启动js远程调试功能，此时Chrome会被打开，并创建一个http://localhost:8081/debugger-ui 。此时你可以通过

F12

开启Chrome的开发者工具。

真机调试

IOS调试

打开”RCTWebSocketExecutor.m “文件，将

“localhost”

改为你的电脑的ip，然后在Developer Menu下单击

"Debug JS Remotely"

启动JS远程调试功能。

Android调试

在Android5.0以上设备上，将手机通过usb连接到你的电脑，然后通过adb命令行工具运行如下命令来设置端口转发。

adb reverse tcp:8081 tcp:8081

你也可以通过在“Developer Menu”下的“Dev Settings”中设置你的电脑ip来进行调试。

参考资料：

https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7%E4%B8%8E%E5%BF%83%E5%BE%97/React%20Native%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7%E4%B8%8E%E5%BF%83%E5%BE%97.md