React Native調試技巧與心得__React-Native

在做React Native開發時，少不了的需要對React Native程式進行調試。偵錯工具是每一位開發人員的基本功，高效的調試不僅能提高開發效率，也能降低Bug率。本文將向大家分享React Native程式調試的一些技巧和心得。 Developer Menu

Developer Menu是React Native給開發人員定製的一個開發人員菜單，來協助開發人員調試React Native應用。

提示：生產環境release (production) 下Developer Menu是停用。 如何開啟Developer Menu 在模擬器上開啟Developer Menu Android模擬器：

可以通過Command⌘ + M 快速鍵來快速開啟Developer Menu。也可以通過模擬器上的菜單鍵來開啟。

心得：高版本的模擬器通常沒有菜單鍵的，不過Nexus S上是有菜單鍵的，如果想使用菜單鍵，可以建立一個Nexus S的模擬器。 iOS模擬器：

可以通過Command⌘ + D快速鍵來快速開啟Developer Menu。 在真機上開啟Developer Menu：

在真機上你可以通過搖動手機來開啟Developer Menu。 預覽圖

Reloading JavaScript

在只是修改了js代碼的情況下，如果要預覽修改結果，你不需要重新編譯你的應用。在這種情況下，你只需要告訴React Native重新載入js即可。

提示：如果你修改了native 代碼或修改了Images.xcassets、res/drawable中的檔案，重新載入js是不行的，這時你需要重新編譯你的項目了。 Reload js

Reload js即將你項目中js代碼部分重建bundle，然後傳輸給模擬器或手機。
在Developer Menu中有Reload選項，單擊Reload讓React Native重新載入js。對於iOS模擬器你也可以通過Command⌘ + R 快速鍵來載入js，對於Android模擬器可以通過雙擊r鍵來載入js。

提示：如果Command⌘ + R 無法使你的iOS模擬器載入js，則可以通過選中Hardware menu中Keyboard選項下的 “Connect Hardware Keyboard” 。 小技巧：Automatic reloading Enable Live Reload

React Native旨在為開發人員帶來一個更好的開發體驗。如果你覺得上文的載入js代碼方式太low了或者不夠方便，那麼有沒有一種更簡便載入js代碼的方式呢。
答案是肯定的。 
在 Developer Menu中你會看到”Enable Live Reload” 選項，該選項提供了React Native動態載入的功能。當你的js代碼發生變化後，React Native會自動產生bundle然後傳輸到模擬器或手機上，是不是覺得很方便。 Hot Reloading

另外，Developer Menu中還有一項需要特別介紹的，就是”Hot Reloading”熱載入，如果說Enable Live Reload解放了你的雙手的話，那麼Hot Reloading不但解放了你的雙手而且還解放了你的時間。 當你每次儲存代碼時Hot Reloading功能便會產生此次修改代碼的增量包，然後傳輸到手機或模擬器上以實現熱載入。相比 Enable Live Reload需要每次都返回到啟動頁面，Enable Live Reload則會在保持你的程式狀態的情況下，就可以將最新的代碼部署到裝置上，聽起來是不是很瘋狂呢。

提示：當你做布局的時候啟動Enable Live Reload功能你就可以即時的預覽布局效果了，這可以和用AndroidStudio或AutoLayout做布局的即時預覽相媲美。 Errors and Warnings

在development模式下，js部分的Errors 和 Warnings會直接列印在手機或模擬器螢幕上，以紅屏和黃屏展示。 Errors

React Native程式運行時出現的Errors會被直接顯示在螢幕上，以紅色的背景顯示，並會列印出錯誤資訊。 你也可以通過 console.error()來手動觸發Errors。

Warnings

React Native程式運行時出現的Warnings也會被直接顯示在螢幕上，以黃色的背景顯示，並會列印出警告資訊。 你也可以通過 console.warn()來手動觸發Warnings。 你也可以通過console.disableYellowBox = true來手動禁用Warnings的顯示，或者通過console.ignoredYellowBox = ['Warning: ...'];來忽略相應的Warning。

