相信 Debug 是開發者每天必經的過程，能否順利 Debug 決定了開發者一整天的心情，即使如此卻較少看到開發者著墨在 Debug 技巧上。我將會介紹各種前端 Debug 技巧，還有我常用的小撇步，解救那些時常陷於 Debug 之苦卻難以脫身的網頁開發者們。
緣起
一切的開始，就在第一次面試實習機會時，主考官問我：「你都怎麼 Debug？」我一時竟然只能想出一個答案：「開 DevTools 看 console.log。」那時候我的 Debug 原則就是「如果一個 console.log 找不出問題，就放入更多的 console.log！」雖然有時候會覺得自己很傻，不過大多時候還是能找出問題，便持續使用這個套路一路向前。
被問倒之後我開始反省自己的 Debug 方式，明明每天都在使用 DevTools，卻總是只用到 console.log，趕緊上網搜尋別人都是怎麼解決問題的，看過一篇又一篇的文章後，驚覺自己對 DevTools 的理解只是冰山一角，有太多好用的功能我竟然渾然不知，從此開啟了我對 DevTools 的摸索之路。
系列內容
這系列文章的內容主要圍繞在前端相關的 Debug 技巧，只要你有網頁開發經驗，尤其：
- 每天都會開啟瀏覽器的 Devtools
- 常常需要刻 UI 以及撰寫許多 HTML、CSS
- 以 JavaScript 維生
- 需要進行前端效能、SEO 優化
都非常推薦閱讀，這三十天的內容將會以 Chrome DevTools 為主，包含各個功能面板以及實用技巧及帶入實際的 Debug 情境協助理解，大部分的情境都是來自於筆者自己在開發過程中遇到的問題，或是曾經看過覺得十分有趣的例子，建議讀者可在閱讀文章時候搭配 Demo 實際操作，幫助記憶及理解。
此外本系列大部分的章節是獨立的，閱讀順序並不會造成太大的影響，除了 Chrome DevTools 之外，還會提到關於 Web Vitals、SEO 等網頁指標的 Debug 工具、與其他瀏覽器 DevTools 的比較以及效能優化的議題，盡可能的涵蓋各種前端 Debug 情境。
以上為 Core Web Vitals，是 Google 在 2020 年提出的核心網頁體驗指標
講講 DevTools 之外的 Debug 方式
Debug 時除了使用 DevTools 之外，還有許多解決問題的方式，以下列出筆者自身的一些經驗。
上網搜尋
許多問題可以靠 Google 快速找到答案，當然也會有碰壁的時候，筆者剛在程式之路起步時，常常無法解決問題，然而經過一段時間後明顯發覺 Google 的能力提升了，能從更多的面向、資源去尋找答案，例如比起從 Stack Overflow、部落格文章找到直接的答案，主動閱讀 MDN 文件、官方說明的 FAQ 和 Caveats、GitHub Issues 甚至是規範等時常會包含許多有用的資訊。
詢問周遭
向有經驗的人、社群提問也是非常有效的方式，但前提是已經做過功課、走過研究的步驟，千萬不要卻步於提問，只要做好充足的準備，大部分的人都很樂於協助解決問題。另外提出明確的問題和足夠的資訊才能讓大家對症下藥，例如碰到難解的 Bug 時，若其他人能夠重現相同的錯誤，幾乎 100% 能夠解決問題。
不要鑽牛角尖
若發現無論怎麼搜尋都難以找到解法，甚至都只有無關的資訊，非常有可能是搜尋方向錯了，例如實際出錯的部分不是正在搜尋的套件，可能只是單純程式碼拼錯、手誤，才會出現特別的錯誤訊息。筆者就曾經因為不小心按到 Tab，讓編輯器自動加入一些語法，程式開始奇怪的錯誤，找了一整天才發現問題所在。
放鬆身心
此外筆者認為放鬆也是 Debug 重要的一環，當已經卡在某個 Bug 幾個小時，試試放鬆一下心情，離開鍵盤散步、買杯飲料，筆者就有不少次在洗澡的時候突然想到問題的解法呢！
從了解 Chrome DevTools 開始
身為一個網頁開發者，肯定對 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 技巧」。
Element
Console
Source
- Sources – Source Map & File Editing
- Sources – Workspace
- Sources – Breakpoints
- Sources – Step-by-Step Execution
- Sources – JavaScript Debugging
Network
Performance
- Performance – Overview
- Performance – Web Vitals
- Performance – Critical Rendering Path
- Performance – How Rendering Works
- Performance – Rendering Optimization
- Performance – Analyze Paint & Layers
- Performance – Analyze Memory
- Performance – Analyze Runtime Activities
- Cookies – SameSite Attribute
- Cross-Origin Resource Sharing (CORS)
- Device Simulation & Remote Debugging
- Optimize Images
- Tips for Lazy Loading Images
(本文作者是ALPHA Camp的助教 shizuku，本文轉載自他的「你所不知道的各種前端 Debug 技巧 」系列文 )
