ReactNative调试

来源:互联网 发布:怎么看自己的淘宝联盟i 编辑:程序博客网 时间:2024/03/28 20:13

关于ReactNative调试

Developer Menu

1.如何开启Developer Menu

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

iOS模拟器:可以通过Command⌘ + D快捷键来快速打开Developer Menu。

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

2.Developer Menu 下的Reload

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

 

3.Developer Menu 下的Enable Live Reload

 

在 Developer Menu中你会看到"Enable Live Reload" 选项,该选项提供了React Native动态加载的功能。当你的js代码发生变化后,React Native会自动生成bundle然后传输到模拟器或手机上。

4.Developer Menu 下的Hot Reloading

Developer Menu中还有一项"Hot Reloading"热加载,如果说Enable Live Reload解放了你的双手的话,那么Hot Reloading不但解放了你的双手而且还解放了你的时间。 当你每次保存代码时Hot Reloading功能便会生成此次修改代码的增量包,然后传输到手机或模拟器上以实现热加载。相比 Enable Live Reload需要每次都返回到启动页面,Enable Live Reload则会在保持你的程序状态的情况下,就可以将最新的代码部署到设备上。

5.Errors and Warnings

React Native程序运行时出现的Errors会被直接显示在屏幕上,以红色的背景显示,并会打印出错误信息。 你也可以通过console.error()来手动触发Errors。

React Native程序运行时出现的Warnings也会被直接显示在屏幕上,以黄色的背景显示,并会打印出警告信息。 你也可以通过console.warn()来手动触发Warnings。 你也可以通过console.disableYellowBox = true来手动禁用Warnings的显示,或者通过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning。

6.访问控制台日志

在运行RN应用时,可以在终端中运行如下命令来查看控制台的日志:

 

$ react-native log-ios$ react-native log-android

7.React Developer Tools

React Native 0.43版本以上的可以使用React Developer Tools ,install React Developer Tools 在终端执行

 

npm install -g react-devtools
译注:react-devtools依赖于electron,而electron需要到国外服务器下载二进制包,所以国内用户这一步很可能会卡住。此时请在环境变量中添加electron专用的国内镜像源:ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/",然后再尝试安装react-devtools。
安装完成后在命令行中执行react-devtools即可启动此工具:
 
react-devtools
原创粉丝点击