欢迎转载,请支持原创,保留原文链接:http://blog.ilibrary.me

React Native是基于javascript的,所以React Native的调试基本上就是Java Script的调试。

通过console调试

这就是经久不衰的print调试大法, 通俗易懂,老少咸宜。

Javascript里面通过下面的语句打日志:

console.log("Hello world");

如果是打印json数据,需要把json数据转换成string再打印:

console.log(JSON.stringify({message:"Hello World"}));

打印对象的属性

console.dir(obj);

日志打完以后去哪里看呢?主要有下面几种方式:

  1. 如果你是通过xcode启动的iOS程序,它会打印到xcode console.
  2. 如果是通过命令行启动的,你可以尝试通过remote debug, 启动chrome的调试器,然后在chrome console里面看到日志
  3. 安卓应用可以通过adb logcat看到打印日志

截图1, chrome console 日志 chrome console 日志

Chrome Debug UI

这个非常好用,可以充分发挥Chrome调试器的作用,强烈推荐这个。Mac 下面调试步骤, 模拟器点击 Command + D -> ‘Debug JS Remotely’ -> ‘localhost:8081/debugger-ui’会被自动在chrome浏览器里面打开 -> ‘inspect’ -> Command + P 就可以搜索源代码文件, 打开源代码文件即可下断点。

Nuclide

Nuclide 可以在js文件里面下断点。

具体步骤:

  1. View -> Toggle Command Palette -> React Native:Start Packager, 这会启动一个packager server
  2. View -> Toggle Command Palette -> React Native:Start Debugger. 这会启动一个远程js调试。
  3. 从命令行启动iOS程序:react-native run-ios
  4. 在iOS模拟器里面CMD+D -> Enable Remote JS debugger
  5. 然后你就可以在nuclide里面给js文件下断点了

还可以用React Native Inspector查看UI结构, 具体步骤:

  1. View -> Toggle Command Palette -> React Native:Start Packager, 这会启动一个packager server
  2. View -> Toggle Command Palette -> React Native Insepctor: show. 这会启动一个远程UI抓取窗口。
  3. 从命令行启动iOS程序:react-native run-ios
  4. 在iOS模拟器里面CMD+D -> Show Inspector
  5. 然后你就可以在nuclide里面看app的UI结构了.

截图2,React Native Inspector截图: React Native Inspector截图

Nuclide 也可以用于React Native Android调试。😁😊

Nuclide 用起来怪怪的,教程卡住,假死。

总结

总体上讲,React Native的调试体验还是不好,有动画的时候简直无法工作。相比之下, Chrome Dev Tools 还是至今为止最好的调试工具。

遇到问题的时候还是要多想办法,很多问题抛出来后没有提供太多有参考价值的信息,需要摸索凭经验来解决。

资料参考

Nuclide for React Native