react-native試玩(3)-窺探開發人員選項

參考文章:
debug
Memory leak in profile react-native的開發人員選項

在類比視窗上按Ctrl+Command+z或者Command+d會調出react native的開發人員選項:

Reload

重新運行程式，類似於在Xcode中按Command+R. Debug in Chrome

在Chrome瀏覽器下調試，在chrome瀏覽器下輸入http://localhost:8081/debugger-ui,再按Alt+Command+j出現瀏覽器debug視窗如下：

這一部分的知識屬於chrome瀏覽器如何調試的知識，有興趣可以單獨學習。 Debug in Safari

在Safari瀏覽器下調試,safari還沒找到具體的案例。 Show FPS Monitor

開啟FPS監控器，如下圖底部的狀態列:

Inspect Element

可以用來查看頁面中元素的結構以及屬性，以及效能相關資訊：
點擊該選項後出現：

然後我們選擇一個控制項：

然後選擇perf一覽，可以查看指令碼下載以及執行時間(還有一個TTI是什麼鬼，以後再說)：
Enable Live Reload

修改js檔案後，app立即顯示修改後的效果。

Start Profiling

進行效能分析，一段時間後點擊Stop profiling會提示如下資訊：

說明我們的分析結果已經在伺服器儲存了，那至於這個到底分析的是什麼呢。首先我們找到該檔案，根據控制台輸出資訊：

我們開啟瀏覽器中輸入file://tmp可以看到如下介面:

點擊我們剛才儲存的檔案：

google提供了工具trace-viewer將這個json檔案轉化為html檔案，方便我們分析資料,轉化後的結果如圖：