React Native調試實用技巧，React Native開發者必會的調試技巧

時間 2019-11-30

原文原文鏈接

在作React Native開發時，少不了的須要對React Native程序進行調試。調試程序是每一位開發者的基本功，高效的調試不只能提升開發效率，也能下降Bug率。本文將向你們分享React Native程序調試的一些技巧和心得。javascript

Developer Menu是React Native給開發者定製的一個開發者菜單，來幫助開發者調試React Native應用。html

提示：生產環境release (production) 下Developer Menu是不可用的。前端

Android模擬器：

能夠經過Command⌘ + M 快捷鍵來快速打開Developer Menu。也能夠經過模擬器上的菜單鍵來打開。java

心得：高版本的模擬器一般沒有菜單鍵的，不過Nexus S上是有菜單鍵的，若是想使用菜單鍵，能夠建立一個Nexus S的模擬器。react

iOS模擬器：

能夠經過Command⌘ + D快捷鍵來快速打開Developer Menu。android

在真機上你能夠經過搖動手機來開啓Developer Menu。ios

預覽圖

Reloading JavaScript

在只是修改了js代碼的狀況下，若是要預覽修改結果，你不須要從新編譯你的應用。在這種狀況下，你只須要告訴React Native從新加載js便可。git

提示：若是你修改了native 代碼或修改了Images.xcassets、res/drawable中的文件，從新加載js是不行的，這時你須要從新編譯你的項目了。github

Reload js

Reload js即將你項目中js代碼部分從新生成bundle，而後傳輸給模擬器或手機。
在Developer Menu中有Reload選項，單擊Reload讓React Native從新加載js。對於iOS模擬器你也能夠經過Command⌘ + R 快捷鍵來加載js，對於Android模擬器能夠經過雙擊r鍵來加載js。web

提示：若是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 開發工具

谷歌 Chrome 開發工具，是基於谷歌瀏覽器內含的一套網頁製做和調試工具。開發者工具容許網頁開發者深刻瀏覽器和網頁應用程序的內部。該工具能夠有效地追蹤佈局問題，設置 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 開發者工具也可以在錯誤代碼處停住。