React Native(以下簡稱RN)為傳統前端開發者打開了一扇新的大門。其中，使用瀏覽器的除錯工具去Debug移動端的程式碼，無疑是最吸引開發人員的特性之一。

試想一下，當你在手機螢幕按下一個按鈕，處理事件的程式碼就可以立即在瀏覽器的除錯工具裡進行斷點除錯，而且每當你對程式碼進行修改，介面便可以完成快速地過載，省去昂長的編譯時間，這會是多麼提高工作效率。

傳統的Web前端開發人員自然很熟悉瀏覽器的除錯工具，但是對於如何將其在RN中使用以便和移動端結合起來，也許會相當陌生。這也成為了一些開發者跨入RN移動開發大門的第一道小門檻。

本文是筆者一邊參考官方文件，一邊摸索RN除錯過程的記錄。希望能夠幫助新手開發者走出一小步，更快地邁過這道門檻。

在開始之前，你需要搭建好本地開發環境，並有一部Android 5.0版本以上的手機可供連線至電腦。

首先，使用官方工具react-native-cli建立好一個初始化的工程，並安裝好依賴。

安裝的命令為“react-native init DebugTest”（DebugTest為我們這次的專案名稱）

安裝完成後，就會多出一個名為DebugTest專案資料夾，資料夾內結構如下：

圖1. 專案初始結構

讓我們把專案執行起來。我這裡是在Windows下開發Android平臺的應用，並且在此之前，已經用USB線連線好了一臺Android版本7.1.1的真機。

執行專案的方法，就是進入DebugTest專案目錄，此時執行命令列react-native run-android。注意，這裡啟動時會新彈出另一個視窗，用於在8081埠啟動一個叫做Metro Bundler的服務，這個視窗在開發時是需要保持執行著的。

圖2. Metro Bundler 視窗

同時，可以看到原cmd命令列視窗，顯示在真機上安裝了apk，並自動對8081埠進行了某種對映，使真機上的應用和我們將要除錯的程式碼建立了動態的關聯。這個過程會比較消耗開發者電腦的系統資源，耐心等待一會兒就好。

圖3. 原cmd命令列視窗

當Metro Bundler視窗顯示index.js的對映進度達到100%時，手機上就可以看到預設的應用介面了。

圖4. 預設應用介面

同時，我們也可以退出應用，在手機的桌面上找到這個安裝好的應用。這裡，它的名字就是DebugTest，圖示是一個預設的安卓樣子。

我們進入這個應用，這時如果搖一搖手機，會彈出除錯相關的設定：

圖5. 除錯設定介面

Reload就是重刷整個應用，類似於在瀏覽器的F5重新整理。

Debug JS Remotely這個我們先留一個懸念，待會再來看。

先看看Enable Live Reload和Enable Hot Reloading。這兩個都可以實現在程式碼儲存時自動更新介面，它們區別是：Live Reload會重刷整個介面，相當於手動執行一次Reload。而Hot Reloading控制得更精準，它不會重刷整個介面，只會更新修改程式碼時影響的那個範圍。官方文件裡描述的是：This will allow you to persist the app's state through reloads. 也就是說，Hot Reloading時整個應用的狀態是不會改變的，頁面也是不會整個重刷的。有趣的是，與Live Reload對比，Hot Reloading的Reloading這個正在進行時的語法，也似乎意味著Hot Reloading是當程式正在執行時去熱乎乎地替換。

也許是因為各種 Reloading過於強大，它有時會出一點問題，比如在開啟Live Reload或者Hot Reloading後，偶爾程式碼錯誤時手機上彈出的紅屏介面在程式碼修改好後仍然不能恢復，這種時候，就需要手動Reload介面才能解決。

讓我們只是Enable Live Reload，然後從react-native引入Button，在View里加上一個按鈕。

圖6. 新增按鈕

這個時候，儲存程式碼。手機介面確實立即就變化了！說明Live Reload確實生效了。

不過，不是我們想要的介面，而是出現紅屏錯誤提示。

圖7. 紅屏錯誤提示

