React Native移動開發實戰-2-如何調試React Native項目，-2-react

React Native移動開發實戰-2-如何調試React Native項目，-2-react

在實際開發中，還有一個影響開發效率的重要因素：調試。

在1.4.3節中已經介紹了Enable Live Debugger的使用。本節來介紹另一個非常重要的調試選項：Debug JSRemotely選項。

（1）晃動裝置或使用模擬器上的快速鍵（iOS模擬器快速鍵command + d，Android模擬器快速鍵command + m）開啟調試選項，效果2.15所示。

 

圖2.15  React Native調試選項

（2）單擊Debug JS Remotely選項。此時，React Native會自動開啟Chrome瀏覽器作為調試工具。

（3）按照2.16所示的順序操作，這樣就進入了React Native應用的調試狀態。

 

圖2.16  使用Chrome瀏覽器調試ReactNative應用

（4）在調試狀態下，單擊index.ios.js檔案第12行的行數來添加一個斷點，2.17所示。

【問題】軟體開發中的斷點是什嗎？

【回答】斷點（Breakpoint）是調試器的功能之一，調試時設定斷點可以讓程式執行到該行程式時停住，藉此觀察程式到斷點位置時，其變數、暫存器、I/O等相關的變數內容，有助於深入瞭解程式運作的機制，發現、排除程式錯誤的根源。

 

圖2.17  React Native調試時添加斷點

（5）最後，重新載入啟動並執行應用（iOS模擬器快速鍵command + r，Android模擬器快速鍵r + r）。此時，應用運行到剛才添加斷點的第12行時就停止了，2.18所示。

 

圖2.18  React Native調試時在斷點處暫停運行

此時，可以在右側的調試地區查看到這些資訊：當前應用執行的線程狀態（Threads）、變數值、調用棧（Call Stack）等資訊。而且，還可以使用調試地區上方的指令來實現逐步執行、跳過執行、繼續執行等調試操作，2.19所示。

 

圖2.19  React Native調試時的調試指令

調試技巧和經驗是需要開發過程中不斷積累的，讀者在掌握了這些基本用法之後，可以通過後面的例子不斷練習，積累開發經驗，提高自己的調試能力和開發效率。

 

和我一起學吧，《React Native移動開發實戰》