一、打开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,详细解释