《React Native》之程式除錯篇
程式碼除錯，在程式開發的過程中尤為重要，能協助開發者快速定位問題。
此文重點介紹React Native開發的程式除錯工具及過程。
撥出Developer Menu對話方塊，如下圖所示：
Android物理裝置或者IOS物理裝置 ： 搖晃手機撥出。
Android模擬器：
Command⌘ + M IOS模擬器：
Command⌘ + D
開發者選單在release（生成環境）不會被撥出。
程式除錯我們分成三類：
- 內容預覽，除錯效果
- Bug查詢，斷點除錯
- 效能分析
內容預覽，除錯效果
當開發者對JS程式碼進行改變之後，需要預覽程式改變之後的效果。
在開發者選單中有Reload
Enable Live Reload、 Enable Hot Reloading 能幫助我們對效果進行預覽，那麼他們的區別是什麼吶？
Reload
手動更新改變，每次改變之後，點選Reload，不需要重新編譯程式，實時載入應用的JS程式碼，但需要確保React Packager處於執行狀態。
Enable Live Reload
動態載入更新，不需要手動觸發，但是會重新開啟啟動頁，開發者需要重新找到你要除錯的頁面。
Enable Hot Reloading
熱載入，相對於Enable Live Reload更省時省力，當開發者修改程式碼後點擊儲存，會自己將增量更新到程式中，搜尋操作在當前除錯頁面進行。
Bug查詢，斷點除錯
首先，瞭解ReactNative的Errors和Warning。
Errors
這是一種自定義的Error，通過
console.error("我是一個異常，你信不信","異常提示");這句程式碼實現。使用例如我們使用Promise進行非同步回撥，到執行到Promise的onRejected時，如果不知道是什麼原因導致的，可以通過如下程式碼進行錯誤輸出。xxx.then((result) => {
...
},(error) => {
console.error(error, error.message && error.message)
}
); 如此，在執行到這部分程式碼時，如果發生異常，就是顯示如上的紅色Errors頁面。另外Error標題下面會帶有呼叫棧 可以幫助定位問題。
Warnings
同上，Warnings也可以通過console.warn()自定義。
通過console.ignoredYellowBox = ['Warning: ...']可以忽略每個提示的展示。
Debug JS Remotely
在Developer Menu對話方塊中選中Debug JS Remotely，即可通過Chrome Developer Tools工具除錯程式。選中後將開啟網址為http://localhost:8081/debugger-ui的網頁。
如果使用mac電腦，快捷鍵⌘⌥J開啟Google除錯工具。
或者
點選Google Chrome -- 更多工具 -- 開發者工具 能夠開啟如下圖所示的介面。
下面分三個部分進行解釋。
第一部分
1)、專案原始碼，所有的JS檔案都在這裡展示；
2)、JS程式入口；
3)、Bundle檔案地址；
4)、除錯使用的JS程式；
6)、bundle所在伺服器，localhost本地服務，例子中的專案沒有遠端服務（no domain）。
第二部分：主面板
Elements：用來檢視當前頁面的HTML結構和CSS樣式
Console：控制檯輸出
Sources：原始碼展示
NetWork：網路請求的標頭檔案資訊，請求引數，返回值等資訊
Timeline： 時間花費統計command + E生成新的時間線。需要先錄製，然後進行分析，得出GPU的渲染時間，總共指令碼的執行時間，各項任務的時間佔比。
Profiles：檢視CPU執行時間、記憶體佔用等。
Application： 應用資訊，包括基本資訊、本地儲存、Session儲存、
Cookie、資料庫等資訊。
Security：安全性資訊
Audits： 優化頁面，提升載入速度時用來資料量化。
通過上面的介紹，如果對於斷點除錯Console和Sources是主要面板；在除錯的過程中如果有網路請求，可以通過NetWork進行分析；如果對專案進行優化，可通過Timeline、Profiles、Audits進行優化點查詢和優化前後對比，從而優化結論；AppLication面板展示應用儲存相關的資料，方面檢視。
第三部分 斷點除錯區
使用起來與`Android Studio`的除錯非常的接近，用起來也很親切。
1）、 加斷點，直接點選行號即可，當程式執行到這段程式碼時，暫停，等待開發者操作。
2）、 從左到右依次為恢復指令碼執行、調到下一個函式呼叫的地方、單步執行、跳出當前函式。
3）、 呼叫棧，方便斷點分析。
注： 在2中有
Pause on Exceptions，意思是當程式出現異常時，暫停執行，自動定位到出問題行，這對我們除錯程式非常有幫助，建議開啟。
效能分析
在Google Chrome 除錯工具的介紹中提到的Timeline和Profiles，可以協同做效能分析，如Timeline提供的資訊如下：
檢視指定時間段內的應用執行花費的總時間，以及哪部分佔用的時間最多，從而重點優化。
在Developer Menu開發者選單中有Show Perf Monitor選項，開啟後在程式的又上角會展示當前頁面執行幀率，在可滾動頁面可以評測滾動的流暢性問題。
好的，關於React Native除錯相關的內容，就寫到這裡，如果發現好的內容，會繼續進行完善，睡覺去了，晚安。