DevTools 是什麼，為什麼值得認真對待#

身為網頁開發者，每天都會用到 Chrome DevTools，但如果讓自己打分數「我對 DevTools 的了解有幾分？」，多數人大概會給自己 30 分以下。原因是大部分情境下我們只反覆使用同樣幾個功能，例如打開 Elements 看 DOM 結構、看 console.log，其餘 panel 幾乎沒碰。

這篇先建立 DevTools 的整體地圖，後面章節會逐一展開。

主要 Panel 與 Drawer#

Chrome DevTools 主要由幾個 panel 組成，最常用的包括：

• Elements panel：檢視與修改 Document Object Model (DOM)、CSS
• Console panel：印 log、執行 JavaScript、觀察錯誤
• Sources panel：檢視原始碼、設定斷點（Breakpoint）、Step-by-step 追蹤
• Network panel：觀察網路請求
• Performance panel：量測渲染、執行緒活動

除了這些 panel 之外，DevTools 開啟時按下 Esc 可以呼叫 drawer，drawer 裡面也藏了不少實用工具。最常見的用法是：在 Network 或 Sources panel 工作的時候，同時用 drawer 內的 Console 輸入 JavaScript 來觀察、修改變數，而不需要切換 panel。

常用快捷鍵#

熟記幾個快捷鍵可以節省非常多時間：

• 在元素上按右鍵 ➡️ Inspect，或快捷鍵 Cmd+Opt+C（Mac）：直接選取元素並開啟 DevTools
• Cmd+Opt+J（Mac）：直接打開 Console panel

Console panel 同時也是一個非常實用的 JavaScript REPL，可以在裡面快速試各種 JavaScript 行為，不需要另外建檔案測試。

Panel Layout 設定#

DevTools 的 Settings 裡有一個 Panel layout 選項，預設值是 Auto，多數情境表現都還可以。但在使用長型螢幕（垂直擺放）的時候，建議手動切換到 horizontal，否則 Elements panel 會被擠成左右兩欄，CSS 區塊變得很窄，難以閱讀。

不同螢幕配置適合不同 layout，這個設定值得花一分鐘調整。

只會 Chrome DevTools 夠不夠#

原作者的答案是：夠。Chrome DevTools 真的非常強大，許多人習慣在「Chrome ↔️ 編輯器 ↔️ 瀏覽器重新整理」之間來回切換 try-error，其實這個流程多半可以直接在 DevTools 裡完成。當程式碼很多、又用了 Webpack 等打包工具時，每次重新編譯都得乾等，累積起來省下的時間相當可觀。

當然，Debug 習慣是慢慢養成的。為了快速解決眼前的問題，大家往往會先用熟悉的方式（例如塞滿 console.log），直到那一招不管用了才會學新方法。從 console.log 大法切換到其他工具確實會經歷陣痛期，需要刻意練習，才能慢慢取代舊習慣。

文件與更新頻率#

Chrome DevTools 有官方文件，但 DevTools 的更新速度非常快，文件常常跟不上實際功能，有時候只附上「What’s New In DevTools」連結就草草帶過。

另外大部分新功能會先在 Chrome Canary 測試，官方雖然推薦使用，但 Canary 偶爾會有不穩定的狀況，不一定適合當主力瀏覽器。

原文撰寫時使用的 Chrome 版本為 85.0.4183.102，後續實際操作時 UI 可能與截圖略有差異，但核心功能變動不大。

後續章節安排#

DevTools 的功能 panel 與設定頁都非常豐富，花時間搞懂細節，對開發與 Debug 效率有顯著幫助。後續章節會依照這個順序展開：

• 從 Elements panel 開始（CSS、CSS 進階、DOM）
• 再進到 Console panel（messages、settings、Console API、Console Utilities API、執行 JavaScript）
• 接著走過 Sources、Network、Performance、Cookie/CORS、裝置模擬、圖片優化等主題

每一章都會盡量結合實際 Debug 情境，方便對照記憶。

原文出處#

• 原書/iThome：https://ithelp.ithome.com.tw/articles/10237339