React-Native 調試

https://reactnative.cn/docs/d...

安卓環境

chrome調試

• 使用方式

  1. Android 模擬器開啓 ctrl + M

  2. 在菜單中選擇Debug JS Remotely

     • 會自動打開http://localhost:8081/debugger-ui
     • 若沒有自動開啓,需手動開啓
  3. Chrome 中並不能直接看到 App 的用戶界面，而只能提供 console 的輸出，以及在 sources 項中斷點調試 js 腳本。

• 注意

  1. React 的 Chrome 插件，這一插件目前並不支持 React Native
  2. 使用 Chrome 調試目前沒法觀測到 React Native 中的網絡請求

react-devtool

https://github.com/jhen0409/r...

• 安裝

  • 全局安裝

    • yarn global add react-devtools

    • npm install -g react-devtools

      • react-devtools 依賴於 electron，而 electron 須要到國外服務器下載二進制包，因此國內用戶這一步極可能會卡住。此時請在環境變量中添加 electron 專用的國內鏡像源：ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"，而後再嘗試安裝 react-devtools。

  • 項目內安裝

    1. 根據不一樣的RN版本，你可能須要不一樣版本的react-devtool,您能夠在本地項目中安裝不一樣的版本
    2. npm install --save-dev react-devtools
    3. 將"react-devtools": "react-devtools"添加到package.json中的script中
    4. 命令行執行npm run react-devtools

• 調試

  1. 啓動react-devtools

     • 全局安裝,則在命令行輸入:react-devtools
     • 項目內,則在對應項目根目錄啓動命令行輸入:npm run react-devtools

  2. 另開一個命令行啓動項目

     • 等待數秒後會自動連接到你的模擬器

     • 可能會出現鏈接不上

       1. 出現提示欄。按照提示繼續便可。
       2. 按下ctrl+M,在浮框中選擇reload,嘗試從新加載
  3. 選中模擬器,按下 ctrl+M

  4. 點擊 Toggle Inspector

     • 會喚起一個覆蓋在app上的浮層
     • 同時react-devtools窗體內,會展現對應DOM信息