提示：在生產環境release (production)下Errors和Warnings功能是停用。 Chrome Developer Tools Chrome 開發工具

Google Chrome 開發工具，是基於Google瀏覽器內含的一套網頁製作和調試工具。開發人員工具允許網頁開發人員深入瀏覽器和網頁應用程式的內部。該工具可以有效地追蹤布局問題，設定 JavaScript 斷點並可深入理解代碼的最佳化策略。 Chrome 開發工具一共提供了8大組工具： Element 面板： 用於查看和編輯當前頁面中的 HTML 和 CSS 元素。 Network 面板：用於查看 HTTP 要求的詳細資料，如要求標頭、回應標頭及返回內容等。 Source 面板：用於查看和調試當前頁面所載入的指令碼的源檔案。 TimeLine 面板： 用於查看指令碼的執行時間、頁面元素渲染時間等資訊。 Profiles 面板：用於查看 CPU 執行時間與記憶體佔用等資訊。 Resource 面板：用於查看當前頁面所請求的資源檔，如 HTML，CSS 樣式檔案等。 Audits 面板：用於最佳化前端頁面，加速網頁載入速度等。 Console 面板：用於顯示指令碼中所輸出的調試資訊，或運行測試指令碼等。

提示：對於調試React Native應用來說，Sources和Console是使用頻率很高的兩個工具。

你可以像調試JavaScript代碼一樣來調試你的React Native程式。 如何通過 Chrome調試React Native程式

你可以通過以下步驟來調試你的React Native程式： 第一步：啟動遠端偵錯

在Developer Menu下單擊”Debug JS Remotely” 啟動JS遠端偵錯功能。此時Chrome會被開啟，同時會建立一個“http://localhost:8081/debugger-ui.” Tab頁。
第二步：開啟Chrome開發人員工具

在該“http://localhost:8081/debugger-ui.”Tab頁下開啟開發人員工具。開啟Chrome菜單->選擇更多工具->選擇開發人員工具。你也可以通過快速鍵(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)開啟開發人員工具。

開啟Chrome開發著工具之後你會看到如下介面：
真機調試 在iOS上

開啟”RCTWebSocketExecutor.m “檔案，將“localhost”改為你的電腦的ip，然後在Developer Menu下單擊”Debug JS Remotely” 啟動JS遠端偵錯功能。 在Android上

方式一： 
在Android5.0以上裝置上，將手機通過usb串連到你的電腦，然後通過adb命令列工具運行如下命令來設定連接埠轉寄。 
adb reverse tcp:8081 tcp:8081

方式二：
你也可以通過在“Developer Menu”下的“Dev Settings”中設定你的電腦ip來進行調試。

心得：在使用真機調試時，你需要確保你的手機和電腦處在同一個網段內，即它們實在同一個路由器下。 小技巧： 巧用Sources面板

Sources 面板提供了調試 JavaScript 代碼的功能。它提供了圖形化的V8 調試器。 

Sources 面板可以讓你看到你所要檢查的頁面的所有指令碼代碼，並在面板選擇欄下方提供了一組標準控制項，提供了暫停，恢複，步進等功能。在視窗的最下方的按鈕可以在遇到異常(exception)時強制暫停。源碼顯示在單獨的標籤頁，通過點擊 開啟檔案導航面板，導覽列中會顯示所有已開啟的指令檔。

心得：Chrome開發著工具中的Sources面板幾乎是我最常用的功能面板。通常只要是開發遇到了js報錯或者其他代碼問題，在審視一遍自己的代碼而一無所獲之後，我首先就會開啟Sources進行js斷點調試。 執行控工具

