iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0
自我挑戰組

React Native 奇幻之旅系列 第 24

【DAY24】React Native Debugging 基本的調試工具和方法

  • 分享至 

  • xImage
  •  

常見的 DEBUG 方法/工具

  1. 內建的 Dev Menu,具備基本的 logs, network, inspect, JS debugger 功能。
  2. React Native Debugger: 獨立的 debug 工具,集成 React DevTools 和 Redux DevTools,有使用 Redux 的話這個工具會非常方便。目前開發者有較新的更新計畫,不過具體不知道什麼時候完成。
  3. Flipper: React DevTools 的 Pro MAX 版 XD 可以根據個人需求安裝更多插件。
  4. 斷點測試
  5. console 家族: 應該不需要解釋了XD

這篇文章會分享內建的 Dev Menu、Flipper 的基本使用,大家可以根據喜好和習慣自行決定要使用哪種工具/方式。

React Native Dev Menu

Dev Menu 開啟方式:

  1. npm run start 後按 d
  2. 模擬器:
    • Android: Command + M
    • iOS: Command + D
  3. 實機:
    • 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

https://fbflipper.com/

Flipper 是由 Facebook 開發的調試工具,可以用於多種移動應用程序開發,包括 React Native。在 React Native 0.62 之後就內建了 Flipper,所以你安裝完 Flipper 軟體並且 npm run androidnpm 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


上一篇
【DAY23】React Native 使用 Amplify 進行身份驗證(3) - 記住登入狀態、自動登入
下一篇
【DAY25】React Native 使用 Sentry 監控錯誤、異常和性能
系列文
React Native 奇幻之旅31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言