Debug 方法論（二）：前端 Debug 工具箱——Chrome DevTools 不只是 console.log

前端 Debug 工具箱——Chrome DevTools 不只是 console.log

一句話總結：Chrome DevTools 是前端工程師的瑞士刀。你不需要精通每個 panel，但你需要知道什麼時候該用哪一個。

結論先講：Elements 看樣式、Console 不只是 log（console.table、console.trace、console.time 都很實用）、Network 看前後端之間發生了什麼、Performance 找 render bottleneck、Application 看儲存和快取。

Elements Panel：DOM 即時修改

什麼時候用：畫面樣式跑掉、排版不對、某個元素消失了。

右鍵 → Inspect 直接看到對應 DOM 節點。即時修改 CSS 不用改程式碼就能測試。看 Computed 分頁了解最終生效的樣式。看 Box Model 確認 margin / padding / border。

這是最基本的，但很多人只用它來看「某個元素在不在」。它的真正價值是讓你不用改程式碼就能快速測試各種樣式方案。改了十次 CSS 之後找到正確的，再回去改程式碼——比每次改 code → 存檔 → 等 hot reload 快多了。

Console Panel：你不知道的進階用法

// console.table — 陣列/物件用表格顯示
console.table(users);
// 比 console.log 一坨 JSON 好看一百倍
 
// console.trace — 印出呼叫堆疊
console.trace('誰呼叫了這個函式？');
// 不確定函式從哪裡被呼叫的時候超有用
 
// console.group — 把相關 log 分組
console.group('API 回應處理');
console.log('原始資料:', rawData);
console.log('轉換後:', transformedData);
console.groupEnd();
 
// console.time — 測量執行時間
console.time('render');
renderComponent();
console.timeEnd('render');  // render: 234.56ms
 
// console.assert — 條件不成立時才印
console.assert(user.age > 0, '年齡不該是負數', user);
 
// $0 — Elements panel 選取的元素
// $_ — 上一個表達式的結果
// copy() — 複製到剪貼簿
copy(JSON.stringify(data, null, 2));

光這些進階用法就能讓你的 debug 效率翻倍。console.table 看複雜物件、console.trace 追呼叫來源、console.time 量效能。

Network Panel：前後端之間的真相

什麼時候用：API 行為不如預期、回應太慢、CORS 問題、cookie 沒帶上。

重點觀察：

Status Code：200/400/401/403/404/500 各代表什麼
Request Headers：Authorization 有沒有帶？Content-Type 對不對？
Response Body：JSON 結構是不是你預期的？
Timing：DNS / Connect / TTFB / Content Download 各花多久？
Waterfall：哪些 request 同時發出？哪些依序？

兩個一定要開的選項：Preserve log（頁面跳轉後保留 log）和 Disable cache（確保每次拿最新資源）。

我見過一個 bug，開發者花了兩小時 debug，結果只是 CDN 快取了舊版的 JS 檔案。開 Disable cache 就重現了。

Performance Panel：render bottleneck

什麼時候用：頁面卡頓、滾動不順、動畫掉幀。

按 Record，操作你覺得卡的功能
停止 Record，看 flame chart
找出佔最多時間的函式
看 FPS 曲線——掉到 60fps 以下就有問題
看 Layout Shift——元素是不是一直在重排

Performance panel 看起來很嚇人，但你只需要關注兩件事：哪個函式佔最多時間和 FPS 有沒有掉。

Application Panel：儲存與快取

什麼時候用：登入狀態消失、資料沒更新、Service Worker 快取舊版本。

LocalStorage / SessionStorage：儲存的資料對不對
Cookies：Token 設定正確嗎？HttpOnly? Secure? SameSite?
Service Workers：有沒有舊 SW 快取舊版 JS？
Cache Storage：清掉看問題會不會消失

Service Worker 的快取問題特別陰險。你明明部署了新版本，但使用者看到的還是舊的——因為 SW 快取了舊的 bundle。這種問題在 Network panel 看不出來，要在 Application panel 才看得到。

React DevTools / Vue DevTools

什麼時候用：元件的 state 或 props 不對，想看 Component Tree 和資料流。

React DevTools：

Components tab：看每個元件的 props 和 state
Profiler tab：錄製 render，找出不必要的 re-render
Highlight updates：開啟後每次 re-render 閃綠框

Vue DevTools：

Components：看 data、computed、props
Vuex / Pinia：看 store 的 state 和 mutation 歷史
Timeline：事件、mutation、route 變化的時間軸

Lighthouse

什麼時候用：整體效能評估、SEO 檢查、無障礙性評估。搭配 CI 使用時，可以設效能預算——分數低於標準就阻擋部署。

這篇的重點回顧

Chrome DevTools 每個 panel 有各自的使用時機。Elements 看樣式、Console 不只是 log、Network 看前後端通訊、Performance 找效能瓶頸、Application 看儲存和快取。React/Vue DevTools 看元件狀態。Lighthouse 做整體評估。

系列文章：

「Chrome DevTools 就像健身房的器材——大部分人只用跑步機，但旁邊那些看起來嚇人的器材才是真正讓你進步的。」

Terry Yao's Blog

分類

目錄