不用怕，遇到問題很正常。這時，可以從頭細心閱讀錯誤提示，發現它指出The title prop of a Button must be a string，並且這個error is located at: in Button (at App.js:37)。根據這個線索，我們看到App.js的第37行，正是剛才新增的Button程式碼。

查閱文件發現，在RN裡，Button元件有許多屬性，其中onPress和title這兩個屬性是required的，也就是必須要有。

圖8. 官方文件關於Button的節選

所以我們修改程式碼，

圖9. 補全Button需要的屬性

儲存，手機介面就重新整理了，並顯示出剛才新增的Button。

圖10. 正常執行

這裡還有一小點值得注意，如果只給Button裡的title設了值，而沒有給onPress設定，介面不會出紅色錯誤，而是在最下面出現一條黃色警告。仔細看，會發現其實這兩個屬性的Type不一樣。由此可知，當需要的型別是string而實際是undefined時，會報error，而需要的型別是function而實際是undefined時，只會報warnning。

同時可以看到，在上面的程式碼中，當按鈕按下時，會呼叫一個打log的事件。但是打出的log在哪兒可以看到呢？

有兩種方法。 第一種是在命令列顯示，在專案當前目錄（注意，一定要在專案當前目錄）再啟動一個新命令列視窗，輸入

就可以在最下面看到輸出的內容了，它不僅可以實時反饋現有的輸入，還儲存了之前的輸入。比如，下面三次輸入，前兩次輸入是在之前還沒有開啟這個命令列視窗時按下的。

也許你會想：我不是想在命令視窗看到輸出，而是想能夠在瀏覽器裡那樣看到輸出，甚至斷點除錯。這就是檢視log的第二種方法。

回到本文的初衷。讓我們回頭再看看除錯設定介面中的Debug JS Remotely選項，現在點選它。這時會彈出Chrome的一個標籤（當然，本地需要預先安裝有Chrome）。

圖11. 開啟Remote JS Debugging後彈出的瀏覽器標籤

注意這裡的Status：Debugger session #0 active就表示程式與該頁面成功建立連線了。

這個時候在瀏覽器開發者工具的除錯視窗，也能看到打出的log。而且它還可以更進一步地進行斷點除錯。

為更好地嘗試除錯功能，我們修改一下程式碼，新增一個sayHello方法輸出log。

圖12. 重新繫結onPress事件

儲存，和預想的一樣，頁面重新整理了，因為Live Reload。

如同除錯Web前端程式碼一樣，我們開啟瀏覽器的開發者工具，找到程式碼檔案，並在sayHello函式裡打一個斷點。這個時候，按下手機上的Test按鈕，可以看到程式執行到斷點停下了，這與除錯網頁程式碼是多麼相似：

圖13. 瀏覽器上的斷點除錯

不過，與除錯純網頁程式碼有兩點不同。

第一，瀏覽器的頁面上看不到應用介面，只能在手機上看到介面。

第二，手機上的介面在程式被斷住的情況下，仍然可以接收事件。舉個例子，就在此時，手機上該應用的介面表面上沒什麼反應，但是，如果你再多次按下Test按鈕，事件都會被記住，到時候會挨個響應。只是現在程式斷在了第一次按下按鈕的時候。

我們讓程式繼續（如果在斷點期間多次按下按鈕，會有多次被斷住）。

圖14. 瀏覽器控制檯輸出

我們按下了6次，除錯工具下也顯示出6次輸出。這是與除錯網頁時的不同：當除錯網頁時，一旦執行到斷點，瀏覽器的頁面其實就不可點選了。

到這一步，是不是覺得使用RN開發也沒有那麼難呢？

至於Toggle Inspector, Show Perf Monitor, Start/Stop Sampling Profiler和Dev Settings，我們暫時可以不用管它們。

目前已經知道了除錯設定中Remote JS Debugging, Live Reload和 Hot Reloading。相信我們已經可以比較從容地Debug簡單的 RN應用了。這裡以Windows下的Android為例，其實在Mac下開發iOS也是相似的。

希望本文的分享對嘗試RN的新手朋友有所幫助。如果大家對下篇想講的內容有自己的想法，請留言告訴我，我們一定會認真考慮。

移動端應用開發利器：

擴充套件閱讀：