這是我在2023第十五屆 iThome 鐵人賽發表的系列文章。https://ithelp.ithome.com.tw/users/20136637/ironman/6408
常見的 DEBUG 方法/工具
- 內建的 Dev Menu，具備基本的 logs, network, inspect, JS debugger 功能。
- React Native Debugger: 獨立的 debug 工具，集成 React DevTools 和 Redux DevTools，有使用 Redux 的話這個工具會非常方便。目前開發者有較新的更新計畫，不過具體不知道什麼時候完成。
- Flipper: React DevTools 的 Pro MAX 版 XD 可以根據個人需求安裝更多插件。
- 斷點測試
- console 家族: 應該不需要解釋了XD
這篇文章會分享內建的 Dev Menu、Flipper 的基本使用，大家可以根據喜好和習慣自行決定要使用哪種工具/方式。
React Native Dev Menu
Dev Menu 開啟方式：
npm run start後按d- 模擬器：
- Android: Command + M
- iOS: Command + D
- 實機：
- Android: 搖晃手機
- iOS: 三指按壓屏幕
| iOS | Android |
|---|---|
 |  |
iOS 跟 Android 菜單有一些出入，比如：
- iOS 有 Open React DevTools 但 Android 沒有，安卓如果要使用 DevTools 需要另外安裝 react-devtools
- Android 有 Change Bundle Location，iOS 沒有，但如果使用的是 iOS 模擬器可以在 Features -> Location -> Custom Location 修改定位
- Android 還多了一個 Settings，可以設置 Dev mode, JS minify, 修改 debug server host & port…等
記得開啟 Fast Refresh 才能實時看到修改後的結果。
Debug
會自動打開瀏覽器並創建一個 Tab 頁 http://localhost:8081/debugger-ui/ ，你可以開啟開發人員工具進行 debug。
Inspector
Inspect: 查看佈局、樣式，用來調整樣式很方便
- 如果想檢查的地方被 inspector 蓋住，可以先隨便點一個地方按住不放慢慢往下滑，inspector 就會切到屏幕上方的位置。
Network: 可以查看網絡請求，包括 headers, request, response…
React DevTools
Components 可以查看組件結構、state、props
Profilier 可以檢測每個組件、操作的渲染時間，以及為它們排名
基本上比較常用的功能就這些了，如果沒有特別的需求的話內建的 Dev Menu 就已經能滿足需求
Flipper
Flipper 是由 Facebook 開發的調試工具，可以用於多種移動應用程序開發，包括 React Native。在 React Native 0.62 之後就內建了 Flipper，所以你安裝完 Flipper 軟體並且 npm run android 或 npm run ios 啟動應用後就能自動連上 Flipper 。
基本功能包括：
- Logs: 查看應用的所有 logs
- JS Debbuger
- Layout Inspector
- Network Inspector
- React DevTools: Android 也可以使用了，不需要再另外安裝
其實就是 Dev Menu 的功能全部集中在一起，並且可以按照個人需求安裝 plugin
Logs
監聽應用的 logs，可以篩選只看 error, warning 或者 info…等
Network
查看所有網絡請求，比起內建的一坨 JSON 在 Flipper 上看更舒適了
Layout
可以查看節點的樣式與無障礙相關的屬性
還可以直接在應用中選擇要查看的節點以及在 sidebar 顯示該節點的預覽
Hermes Debugger
