React Native 调试指南

使用React Native开发过程中，调试是一项必不可少的功能。由于React Native涉及多端、多技术栈，其调试相对复杂，本文对不同场景下，涉及的多个方面的内容调试方法进行总结。

调试JavaScript

使用React Native开发过程中，我们的业务代码主要使用JavaScript编写，对JavaScript的调试是我们最常见的需求。

模拟器调试

开发阶段，通常将应用运行在模拟器中。以Mac为例，在iOS模拟器中，可以使用Command+R打开调试菜单，选择【Debug JS Remotely】，这样可以在Chrome中打开调试页面，在devtools里可以找到业务代码，断点调试。

Android模拟器中，可以使用Command+M打开调试菜单，同样选择【Debug JS Remotely】可以断点调试JavaScript代码。

模拟器中调试，便于做一些兼容性验证。比如测试发现我们应用在iOS 8上存在功能缺陷时，可以在Xcode中下载iOS 8模拟器，以这一版本来运行应用，断点调试，最终发现是iOS 8的JavaScriptCore中不支持Number.parseInt()方法。

真机调试

除了日常开发在模拟器中进行调试，有时我们也需要在真机进行调试。

比如iOS上，分享和消息推送这类功能，不能在模拟器中验证。而在Android上，各种定制ROM会产生各种兼容性问题需要具体去定位。

iOS真机调试比较麻烦，原因在于Apple对开发者各种证书的要求。作为iOS开发门外汉，通过阅读文章有了最基本的了解关于Certificate、Provisioning Profile、App ID的介绍及其之间的关系。

当前我使用的版本是Xcode Version 8.3.3 (8E3004b)，通过生成开发者证书，并在Xcode中相应配置，可以实现运行到真机

除了像上面指定开发者证书，下面配置也可以通用真机运行

能解决iOS真机运行，真机调试就比较容易了。需要确认手机和电脑在同一网络，同时可将AppDelegate.m中，jsCodeLocation中的【localhost】修改为电脑实际ip地址。这样，通过Xcode run运行到真机的应用，启动后摇晃手机，可以唤起调试菜单，然后就可以断点调试JavaScript业务代码了。

上面是比较顺利的情况下，不得不说Xcode很多坑，为了配置真机调试，找iOS开发同事帮忙配置后，始终不能安装到本地，提示没有匹配的【Provision Profile】。然而我们的release证书没有问题，可以正常打出ipa包。如果遇到这种情况，也有可以变通的方式，通过Xcode打包时，修改AppDelegate.m中jsCodeLocation的【localhost】，edit schema将Build Configuration修改为Debug。通过这种方式打出的ipa包，因为schema为Debug，安装后也可以摇晃手机唤起调试菜单。

起初我们始终不能正常真机调试，后来不知为何Xcode又正常，费解。

相比iOS真机调试，安卓真机调试相对容易。通过USB连接安卓手机时，需要确认打开调试模式，通过在终端中执行【adb devices】命令，可以查看目前识别到的设备。正常显示后，可以通过【react-native run-android】命令将应用运行到设备中，在Android 5.0以上系统的手机，通过执行【adb reverse tcp:8081 tcp:8081】命令便可以开始摇晃手机唤起调试菜单；在更低版本的安卓机中，需要在调试菜单【Dev Settings】的【Debug server host for device】中设置电脑的ip和端口。

由于各种定制ROM的特殊处理，有些机型上，执行【reac-native run-android】命令，不能成功把应用安装到设备上，这些需要具体看下。应用包apk是否已经生成，如果apk已经生成，仅安装失败，可以手动执行【adb install xx.apk】命令来安装应用。同时，已安装的应用，在某些机型会发现摇晃手机不能唤起调试菜单，这是因为在这些机型上，系统默认禁止了弹出悬浮框，需要在权限管理中，授予这一权限。

调试样式

在我们原来的web开发经验中，可以在Chrome Devtools下使用Elements工具，便利的查看生成的HTML内容和特定元素的样式。在工具中修改元素样式后，也可以立即看到效果。

最初使用React Native开发过程中，对于界面组件样式，没有便利的工具，调试菜单中自带的Show Inspector菜单项，功能基本上鸡肋。这个阶段，调试样式非常痛苦，只能通过加背景色等土方法定位样式问题。

后来官方在Atom编辑器中提供了Nuclide插件，在一些常用的开发调试方法（如断点调试）之外，提供了增强的Element Inspector。通过这个工具，可以看到最终渲染的视图树，配合使用Show Inspector菜单项，可以快速定位到目标元素的样式。这里有一篇对这一插件的介绍 React Native开发之IDE（Atom+Nuclide）安装，运行，调试。

上述工具在刚推出时有体验过，但并没常用。原因在于一是不稳定，经常断掉与模拟器的连接，二是最初不支持直接修改样式后无刷新看效果。

现在官方已经提供了新的工具，React Developer Tools。通过【npm install -g react-devtools】命令安装devtools后，在终端中执行【react-devtools】可以启动工具。（安装过程较长，需要科学上网）

使用这一工具，可以查看渲染出的的视图树，配合使用Show Inspector菜单项，可以快速定位到目标元素的样式。于此同时，也可以查看组件的props、state，在工具中修改样式，可以在模拟器中无刷新看到修改后的效果。

这样，可以方便的调试组件样式了。

调试原生代码

React Native框架自身是一个多技术栈的融合，当有组件和模块是由原生端封装给JavaScript调用时，在开发过程中也需要调试原生代码。

调试原生代码需要ide的支持，不管是在模拟器，还是在真机调试，需要通过ide（Android Studio/Xcode）运行到设备中。这样，在原生代码中的断点会按预期暂停，而我们也可以从JavaScript一路断点调试到原生代码中。

原生应用的ide还有另一个重要作用——看日志。开发调试过程中，日志信息都会输出到原生ide中，在这里除了可以看到JavaScript相关业务日志、异常信息外，还能看到原生端的日志和异常信息。开发调试过程，如果遇到应用不能按期启动、异常退出等情景，可以到原生ide中看下输出的日志帮助分析问题。

除了查看开发调试中的日志，在Android Studio中还能抓到release包的日志输出，在遇到生产包被反馈crash等问题时，可以通过USB连接真机，在ide中查看日志帮助定位。通过这种方式，找到过一个在安卓端偶现的，因为使用官方Modal引起的crash。

如果觉得有帮助，可以扫描二维码对我打赏，谢谢