React Native 调试技巧

一、打开RN开发者菜单

不管是真机还是模拟器,都需要首先输入命令,打开RN开发者菜单,命令如下

adb shell input keyevent 82

真机左右摇晃手机几下,也可以打开开发者菜单

菜单如下图

里面有很多选项,例如重新加载程序、Debug模式开启、实时更新、快速热修复,类似于instant run、开发者调试设置等等。

但是开发者菜单只可在debug版本中调出,假如是apk的release版本则不可调出。

二、设置开发者菜单

1.Reload选项  

Reload代表重新加载程序的js代码,意味着程序会重新运行,并更新修改过后的js代码.

每次修改代码,需要重新运行,只需调出开发者菜单,选中Reload即可.  

2.Enable Live Reload选项

 即Reload自动执行的选项,

当你修改代码后,只需按下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版本中是不会显示的.

5.性能检测

可以在开发者菜单中选择”show/hide Pref Monitor”选项以开启一个悬浮层,

它会显示应用的当前帧数。

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

谷歌浏览器可以方便对RN的JS代码进行debug调试()

具体操作步骤是:

    打开谷歌浏览器输入:http://localhost:8081/debugger-ui ,这个页面,你可以方便的进行调试.

    在cmd窗口输入 adb shell input keyevent 82,打开rn开发者菜单选中Debug JS Remotely选项.

    在在Chrome的菜单中选择Tools → Developer Tools可以打开开发者工具,
    也可以通过键盘快捷键来打开(Mac上是Command + Option+ I,Windows上是Ctrl + Shift + I或是F12)。

但只能提供console输出,以及在sources项中断点调试js脚本,并且浏览器中的react插件也不可用,这个插件是用来查看react应用的界面结构的,但是RN中不支持.

另外,这里指的是js代码层面的打断点调试,假如是native代码,还是需要到android中进行调试的,和平常开发一样.

打开网址http://localhost:8081/debugger-ui时,会显示waiting的等待连接提示

(我的模拟器,一直连不上,但是可以查看输出日志,真机可以连上)

连接成功后如下图:

之后按F12,会出现控制台console,详细解释

这里写图片描述

猜你喜欢

转载自blog.csdn.net/jinmie0193/article/details/81391435