React调试

理想的App开发流程是这样的:产品经理提出明确的需求,UI给出完美的设计图,API那边的接口已经完成,App开发一遍完成,测试部门一遍就过,没有任何错误。但是产品经理总是在改需求,UI那边也时不时改设计图,API那边经常不稳定,你自己写的代码也经常错误百出。所以,对于写App的我们来说,我们需要调试自己的代码。事实上,调试代码,修复Bug会占用你大量的时间,因此调试对每一个App开发者都是非常重要的一件事。今天我们就来讲一讲React Native的调试。

##打开App内的开发菜单

  • 在iOS中晃动设备或者在模拟器上按下control + ⌘ + z
  • 在Android中晃动设备。比如,在genymotion 中你可以通过按下⌘ + m
    来模拟点击硬件菜单)。PC键盘上也有这个键,一般在标准键盘右边的Ctrl和右Windows键之间,即模拟鼠标右键的键。

App内置的调试菜单

一般的调试选项都在菜单里,具体的作用也可以从菜单项的名称看出一二。这里值得一提的是Hot ReloadingLive Reload的区别。这两项菜单的功能都是你只要保存一下原文件,那么App就会实时刷新。Live Reload是全局刷新,而Hot Reloading是局部刷新。

热刷新这样做有什么好处呢?举个例子,如果你现在调试的页面是个很深的页面,从打开app之后要点击好几次才能进到你想要调试的页面。这样就会浪费很多时间(虽然比重新编译程序,再让App跑起来要快很多)。这时候使用热刷新就会节省很多时间(Android Studio2以后的Instant Run也有类似功能)。

Chrome开发工具

在开始你的调试之旅之前,你最好下载一个Chrome插件React Developer Tools,这样会更方便你的调试。需要在开发菜单中选择Debug JS Remotely
,这会打开一个新的http://localhost:8081/debugger-uitab页。
在Chrome中,按下⌘ + option + i
或者选择视图(View) -> 开发者(Developer) -> 开发工具(Developer Tools)
来打开开发工具控制台。打开有异常时暂停(Pause On Caught Exceptions)选项,能够获得更好的开发体验。

打开的Debugger

在这里需要提一下的是Chrome中并不能直接看到App的用户界面,而只能提供console的输出,以及在sources项中断点调试js脚本。因此,我们在开发控制台一般就做上面两件事

  • 输出日志。利用console,对于Android开发者,console可能比较陌生;对于js开发者来讲,这是他们调试代码最基本的工具。其实它的作用就是Android中所用的Log类。Console的用法十分简单,像这样

    console.log('The info is ' + info);
    
  • 打断点。请在debuggerWorker.js目录下找到需要打断点的文件,别问我怎么知道的。宝宝我会告诉你我找打断点的地方找了一天么。之后你所要做的事情就是像一般调试流程一样进行调试就行了。

关闭开发者选项

当你的App写完正式发布之后,你就需要关闭开发者选项了,你可以通过以下的操作关闭开发者选项:

  • 对于iOS来说,在Xcode中打开你的项目,选择Product → Scheme → Edit Scheme... (或者按下⌘ + <)。接着选择菜单上左边的Run,然后将构建设置(Build Configuration)更改为Release.
  • 在Android中,默认情况下gradle的release版本(比如使用gradle的assembleRelease任务来构建)就会关闭开发者菜单。你也可以通过给 ReactInstanceManager#setUseDeveloperSupport传递需要的参数来定制这一行为。

其他

React Native除了可以利用chrome进行调试,也可以用Atom的插件Nuclide进行调试,感兴趣的可以访问其官网,功能比Chrome DevTools强大很多,估计很快就会取代后者。

参考

React Native中文 调试