在做React Native開發(fā)時(shí)掸驱，少不了的需要對(duì)React Native程序進(jìn)行調(diào)試。調(diào)試程序是每一位開發(fā)者的基本功弱睦，高效的調(diào)試不僅能提高開發(fā)效率踪央，也能降低Bug率臀玄。本文將向大家分享React Native程序調(diào)試的一些技巧和心得。

Developer Menu

Developer Menu是React Native給開發(fā)者定制的一個(gè)開發(fā)者菜單杯瞻，來幫助開發(fā)者調(diào)試React Native應(yīng)用镐牺。

提示：生產(chǎn)環(huán)境release (production) 下Developer Menu是不可用的。

如何開啟Developer Menu

在模擬器上開啟Developer Menu

Android模擬器：
可以通過Command? + M快捷鍵來快速打開Developer Menu魁莉。也可以通過模擬器上的菜單鍵來打開睬涧。

心得：高版本的模擬器通常沒有菜單鍵的募胃，不過Nexus S上是有菜單鍵的，如果想使用菜單鍵畦浓，可以創(chuàng)建一個(gè)Nexus S的模擬器痹束。

iOS模擬器：
可以通過Command? + control + z快捷鍵來快速打開Developer Menu。

在真機(jī)上開啟Developer Menu

在真機(jī)上你可以通過搖動(dòng)手機(jī)來開啟Developer Menu讶请。
預(yù)覽圖

Developer Menu.jpg

Reloading JavaScript

在只是修改了js代碼的情況下祷嘶，如果要預(yù)覽修改結(jié)果，你不需要重新編譯你的應(yīng)用夺溢。在這種情況下论巍，你只需要告訴React Native重新加載js即可。

提示：如果你修改了native 代碼或修改了Images.xcassets风响、res/drawable中的文件嘉汰，重新加載js是不行的，這時(shí)你需要重新編譯你的項(xiàng)目了状勤。

Reload js

Reload js即將你項(xiàng)目中js代碼部分重新生成bundle鞋怀，然后傳輸給模擬器或手機(jī)。
在Developer Menu中有Reload選項(xiàng)持搜，單擊Reload讓React Native重新加載js密似。對(duì)于iOS模擬器你也可以通過Command? + R快捷鍵來加載js，對(duì)于Android模擬器可以通過雙擊r鍵來加載js葫盼。

提示：如果Command? + R 無法使你的iOS模擬器加載js残腌，則可以通過選中Hardware menu中Keyboard選項(xiàng)下的 “Connect Hardware Keyboard” 。

小技巧：Automatic reloading

Enable Live Reload

Enable Live Reload.gif

React Native旨在為開發(fā)者帶來一個(gè)更好的開發(fā)體驗(yàn)贫导。如果你覺得上文的加載js代碼方式太low了或者不夠方便废累，那么有沒有一種更簡便加載js代碼的方式呢？
答案是肯定的脱盲。
在 Developer Menu中你會(huì)看到”Enable Live Reload” 選項(xiàng)，該選項(xiàng)提供了React Native動(dòng)態(tài)加載的功能日缨。當(dāng)你的js代碼發(fā)生變化后钱反，React Native會(huì)自動(dòng)生成bundle然后傳輸?shù)侥M器或手機(jī)上，是不是覺得很方便匣距。

Hot Reloading

Hot Reloading .gif

另外面哥，Developer Menu中還有一項(xiàng)需要特別介紹的，就是”Hot Reloading”熱加載毅待，如果說Enable Live Reload解放了你的雙手的話尚卫，那么Hot Reloading不但解放了你的雙手而且還解放了你的時(shí)間。 當(dāng)你每次保存代碼時(shí)Hot Reloading功能便會(huì)生成此次修改代碼的增量包尸红，然后傳輸?shù)绞謾C(jī)或模擬器上以實(shí)現(xiàn)熱加載吱涉。相比 Enable Live Reload需要每次都返回到啟動(dòng)頁面刹泄，Enable Live Reload則會(huì)在保持你的程序狀態(tài)的情況下，就可以將最新的代碼部署到設(shè)備上怎爵，聽起來是不是很瘋狂呢特石。

提示：當(dāng)你做布局的時(shí)候啟動(dòng)Enable Live Reload功能你就可以實(shí)時(shí)的預(yù)覽布局效果了，這可以和用AndroidStudio或AutoLayout做布局的實(shí)時(shí)預(yù)覽相媲美鳖链。

