iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
1
Software Development

前端工程師不能不知道的生產力工具系列 第 11

[Day11] 瀏覽器開發工具 - 擴充功能篇

雖然開發者工具中已經提供相當豐富的功能,也一直持續發展中。不過 Google 有開放提供可裝在開發者工具的擴充功能的 API,像是目前大多主流的前端框架的開發者,都有提供相關的擴充功能,方便使用框架開發應用的人可以進行除錯。

所以今天就來整理目前前端三巨頭 - React、Vue 跟 Angular 可以使用的擴充功能吧!

React Developer Tools

  • 最近更新:2020/7/18
  • 官方提供:是
  • 支援版本
    • react-dom:15.x 大部分支援 / 16.x 支援
    • react-native:0.62 後支援
  • 商店連結
  • source code

由官方 Facebook 提供給 React 開發者的除錯工具。因為 React 是以 vDOM 加上狀態管理觸發渲染的機制,所以在元素面版呈現的已經是更新過後的 DOM,並無法對元件的階層關係或狀態資料進行檢測或除錯。

為了方便開發者在瀏覽器中也能進行偵錯,官方的擴充功能主要有提供兩種功能

  • Components:呈現元件的階層結構,查看 state、props 等資訊。
    img
  • Profiler:與 Performance 面版相似。可錄製渲染過程,產生所有 call stack 的記錄圖表。在 React 官方文件中有詳細的教學說明
    gif

Redux DevTools

img

如果有導入 redux 進行應用的狀態管理,那這個擴充功能算是必備工具啦。

只要有打開工具,從載入到使用者的每個動作所發送的 ActionState 都會清楚的紀錄,並且我們最關心的狀態變化,也能透過 Diff 的功能觀察某個 action 後變動的值。

另外還有繪製 redux 的架構樹狀圖,方便開發者快速掌握了解應用的狀態管理,另外還有其他更深入的操作,可以參考官方提供的教學文件喔。

Vue.js devtools

跟 React 一樣,可以瀏覽元件的階層關係、狀態值,甚至還可以對狀態進行修改,查看頁面的變化。

im

Augury

跟以上提到的一樣的基本功能一樣,不過在圖表的呈現上還蠻完整的,像是 Injector Graph, Router Tree 等。

img
img

參考資源


上一篇
[Day10] 瀏覽器開發工具 - 資源篇
下一篇
[Day12] 瀏覽器開發工具 - 燈塔篇(Lighthouse)
系列文
前端工程師不能不知道的生產力工具30

尚未有邦友留言

立即登入留言