React Native-调试篇

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

打开App内的开发菜单

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

一般的调试选项都在菜单里,具体的作用也可以从菜单项的名称看出一二。这里值得一提的是Hot Reloading和Live 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）选项，能够获得更好的开发体验。

在这里需要提一下的是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中文 调试