Errors and Warnings

在development模式下姆蘸，js部分的Errors 和 Warnings會(huì)直接打印在手機(jī)或模擬器屏幕上，以紅屏和黃屏展示芙委。

Errors

React Native程序運(yùn)行時(shí)出現(xiàn)的Errors會(huì)被直接顯示在屏幕上逞敷，以紅色的背景顯示，并會(huì)打印出錯(cuò)誤信息灌侣。 你也可以通過 console.error()來手動(dòng)觸發(fā)Errors推捐。

Errors.png

Warnings

React Native程序運(yùn)行時(shí)出現(xiàn)的Warnings也會(huì)被直接顯示在屏幕上，以黃色的背景顯示顶瞳，并會(huì)打印出警告信息玖姑。 你也可以通過 console.warn()來手動(dòng)觸發(fā)Warnings。 你也可以通過console.disableYellowBox = true來手動(dòng)禁用Warnings的顯示慨菱，或者通過console.ignoredYellowBox = ['Warning: ...'];來忽略相應(yīng)的Warning焰络。

Warnings.png

提示：在生產(chǎn)環(huán)境release (production)下Errors和Warnings功能是不可用的。

Chrome Developer Tools

Chrome 開發(fā)工具

谷歌 Chrome 開發(fā)工具符喝，是基于谷歌瀏覽器內(nèi)含的一套網(wǎng)頁制作和調(diào)試工具闪彼。開發(fā)者工具允許網(wǎng)頁開發(fā)者深入瀏覽器和網(wǎng)頁應(yīng)用程序的內(nèi)部。該工具可以有效地追蹤布局問題协饲，設(shè)置 JavaScript 斷點(diǎn)并可深入理解代碼的最優(yōu)化策略畏腕。 Chrome 開發(fā)工具一共提供了8大組工具：

• Element 面板： 用于查看和編輯當(dāng)前頁面中的 HTML 和 CSS 元素。
• Network 面板：用于查看 HTTP 請求的詳細(xì)信息茉稠，如請求頭描馅、響應(yīng)頭及返回內(nèi)容等。
• Source 面板：用于查看和調(diào)試當(dāng)前頁面所加載的腳本的源文件而线。
• TimeLine 面板： 用于查看腳本的執(zhí)行時(shí)間铭污、頁面元素渲染時(shí)間等信息。
• Profiles 面板：用于查看 CPU 執(zhí)行時(shí)間與內(nèi)存占用等信息膀篮。
• Resource 面板：用于查看當(dāng)前頁面所請求的資源文件嘹狞，如 HTML，CSS 樣式文件等誓竿。
• Audits 面板：用于優(yōu)化前端頁面磅网，加速網(wǎng)頁加載速度等。
• Console 面板：用于顯示腳本中所輸出的調(diào)試信息筷屡，或運(yùn)行測試腳本等涧偷。

提示：對(duì)于調(diào)試React Native應(yīng)用來說簸喂，Sources和Console是使用頻率很高的兩個(gè)工具。

你可以像調(diào)試JavaScript代碼一樣來調(diào)試你的React Native程序嫂丙。

如何通過 Chrome調(diào)試React Native程序

你可以通過以下步驟來調(diào)試你的React Native程序：

第一步：啟動(dòng)遠(yuǎn)程調(diào)試

在Developer Menu下單擊”Debug JS Remotely” 啟動(dòng)JS遠(yuǎn)程調(diào)試功能娘赴。此時(shí)Chrome會(huì)被打開，同時(shí)會(huì)創(chuàng)建一個(gè)“http://localhost:8081/debugger-ui.” Tab頁跟啤。

第二步：打開Chrome開發(fā)者工具

在該“http://localhost:8081/debugger-ui.”Tab頁下打開開發(fā)者工具诽表。打開Chrome菜單->選擇更多工具->選擇開發(fā)者工具。你也可以通過快捷鍵(Command? + Option? + I on Mac, Ctrl + Shift + I on Windows)打開開發(fā)者工具隅肥。

打開Chrome開發(fā)著工具之后你會(huì)看到如下界面：

真機(jī)調(diào)試

在iOS上

打開”RCTWebSocketExecutor.m “文件竿奏，將“l(fā)ocalhost”改為你的電腦的ip，然后在Developer Menu下單擊”Debug JS Remotely” 啟動(dòng)JS遠(yuǎn)程調(diào)試功能腥放。

在Android上

