React Native 项目的调试

简介

在开发 React Native项目的时候,需要对项目进行调试,可以提高开发效率,减少 bug.

开发者菜单(Developer Menu)

• Android 模拟器

  • 可以通过 CMD + M 快捷键打开,或者点击模拟器菜单

• iOS 模拟器

  • 可以通过 CMD _ R 快捷键打开

• 真机上

  • 通过摇晃手机打开

开发者菜单各个选项的意义

• Reload

  • 这个选项是将项目中 js 代码重新生成bundle,传输到手机或者模拟器上
  • 在 iOS 模拟器通过 CMD + R快捷键来重新加载 js
  • 在 Android 模拟器上双击 R 来重新加载
  • 如果CMD + R 在 iOS 模拟器不起作用,可以如下图进行操作

• Debug JS Remotely

  • 这个选项是开启 js远程调试功能,这是 Chrome 浏览会自动打开,并且打开http://localhost:8081/debugger-ui网页
  • 在该网页下发开浏览器的开发者工具就可以调试了
  • 这个调试和通常的浏览器调试一样...

• Enable Live Reload

  • 这个选项是打开React Native动态加载的功能,当修改 js 代码之后, React Native 会自动生成 bundle 传输到手机或者模拟器上,不用我们手动刷新(全局刷新)

• Start Systrace

  • 这个选项主要是监控 App 在一段时间内的指标信息
  • 点击 Start Systrace 开始监控
  • 随后点击 Stop Systrace 结束监控,之后会弹出提示,数据保存在 json 文件中,打开对应的文件就可以看到App 指标信息了,如下图:

• Enable Hot Reloading

  • 启动动态加载功能
  • 它和Enable Live Reload的主要区别就是不会中断App 的正常运行,看不出刷新的效果,类似于局部刷新

• Show Inspector

  • 这个选项打开我们可以很方便的看到当前选中组件的位置,样式,层级关系,盒子模型等等,如下图:

• Show Perf Monitor

  • 这个选项会打开一个监控窗口,显示实时的内存占用, UI和 JavaScript 的 FTP 信息,以便调试性能问题,如下图: