身為一個網頁開發者，肯定對 Chrome DevTools 不陌生，雖然每天都會用到，可能都是不斷重複使用某些功能而已，如果現在讓讀者為自己打個「對 Chrome DevTools 的了解程度」，會給自己幾分呢？

Chrome DevTools 簡介

大家熟知的 Chrome DevTools 主要由幾個面板 (Panel) 組成，例如 Elements、Console、Sources 等等，另外在 DevTools 開啟時按下 ESC 可以打開 drawer，裡面也藏了不少好用的功能，最常用到的情境就是想在開啟 Network、Sources 面板的同時使用 Console 輸入一些 JavaScript 來觀察、修改變數。

如果想要查看 DOM 和 CSS 資訊，只要在該元素上按下右鍵點選 Inspect 或是使用快捷鍵 Command+Option+C 來選取元素，網頁右方就會跳出 DevTools。

查看 Log 只要按下 Command+Option+J 就會直接開啟 Console 面板，同時也是一個很好用的 JavaScript REPL 工具，筆者就常常在裡面試一些 JavaScript 的行為：

另外也可以透過調整 Settings 內的 Panel layout 來讓多個窗格（Pane）的面板更容易觀看，預設的 Auto 在大部分情況都沒問題，不過使用長型螢幕的時候就適合調整為 horizontal，避免 Element 面板被擠成左右兩邊。

看完這些小撇步之後，是不是也躍躍欲試了呢？

只會 Chrome DevTools 夠嗎？

筆者的答案是：夠！Chrome DevTools 真的非常強大，許多時常在 Chrome 和編輯器中來回切換 Try Error 的 Debug 過程，其實都可以直接在 Chrome DevTools 裡面快速完成，長期下來花費的時間是非常可觀的，尤其在程式碼非常多時，如果用到 Webpack 等打包工具可能又會增加許多乾等的時間。

而寫程式的 Debug 習慣也是累積而成的，為了想要快速解決問題，會不斷使用自己熟知的方式，直到哪天不管用了才會學習新招，筆者從 console.log 大法轉換至其他方式時也經歷了不小的陣痛，需要努力遏制想要輸入 console.log 的習慣。

Chrome DevTools 文件

若讀者已經看過 Chrome DevTools 文件，可能已經熟悉這系列文章中關於 Chrome DevTools 的講解，然而官方文件雖然不斷在更新，DevTools 的更新速度實在太快，某些功能和文件已有不少差異，有時甚至只附上 What's New In DevTools 的連結。

另外大部分的新功能都會在 Chrome Canary 先行測試，雖然官方大力推薦，但筆者之前嘗試使用時總會遇到一些怪怪的問題，不得不換回原本的 Chrome。

而本系列文章將以目前最新版本的 Chrome 為主題，除了講解各個功能的用法外，讀過文件的開發者們也能夠藉由本系列文章的內容來同步自己目前對 Chrome DevTools 的了解。

本文撰寫時使用的 Chrome 版本為 85.0.4183.102。

工欲善其事，必先利其器

Chrome DevTools 的功能面板有很多個，就連設定頁面也是玲瑯滿目，不過如果花時間去詳細了解各個細節，會發現在開發、Debug 的效率有顯著的提升，接下來的文章中筆者將會從 Elements 開始，帶大家走過各個面板、Drawer 以及 Settings，那些「你所不知道的前端 Debug 技巧」。