方式一：
在Android5.0以上設(shè)備上泛啸，將手機(jī)通過usb連接到你的電腦，然后通過adb命令行工具運(yùn)行如下命令來設(shè)置端口轉(zhuǎn)發(fā)秃症。
adb reverse tcp:8081 tcp:8081
方式二：
你也可以通過在“Developer Menu”下的“Dev Settings”中設(shè)置你的電腦ip來進(jìn)行調(diào)試候址。

心得：在使用真機(jī)調(diào)試時(shí)，你需要確保你的手機(jī)和電腦處在同一個(gè)網(wǎng)段內(nèi)种柑，即它們實(shí)在同一個(gè)路由器下岗仑。

小技巧：

巧用Sources面板

Sources 面板提供了調(diào)試 JavaScript 代碼的功能。它提供了圖形化的V8 調(diào)試器聚请。

Sources 面板可以讓你看到你所要檢查的頁面的所有腳本代碼荠雕，并在面板選擇欄下方提供了一組標(biāo)準(zhǔn)控件，提供了暫停驶赏，恢復(fù)炸卑，步進(jìn)等功能。在窗口的最下方的按鈕可以在遇到異常(exception)時(shí)強(qiáng)制暫停煤傍。源碼顯示在單獨(dú)的標(biāo)簽頁盖文，通過點(diǎn)擊 打開文件導(dǎo)航面板，導(dǎo)航欄中會(huì)顯示所有已打開的腳本文件蚯姆。

心得：Chrome開發(fā)著工具中的Sources面板幾乎是我最常用的功能面板椅寺。通常只要是開發(fā)遇到了js報(bào)錯(cuò)或者其他代碼問題，在審視一遍自己的代碼而一無所獲之后蒋失，我首先就會(huì)打開Sources進(jìn)行js斷點(diǎn)調(diào)試。

執(zhí)行控工具

從上圖可以看到“執(zhí)行控工具”按鈕在側(cè)板頂部桐玻，讓你可以按步執(zhí)行代碼篙挽，當(dāng)你進(jìn)行調(diào)試的時(shí)候這幾個(gè)按鈕非常有用：

• 繼續(xù)(Continue): 繼續(xù)執(zhí)行代碼直到遇到下一個(gè)斷點(diǎn)。
• 單步執(zhí)行(Step over): 步進(jìn)代碼以查看每一行代碼對(duì)變量作出的操作镊靴，當(dāng)代碼調(diào)用另一個(gè)函數(shù)時(shí)不會(huì)進(jìn)入這個(gè)函數(shù)铣卡，使你可以專注于當(dāng)前的函數(shù)链韭。
• 跳入(Step into): 與 Step over 類似，但是當(dāng)代碼調(diào)用函數(shù)時(shí)煮落，調(diào)試器會(huì)進(jìn)去這個(gè)函數(shù)并跳轉(zhuǎn)到函數(shù)的第一行敞峭。
• 跳出(Step out): 當(dāng)你進(jìn)入一個(gè)函數(shù)后，你可以點(diǎn)擊 Step out 執(zhí)行函數(shù)余下的代碼并跳出該函數(shù)蝉仇。
• 斷點(diǎn)切換(Toggle breakpoints): 控制斷點(diǎn)的開啟和關(guān)閉旋讹，同時(shí)保持?jǐn)帱c(diǎn)完好。

查看js文件

如果你想在開發(fā)者工具上預(yù)覽你的js文件轿衔，可以在打開Sources tab下的debuggerWorker.js選項(xiàng)卡沉迹，該選項(xiàng)卡下會(huì)顯示當(dāng)前調(diào)試項(xiàng)目的所有js文件。

斷點(diǎn)其實(shí)很簡單

斷點(diǎn)(Breakpoint) 是在腳本中設(shè)置好的暫停處害驹。在DevTools中使用斷點(diǎn)可以調(diào)試JavaScript代碼鞭呕，DOM更新和 network calls。

心得：你可以像使用Xcode/AndroidStudio調(diào)試Native應(yīng)用一樣宛官，來使用Chrome開發(fā)者工具通過斷點(diǎn)對(duì)程序進(jìn)行調(diào)試葫松。

添加和移除斷點(diǎn)

在 Sources 面板的文件導(dǎo)航面板中打開一個(gè)JavaScript文件來調(diào)試，點(diǎn)擊邊欄(line gutter) 為當(dāng)前行設(shè)置一個(gè)斷點(diǎn)底洗，已經(jīng)設(shè)置的斷點(diǎn)處會(huì)有一個(gè)藍(lán)色的標(biāo)簽腋么，單擊藍(lán)色標(biāo)簽，斷點(diǎn)即被移除枷恕。