從上圖可以看到“執行控工具”按鈕在側板頂部，讓你可以按步執行代碼，當你進行調試的時候這幾個按鈕非常有用： 繼續(Continue): 繼續執行代碼直到遇到下一個斷點。 逐步執行(Step over): 步進代碼以查看每一行代碼對變數作出的操作，當代碼調用另一個函數時不會進入這個函數，使你可以專註於當前的函數。 跳入(Step into): 與 Step over 類似，但是當代碼調用函數時，調試器會進去這個函數並跳轉到函數的第一行。 跳出(Step out): 當你進入一個函數後，你可以點擊 Step out 執行函數餘下的代碼並跳出該函數。 斷點切換(Toggle breakpoints): 控制斷點的開啟和關閉，同時保持斷點完好。 查看js檔案

如果你想在開發人員工具上預覽你的js檔案，可以在開啟Sources tab下的debuggerWorker.js選項卡，該選項卡下會顯示當前調試項目的所有js檔案。

斷點其實很簡單

斷點(Breakpoint) 是在指令碼中設定好的暫停處。在DevTools中使用斷點可以調試JavaScript代碼，DOM更新和 network calls。

心得：你可以像使用Xcode/AndroidStudio調試Native應用一樣，來使用Chrome開發人員工具通過斷點對程式進行調試。 添加和移除斷點

在 Sources 面板的檔案導航面板中開啟一個JavaScript檔案來調試，點擊側邊欄(line gutter) 為當前行設定一個斷點，已經設定的斷點處會有一個藍色的標籤，單擊藍色標籤，斷點即被移除。

心得：右鍵點擊藍色標籤會開啟一個菜單，菜單包含以下選項：執行到此(Continue to Here)，黑盒指令碼(Blackbox scripts)，移除斷點(Remove Breakpoint)， 編輯斷點(Edit Breakpoint)，和 禁用斷點(Disable Breakpoint)。在這裡你可以對斷點進行更進階的定製化的操作。 進階操作

上文講到右鍵點擊藍色標籤會開啟一個菜單，下面就介紹一下該菜單下的進階操作。

執行到此(Continue to Here)：

如果你想讓程式立即跳到某一行時，這個功能會幫到你。如果在該行之前還有別的斷點，程式會依次經過前面的斷點。另外需要提出的是這個功能在任意一行代碼的側邊欄(gutter line)前單擊右鍵都會看到。

黑盒指令碼(Blackbox scripts)：

黑盒指令碼會從你的呼叫堆疊中隱藏第三方代碼。

編輯斷點(Edit Breakpoint)：

通過該功能你可以建立一個條件斷點，你也可以在側邊欄(gutter line) 右鍵並選擇添加條件斷點(Add Conditional Breakpoint) 。在輸入框中，輸入一個可解析為真或假的運算式。僅當條件為真時，執行會在此暫停。 

心得：如果你想讓程式在某處從來都不要暫停，可以編輯一個條件永遠為false的條件斷點。另外，你也可以在該行代碼的側邊欄(gutter line)前單擊右鍵選擇“Never pause here”即可，你會發現“Never pause here”其實就是在該行代碼上設了一個永遠為false的條件斷點。 管理你的斷點

你可以通過Chrome開發人員工具的右邊面板來統一管理你的斷點。

心得：你可以通過斷點前的複選框來啟用和禁用斷點，也可以單擊右鍵來進行更多的操作(如：移除斷點，移除所有斷點，啟用禁用斷點等)。 有一種斷點叫全域斷點

全域斷點的作用是，當程式出現異常時，會在異常的地方暫停，這對快速定位異的常位置很方便。
做iOS開發的同學都知道在Xcode中可以設定全域斷點，其實在Chrome 開發人員工具中也同樣有與之對應的功能，叫“Pause On Caught Exceptions”。如果勾選上此功能，則即使所發生運行時異常的代碼在 try/catch 範圍內，Chrome 開發人員工具也能夠在錯誤碼處停住。 
不要忽略控制台

DevTools 控制台(Console) 可以讓你在目前已暫停狀態下進行實驗。按 Esc 鍵開啟/關閉控制台。

心得：你可以在控制台(Console)上列印變數，執行指令碼等操作。在開發調試中非常有用。 參考

chrome-devtools
CN-Chrome-DevTools