前几天,龚老板发布了《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不失为一个选择。。。