1. 程式人生 > >React Native開發者選單&Chrome除錯

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
圖6


同時,Chrome瀏覽器會開啟除錯介面
圖7
在Chrome除錯介面下,使用 快捷鍵【 Ctrl + Shift + j(Window的F12)】開啟開發者模式,如下圖所示:
圖8
接下來就可以開啟React Native除錯之旅了

  • 附2:Chrome除錯面板介紹

這篇文章就可以了,講的挺詳細。