如何在真机上打开React Native开发者菜单

       通过摇一摇手机即可打开,也可以通过如下命令打开

adb shell input keyevent 82

 

效果图: 

React Native项目调试讲解(3)_当前页

Reload功能介绍:

       开发者菜单中Reload功能可以实现当修改JS代码以后,只需保存下,无需再次通过react-native run-adnroid 命令运行即可更新UI界面

 

Debug JS Remotely功能介绍:

          通过该功能可以打开React Native的Debug模式,会进入到浏览器进行调试。也可以在要调试的地方加入debugger关键字,类似于Web前端Vue的开发中的调试方式

 

Enable Live Reload

         是否实时加载,在频繁修改UI的时候可以用到,它是实际加载所有项目的文件

 

Enadle Hot Reloading

        是否热加载,只在当前页面去加载变更

 

 

 

Chomre 开发工具介绍:

  1. Element面板:用于查看和编辑当前页面的HTML和CSS元素
  2. NetWork面板:用于查看http协议的网络请求相关信息(请求头,请求体,响应体等等)
  3. Source面板:用于查看和调试当前页面所加载的脚本源文件
  4. TimeLine面板:用于查看脚本的执行时间,页面元素渲染时间等信息
  5. Profiles面板:用于查看CPU执行时间和内存占用等信息
  6. Audits面板:用于优化前端页面,加速网页加载速度
  7. Console面板:用于显示脚本中所输出的调试信息,或运行测试脚本

 

 

React native Console

          React native Console 是一个React-native 控制台插件,有了它就在也不用摇一摇手机或者通过命令的方式打开android 调式菜单了,具体操作如下图:

React Native项目调试讲解(3)_加载_02

 

也不用点击android调试菜单的Reload了,直接操作该控制台的刷新按钮即可。 

React Native项目调试讲解(3)_开发者_03

 

React native Console 插件的安装

         点击左上角的File>>Setting>>Plugins  ,然后输入React native Console进行安装即可React Native项目调试讲解(3)_当前页_04