《React Native》之程式調試篇

標籤：code   異常   war   ignore   網路請求   exception   選項   網路   開發   

??代碼調試，在程式開發的過程中尤為重要，能協助開發人員快速定位問題。
??此文重點介紹React Native開發的程式調試工具及過程。
??呼出Developer Menu對話方塊，如所示：

Android物理裝置或者IOS物理裝置 ： 搖晃手機呼出。
Android模擬器： Command? + M
IOS模擬器： Command? + D

開發人員菜單在release（產生環境）不會被呼出。

程式調試我們分成三類：

1. 內容預覽，調試效果
2. Bug尋找，斷點調試
3. 效能分析

內容預覽，調試效果

??當開發人員對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調試相關的內容，就寫到這裡，如果發現好的內容，會繼續進行完善，睡覺去了，晚安。

《React Native》之程式調試篇