React Native调试外传

前几天，龚老板发布了《React Native调试指南》，里边基本上都是官方正规的套路，今天我就给大家讲一点不一样的东西。

Debugger-ui

说到Debugger-ui，大家应该都很熟悉了，RN官方的远程调试器，长得和chrome dev tools一摸一样，不过功能上可就差远了，默认情况下，它只能调试JavaScript和查看log等，比较常见的网络调试等都不管用，如下图所示，空空如也。。。

然而Debugger-ui其实是可以支持网络调试的，这里有一个issue，里边有提到原理。

其实就是利用Debugger-ui是运行在browser中的特性，hack一下ajax，然后开启一下chrome的cors即可，大伙有兴趣可以去折腾一下。

React Native Debugger

我就直接用了react-native-debugger，一个基于electron的桌面app，它集成了Debugger-ui、react-devtools、redux-devtools等，大满贯，啥都有。。。

完全可以用它来替代Debugger-ui和react-devtools，以往你可能要开启两个端，现在一个app就帮你搞定了。。。

更重要的是，它可以帮你开启Network inpesct，另外因为它是一个桌面app，不存在cors问题，不需要任何配置，即插即用，很方便。。。

有图有真相：

左边是react-devtools，可以直接查看元素、修改样式、查看props和state

右边是Console、Sources、Network等调试功能，Network是新增功能，其他两个和Debugger-ui一样。

爽多了。。。有没有一种直接用chrome调试网页的感觉。。。

调试效率蹭蹭蹭往上涨了。。。

更多功能，大伙可以去官网上挖掘。。。

Reactotron

这个东西也不错，stars超6000多，显然社区的活跃度还是可以的。

react-native-debugger有的功能，它都有。

我用官方demo-react-native跑了一下，如下图所示：

在Timeline提供了所有信息，包括action、saga、async storage、web request、log，截屏等。

功能还是挺强大的，可定性也很强，可以自己写plugins等。。。

如果你在跑demo-react-native时，遇到“undefined is not an object (evaluating 'regeneratorRuntime.mark')”问题，请参考这里。

小结

综合比较了一下，我个人还是选择react-native-debugger，用起来相对方便一点。。

当然如果你要定制一个团队workflow，reactotron不失为一个选择。。。