React-native 一款很不錯的除錯工具

這個除錯工具可以除錯 模擬器或者真機 和 web端上執行的專案,

在上面可以看到樹形元件結構,並且可以在上面修改樣式, 檢視結構, 檢視props 和 state, style等 使用很方便

安裝

1: 安裝依賴

npm install --save-dev react-devtools

**注意: **安裝時間較長, 請耐心等待, 如果執行到這裡時, 其實還沒有結束, 需要在等待個幾分鐘

2: 修改package.json, 新增devtools

  "scripts": {
    // ...
    "devtools": "react-devtools"
  }

3: 執行

npm run devtools

啟動App, app啟動後不用管它, 重新開啟一個cmd, 在模擬器或真機上執行自己的專案

4: 執行專案,

執行你的啟動專案的命令, 我這裡是在android上執行 所以: 

react-native run-android

專案啟動後, App自動載入元件樹形結構, 並在右側顯示 style, props, state等對應的資訊,

想了解web除錯可看官方教程