React Native開發者選單&Chrome除錯
React Native專案的開發者選單開啟如下:
- Reload
Reload即將專案中js程式碼部分重新生成bundle,然後傳輸給模擬器或手機;
Reload在只是修改了js程式碼的情況下,如果要預覽修改結果,你不需要重新編譯你的應用。在這種情況下,你只需要告訴React Native重新載入js即可。
注意:如果你修改了native 程式碼或修改了Images.xcassets、res/drawable中的檔案,重新載入js是不行的,這時需要重新編譯專案。
- Enable Live Reload
Enable Live Reload提供了React Native動態載入的功能。當你的js程式碼發生變化後,React Native會自動生成bundle然後傳輸到模擬器或手機上。
類似於Android Studio的實時預覽佈局效果
- Enable Hot Reloading
Hot Reloading熱載入,如果說Enable Live Reload解放了你的雙手的話,那麼Hot Reloading不但解放了你的雙手而且還解放了你的時間。 當你每次儲存程式碼時Hot Reloading功能便會生成此次修改程式碼的增量包,然後傳輸到手機或模擬器上以實現熱載入。相比 Enable Live Reload需要每次都返回到啟動頁面,Enable Live Reload則會在保持你的程式狀態的情況下,就可以將最新的程式碼部署到裝置上。
- Debug JS Remotely
開啟遠端除錯,可通過Chrome Developer Tools工具除錯程式。選中後將開啟網址為http://localhost:8081/debugger-ui的網頁。
我直接開啟進入Debug JS Remotely會報錯如下:
Unable to connect with remote debugger Connection reset
而且,手機搖一搖也不方便,因此,藉助WebStrom進入除錯,WebStrom環境搭建和執行可以看這篇文章
WebStrom除錯React Native專案詳見文末。
- Toggle Inspector
在模擬器中檢視元件樣式。不怎麼好用。
- Show Perf Monitor
啟用後會顯示一個監控視窗,顯示出實時的記憶體佔用、UI 和 JavaScript 的 FPS 等資訊,幫助我們除錯效能問題
- 附:WebStrom除錯React Native專案
專案編譯執行成功後,停止,按下除錯按鈕
手機端執行成功,進入開發者選單,Debug JS Remotely會變為Stop Remote JS Debugging
同時,Chrome瀏覽器會開啟除錯介面
在Chrome除錯介面下,使用 快捷鍵【 Ctrl + Shift + j(Window的F12)】開啟開發者模式,如下圖所示:
接下來就可以開啟React Native除錯之旅了
- 附2:Chrome除錯面板介紹
看這篇文章就可以了,講的挺詳細。