React Native 除錯技巧

2021-08-22 04:50:45 字數 2023 閱讀 1080

一、開啟rn開發者選單

不管是真機還是模擬器,都需要首先輸入命令,開啟rn開發者選單,命令如下

adb shell input keyevent 82
真機左右搖晃手機幾下,也可以開啟開發者選單

選單如下圖

但是開發者選單只可在debug版本中調出,假如是apk的release版本則不可調出。

二、設定開發者選單

1.reload選項  

每次修改**,需要重新執行,只需調出開發者選單,選中reload即可.  

2.enable live reload選項

即reload自動執行的選項,

當你修改**後,只需按下crlt+s 這個儲存,便會自動執行live reload功能.  

3.enable hot reloading選項  

live reload的加強版.實時熱修復,直接達到當前所在的介面,保留當前的執行狀態.

類似android studio中的instant run,修改下介面後,直接顯示修改後的ui效果.  

注意: 這裡的reload,live reload,hot reload都指的是js**層面的除錯,如果是android中或者ios中加入了資源,或者native**有修改那就不行了,必須要重新編譯才能看到效果.

4.錯誤提示.  

rn**執行的錯誤提示分為紅屏和黃屏兩種,

紅屏代表錯誤,即你的**有顯著錯誤,需要修復,不然無法執行.

黃屏代表警告,不修復也是可以執行的.你可以手動禁止黃屏警告.只需加入一下**:

console.disableyellowbox = true;

console.warn('yellowbox is disabled.');

注意: 紅屏和黃屏也只是在debug版本中才會顯示,在release版本中是不會顯示的.

5.效能檢測

可以在開發者選單中選擇」show/hide pref monitor」選項以開啟乙個懸浮層,

它會顯示應用的當前幀數。

6.使用chrome開發者工具除錯.  

谷歌瀏覽器可以方便對rn的js**進行debug除錯()

具體操作步驟是:

開啟谷歌瀏覽器輸入:http://localhost:8081/debugger-ui ,這個頁面,你可以方便的進行除錯.

在cmd視窗輸入 adb shell input keyevent 82,開啟rn開發者選單選中debug js remotely選項.

在在chrome的選單中選擇tools → developer tools可以開啟開發者工具,

也可以通過鍵盤快捷鍵來開啟(mac上是command + option+ i,windows上是ctrl + shift + i或是f12)。

但只能提供console輸出,以及在sources項中斷點除錯js指令碼,並且瀏覽器中的react外掛程式也不可用,這個外掛程式是用來檢視react應用的介面結構的,但是rn中不支援.

另外,這裡指的是js**層面的打斷點除錯,假如是native**,還是需要到android中進行除錯的,和平常開發一樣.

開啟**http://localhost:8081/debugger-ui時,會顯示waiting的等待連線提示

(我的模擬器,一直連不上,但是可以檢視輸出日誌,真機可以連上)

連線成功後如下圖:

之後按f12,會出現控制台console,詳細解釋

除錯 React Native 應用

訪問應用程式內開發者選單 在 ios 中搖動裝置或在虛擬機器裡按組合鍵control z.在 android 中搖動裝置或按硬體選單按鈕 舊的裝置中以及大多數虛擬機器中都有效,例如,在 捕獲異常時暫停 以獲得更佳的除錯體驗。在實際裝置上進行除錯 在 ios 中,開啟檔案rctwebsocketexe...

react native 進行除錯

除錯react native專案 1.新建專案 2.啟動專案 3.連線真機或者模擬器 真機除錯 專案啟動完畢真機會顯示自己專案,此時搖一搖手機會出現彈窗 debug js remotely 進行js除錯 選擇 debug js remotely此時電腦瀏覽器會開啟localhost 8081 f12...

GDB除錯技巧,除錯命令

除錯時檢視依賴dsopidof tvm rpc server cat proc maps子程序除錯 1.vscode setupcommands output cpu simu dev bin ld library path ignorefailures false exec catch throw...