HTML 本質與調試誤區
HTML 是標記語言，非程式語言，無執行流程、變量、邏輯分支，因此不存在傳統「斷點調試」。所謂 HTML 調試實為：
- 語法/結構錯誤檢查（未閉合標籤、屬性錯誤、巢狀違規）。
- 渲染結果與預期不符（CSS 衝突、盒模型、佈局塌陷）。
- 動態 DOM 操作錯誤（JavaScript 操作 DOM 失敗）。
三大調試利器
1. 專業 IDE 靜態分析
WebStorm、VS Code（安裝 HTMLHint、W3C Validation 擴充）、IntelliJ IDEA 可即時標示：紅波浪線報錯、黃波浪線警告、代碼補全、Emmet 擴寫。適合編寫階段預防低級錯誤。
2. 瀏覽器開發者工具（核心）
按 F12 或右鍵「檢查」打開，核心面板：
- Elements：DOM 樹即時編輯、CSS 樣式追蹤、盒模型視覺化、事件監聽器檢查、強制狀態（:hover/:focus）。
- Console：查看 JS 錯誤、執行選取器測試
$$('div.error')、輸出調試訊息。
- Network：資源載入瀑布圖、狀態碼、回應內容、模擬離線/弱網。
- Performance / Lighthouse：渲染幀率、首屏時間、SEO/無障礙審計。
3. Firefox Firebug / 內建開發者工具
Firefox 早期 Firebug 奠基現代調試體驗，現內建工具已整合其精華，CSS Grid/Flex 視覺化編輯尤為強大。
實戰調試工作流
- 打開 Elements 面板，定位目標元素（Ctrl+Shift+C 點選頁面）。
- 檢查 Computed 樣式，找出被覆蓋的 CSS 規則（刪除線標示）。
- 勾選/取消勾選樣式屬性即時驗證修正效果。
- Console 執行
$0 獲取當前選中元素，進一步操作驗證。
- 修正確認後，同步更新源代碼（支援 Workspaces/本地映射直接保存）。
常見問題快速定位
| 現象 | 檢查點 |
|---|
| 佈局錯亂 | 盒模型、Float/Flex/Grid 容器屬性、margin 重疊 |
| 樣式不生效 | 選擇器優先級、CSS 載入順序、拼寫錯誤、瀏覽器前綴 |
| 圖片/資源 404 | Network 面板路徑、相對路徑基準、CORS 跨域 |
| JS 操作 DOM 失效 | 腳本執行時機（DOMContentLoaded）、選取器錯誤、元素未渲染 |
進階技巧
- DOM 斷點：Elements 面板右鍵元素 → Break on → Subtree modifications / Attribute modifications / Node removal，JS 修改 DOM 時自動暫停。
- 模擬行動裝置：Ctrl+Shift+M 切換裝置工具列，測試響應式斷點。
- 無障礙審計：Lighthouse 或 axe-core 擴充檢查 ARIA、語意化標籤。
熟練掌握瀏覽器開發者工具，HTML/CSS/JS 前端問題 90% 可在分鐘級定位解決。
