402's Dojo

React Native入门实例教程 - 调试系统

最近一段时间在学习和实践React Native,做一些有趣有用总结和大家分享。这个系列文章可以在这里找到。

调试系统概览

React Native的调试系统设计采用接近Web开发的方式,无需编译,非常方便。
使用react-native init命令创建的React Native项目,Xcode run起来之后会先执行一个shell程序:../node_modules/react-native/packager/react-native-xcode.sh

这个程序会绑定JS资源和利用node.js启动一个server,默认端口是localhost:8081,用于App访问React Native js资源和在Chrome中调试。

具体的原理(如server启动、键盘事件监听)预计以后写一个完整的React Native调试原理的分析文章,这里就不细说了。

在React Native Apps内部调试

在iOS真机上通过shake手势触发React Native developer menu(模拟器通过快捷键 control + ⌘ + z),如下图:

主要调试选项有:

  • Reload:访问node.js server,重新加载当前页面的JS,包括React Native目录下引用的资源文件;
  • Debug in Chrome:将当前页面在Chrome中调试。
    除此之外在模拟器中执行Reload操作操作还可以通过⌘ + r触发。
    因此界面调试无需编译,对于使用IDE的iOS和Android开发者都明白这会节省多少开发时间,非常方便。
    当然,如果你的Native代码改变或者集成环境中的图片等资源改变,还是需要重新编译项目的。

在Chrome中调试React Native Apps

Developer menu中选择Debug in Chrome可以在Chrome中打开一个新标签页访问http://localhost:8081/debugger-ui

模拟器调试

此时如果是模拟器调试,只需要在Chrome中打开开发者工具(前端同学应该比较熟悉,快捷键:⌘ + option + i,或者到菜单中选择:View → Developer → Developer Tools)。建议开启Pause On Caught Exceptions选项提升调试体验。

模拟器和Mac开发环境在同一个网络环境下,因此直接访问localhost:8081即可,真机调试有所不同。

真机调试

如果是真机调试,则需要真机和Macbook(or PC)在同一网络环境下:

  • On iOS - open the file RCTWebSocketExecutor.m and change localhost to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.
  • On Android, if you're running Android 5.0+ device connected via USB you can use adb command line tool to setup port forwarding from the device to your computer. For that run: adb reverse 8081 8081 (see this link for help on adb command). Alternatively, you can open dev menu on the device and select Dev Settings, then update Debug server host for device setting to the IP address of your computer.

Chrome React Native调试扩展

Google Chrome有一个React调试的扩展
安装之后Chrome的开发者工具中会多出一个React标签,在这个标签下可以调试React Components的视图层级结构。

实时Reload

在developer menu中选择Enable Live Reload,每当JS发生变化时,App就会尝试重新加载JS。

FPS (Frames per Second) Monitor

点击Show Perf Monitor之后,会展示内存占用、FPS等信息,如下图:

Where to go

React Native入门实例教程 - 开发遇到的问题汇总

评论