(3)-窺探開發者選項 · react-native試玩

> 參考文章:? > [debug](https://facebook.github.io/react-native/docs/debugging.html#content)? > [Memory leak in profile](https://github.com/facebook/react-native/issues/1452) ## react-native的開發者選項在模擬窗口上按`Ctrl+Command+z`或者`Command+d`會調出`react native`的開發者選項: ![](https://box.kancloud.cn/2016-01-07_568e13ed368cd.jpg) ## Reload 重新運行程序，類似于在Xcode中按`Command+R`. ## Debug in Chrome 在Chrome瀏覽器下調試，在chrome瀏覽器下輸入`http://localhost:8081/debugger-ui`,再按`Alt+Command+j`出現瀏覽器debug窗口如下： ![](https://box.kancloud.cn/2016-01-07_568e13ed5edc8.jpg) 這一部分的知識屬于chrome瀏覽器如何調試的知識，有興趣可以單獨學習。 ## Debug in Safari 在Safari瀏覽器下調試,safari還沒找到具體的事例。 ## Show FPS Monitor 打開FPS監控器，如下圖底部的狀態欄: ![](https://box.kancloud.cn/2016-01-07_568e13ed9c887.jpg) ## Inspect Element 可以用來查看頁面中元素的結構以及屬性，以及性能相關信息：? 點擊該選項后出現： ![](https://box.kancloud.cn/2016-01-07_568e13edb9879.jpg) 然后我們選擇一個控件：? ![](https://box.kancloud.cn/2016-01-07_568e13edd6c4b.jpg) 然后選擇`perf`一覽，可以查看腳本下載以及執行時間(還有一個TTI是什么鬼，以后再說)：? ![](https://box.kancloud.cn/2016-01-07_568e13ee060f1.jpg) ## Enable Live Reload 修改js文件后，app立即顯示修改后的效果。 ![](https://box.kancloud.cn/2016-01-07_568e13ee1c7d5.jpg) ## Start Profiling 進行性能分析，一段時間后點擊`Stop profiling`會提示如下信息： ![](https://box.kancloud.cn/2016-01-07_568e13ee4ff68.jpg) 說明我們的分析結果已經在服務器保存了，那至于這個到底分析的是什么呢？首先我們找到該文件，根據控制臺輸出信息：? ![](https://box.kancloud.cn/2016-01-07_568e13ee66632.jpg) 我們打開瀏覽器中輸入`file://tmp`可以看到如下界面: ![](https://box.kancloud.cn/2016-01-07_568e13ee8ca72.jpg) 點擊我們剛才保存的文件：? ![](https://box.kancloud.cn/2016-01-07_568e13eed508d.jpg)? google提供了工具[`trace-viewer`](https://github.com/google/trace-viewer)將這個json文件轉化為html文件，方便我們分析數據,轉化后的結果如圖： ![](https://box.kancloud.cn/2016-01-07_568e13ef31c77.jpg)