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

在實際開發中，還有一個影響開發效率的重要因素：調試。
在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移動開發實戰》