前幾天寞焙，龔老板發(fā)布了《React Native調(diào)試指南》，里邊基本上都是官方正規(guī)的套路莺匠，今天我就給大家講一點(diǎn)不一樣的東西闻丑。
Debugger-ui
說(shuō)到Debugger-ui，大家應(yīng)該都很熟悉了众羡，RN官方的遠(yuǎn)程調(diào)試器侨赡，長(zhǎng)得和chrome dev tools一摸一樣，不過(guò)功能上可就差遠(yuǎn)了粱侣，默認(rèn)情況下羊壹，它只能調(diào)試JavaScript和查看log等，比較常見(jiàn)的網(wǎng)絡(luò)調(diào)試等都不管用齐婴，如下圖所示油猫，空空如也。柠偶。情妖。
然而Debugger-ui其實(shí)是可以支持網(wǎng)絡(luò)調(diào)試的，這里有一個(gè)issue诱担，里邊有提到原理毡证。
其實(shí)就是利用Debugger-ui是運(yùn)行在browser中的特性，hack一下ajax蔫仙，然后開(kāi)啟一下chrome的cors即可料睛，大伙有興趣可以去折騰一下。
React Native Debugger
我就直接用了react-native-debugger，一個(gè)基于electron的桌面app恤煞，它集成了Debugger-ui屎勘、react-devtools、redux-devtools等居扒，大滿貫挑秉，啥都有。苔货。犀概。
完全可以用它來(lái)替代Debugger-ui和react-devtools，以往你可能要開(kāi)啟兩個(gè)端夜惭，現(xiàn)在一個(gè)app就幫你搞定了姻灶。。诈茧。
更重要的是产喉，它可以幫你開(kāi)啟Network inpesct，另外因?yàn)樗且粋€(gè)桌面app敢会，不存在cors問(wèn)題曾沈，不需要任何配置，即插即用鸥昏，很方便塞俱。。吏垮。
有圖有真相：
左邊是react-devtools障涯，可以直接查看元素、修改樣式膳汪、查看props和state
右邊是Console唯蝶、Sources、Network等調(diào)試功能遗嗽，Network是新增功能粘我，其他兩個(gè)和Debugger-ui一樣。
爽多了痹换。征字。。有沒(méi)有一種直接用chrome調(diào)試網(wǎng)頁(yè)的感覺(jué)晴音。柔纵。。
調(diào)試效率蹭蹭蹭往上漲了锤躁。。。
更多功能系羞，大伙可以去官網(wǎng)上挖掘郭计。。椒振。
Reactotron
這個(gè)東西也不錯(cuò)昭伸，stars超6000多，顯然社區(qū)的活躍度還是可以的澎迎。
react-native-debugger有的功能庐杨，它都有。
我用官方demo-react-native跑了一下夹供，如下圖所示：
在Timeline提供了所有信息灵份，包括action、saga哮洽、async storage填渠、web request、log鸟辅，截屏等氛什。
功能還是挺強(qiáng)大的，可定性也很強(qiáng)匪凉，可以自己寫plugins等枪眉。。再层。
如果你在跑demo-react-native時(shí)瑰谜，遇到“undefined is not an object (evaluating 'regeneratorRuntime.mark')”問(wèn)題，請(qǐng)參考這里树绩。
小結(jié)
綜合比較了一下萨脑，我個(gè)人還是選擇react-native-debugger，用起來(lái)相對(duì)方便一點(diǎn)饺饭。渤早。
當(dāng)然如果你要定制一個(gè)團(tuán)隊(duì)workflow，reactotron不失為一個(gè)選擇瘫俊。鹊杖。。