心得：右鍵點(diǎn)擊藍(lán)色標(biāo)簽會(huì)打開一個(gè)菜單党晋，菜單包含以下選項(xiàng)：執(zhí)行到此(Continue to Here)，黑盒腳本(Blackbox scripts)徐块，移除斷點(diǎn)(Remove Breakpoint)未玻， 編輯斷點(diǎn)(Edit Breakpoint)，和 禁用斷點(diǎn)(Disable Breakpoint)胡控。在這里你可以對(duì)斷點(diǎn)進(jìn)行更高級(jí)的定制化的操作扳剿。

高級(jí)操作

上文講到右鍵點(diǎn)擊藍(lán)色標(biāo)簽會(huì)打開一個(gè)菜單，下面就介紹一下該菜單下的高級(jí)操作昼激。

執(zhí)行到此(Continue to Here)：

如果你想讓程序立即跳到某一行時(shí)庇绽，這個(gè)功能會(huì)幫到你。如果在該行之前還有別的斷點(diǎn)橙困，程序會(huì)依次經(jīng)過前面的斷點(diǎn)瞧掺。另外需要提出的是這個(gè)功能在任意一行代碼的邊欄(gutter line)前單擊右鍵都會(huì)看到。

黑盒腳本(Blackbox scripts)：

黑盒腳本會(huì)從你的調(diào)用堆棧中隱藏第三方代碼凡傅。

編輯斷點(diǎn)(Edit Breakpoint)：

通過該功能你可以創(chuàng)建一個(gè)條件斷點(diǎn)辟狈，你也可以在邊欄(gutter line) 右鍵并選擇添加條件斷點(diǎn)(Add Conditional Breakpoint) 。在輸入框中，輸入一個(gè)可解析為真或假的表達(dá)式哼转。僅當(dāng)條件為真時(shí)明未，執(zhí)行會(huì)在此暫停。

心得：如果你想讓程序在某處從來都不要暫停壹蔓，可以編輯一個(gè)條件永遠(yuǎn)為false的條件斷點(diǎn)趟妥。另外，你也可以在該行代碼的邊欄(gutter line)前單擊右鍵選擇“Never pause here”即可佣蓉，你會(huì)發(fā)現(xiàn)“Never pause here”其實(shí)就是在該行代碼上設(shè)了一個(gè)永遠(yuǎn)為false的條件斷點(diǎn)披摄。

管理你的斷點(diǎn)

你可以通過Chrome開發(fā)者工具的右邊面板來統(tǒng)一管理你的斷點(diǎn)。

心得：你可以通過斷點(diǎn)前的復(fù)選框來啟用和禁用斷點(diǎn)偏螺，也可以單擊右鍵來進(jìn)行更多的操作(如：移除斷點(diǎn)行疏，移除所有斷點(diǎn)，啟用禁用斷點(diǎn)等)套像。

有一種斷點(diǎn)叫全局?jǐn)帱c(diǎn)

全局?jǐn)帱c(diǎn)的作用是酿联，當(dāng)程序出現(xiàn)異常時(shí)，會(huì)在異常的地方暫停夺巩，這對(duì)快速定位異的常位置很方便贞让。
做iOS開發(fā)的同學(xué)都知道在Xcode中可以設(shè)置全局?jǐn)帱c(diǎn)，其實(shí)在Chrome 開發(fā)者工具中也同樣有與之對(duì)應(yīng)的功能柳譬，叫“Pause On Caught Exceptions”喳张。如果勾選上此功能，則即使所發(fā)生運(yùn)行時(shí)異常的代碼在 try/catch 范圍內(nèi)美澳，Chrome 開發(fā)者工具也能夠在錯(cuò)誤代碼處停住销部。

不要忽略控制臺(tái)

DevTools 控制臺(tái)(Console) 可以讓你在目前已暫停的狀態(tài)下進(jìn)行試驗(yàn)。按 Esc 鍵打開/關(guān)閉控制臺(tái)制跟。

心得：你可以在控制臺(tái)(Console)上打印變量舅桩，執(zhí)行腳本等操作。在開發(fā)調(diào)試中非常有用雨膨。

參考:
chrome-devtools
CN-Chrome-DevTools
Debugging
http://blog.csdn.net/quanqinyang/article/details/52215652