React-Native调试技巧总结

前言

React-Native调试不像本地代码调试一样方便,但也是可以调试的.毕竟如果程序不能调试,那基本无法正常开发.接下来我们看下如何调试RN的程序.

1.打开开发者菜单.

开发者菜单是RN的一个调试菜单,里面有很多选项,例如重新加载程序,Debug模式开启,实时更新,快速热修复,类似于instant run,开发者调试设置等等.开发者菜单只可在debug版本中调出,假如是apk的release版本则不可调出.具体界面如下:

那么如何打开者菜单呢?这里分为模拟器和真机,模拟器很简单,mac下按cammand + M可调出开发者菜单.而在windows上可按下window+M可调出(有些模拟器是F1或F2).

1.开发者菜单的Reload选项

Reload代表重新加载程序的js代码,意味着程序会重新运行,并且你修改过后的js代码会更新,并运行.也就是开发者菜单中的第一项.每次修改代码,需要重新运行,只需调出开发者菜单,选中Reload即可.

2.开发者菜单中的Enable Live Reload选项

这个功能相当于Reload自动执行的选项,在开发者菜单的第二个选项.这个选项选中后,开发会变得更方便.当你修改代码后,便会自动执行.那么如何触发呢?毕竟不是你修改一行就加载一行,那样也不太正常啊.在subline中,只需按下crlt+s 这个保存的快捷键,即可调出live reload功能.

3.开发者菜单中的Enable Hot Reloading选项

这个功能相当于上面的live reload的加强版.也就是实时热修复,并直接达到当前所在的界面,保留当前的运行状态.类似android studio中的instant run,修改下界面后,直接显示修改后的ui效果.

注意: 这里的reload,live reload,hot reload都指的是js代码层面的调试,如果是android中或者ios中加入了图片资源,或者native代码有修改那就不行了,必须要重新编译才能看到效果.

4.错误提示.

RN代码运行的错误提示分为红屏和黄屏两种,红屏代表错误,即你的代码有显著错误,需要修复,不然无法运行.黄屏代表警告,不修复也是可以运行的.你可以手动禁止黄屏警告.只需加入一下代码:

console.disableYellowBox = true;console.warn('YellowBox is disabled.');

注意: 红屏和黄屏也只是在debug版本中才会显示,在release版本中是不会显示的.

RN中的红屏错误提示还是挺方便的,一般情况下都可以直接看错误描述就可以知道问题所在,例如下面的红屏错误信息:

这个错误指出错误的标记产生,发生在js代码的249行.这里可能就是你少写了一个中括号或者括号,导致代码结构出现了问题.还是比较方便的.

5.使用Chrome开发者工具调试.

使用谷歌浏览器可以方便的对RN的JS代码进行debug调试,当然前提是你得先装个谷歌浏览器.具体操作步骤是,打开开发者菜单,选中Debug JS Remotely选项.这时候应用会打开 http://localhost:8081/debugger-ui 这个页面.在这个页面,你可以方便的进行调试.在Chrome的菜单中选择Tools → Developer Tools可以打开开发者工具，也可以通过键盘快捷键来打开（Mac上是Command + Option+ I，Windows上是Ctrl + Shift + I或是F12）。此时就可以看到js的源代码和打断点调试.

虽然可以调试,但是还是不太只能,因为在Chrome中并不能直接看到App的用户界面，而只能提供console的输出，以及在sources项中断点调试js脚本。并且浏览器中的react插件也不可用,这个插件本来是用来查看react应用的界面结构的,但是RN中不支持.另外,这里指的是js代码层面的打断点调试,假如是native代码,还是需要到android中进行调试的,和平常开发一样.手机界面是这样:

浏览器是这样的:

6.性能检测

可以在开发者菜单中选择”Pref Monitor”选项以开启一个悬浮层，其中会显示应用的当前帧数。这个也非常的方便.