按 F12 打開的 Chrome 開發者工具是前端工程師的核心生產力工具，遠不止「看元素」那麼簡單。
| 面板 | 核心用途 | 高頻操作 |
|---|---|---|
| Elements | DOM 結構與樣式調試 | 實時編輯 CSS、強制狀態（:hover）、斷點調試 DOM 變更 |
| Console | JS 執行環境與日誌 | 運行代碼片段、監聽事件、`$0` 獲取當前選中元素 |
| Sources | 斷點調試與文件系統 | 行斷點、條件斷點、XHR/Event Listener 斷點、Workspace 映射本地文件 |
| Network | 請求分析與性能優化 | 過濾類型、查看載荷/響應/Headers、弱網模擬、導出 HAR |
| Performance | 運行時性能剖析 | 錄製幀率、主線程火焰圖、內存堆快照 |
| Memory | 內存洩漏排查 | 堆快照對比、三次快照法定位脫離 DOM 的節點 |
| Application | 存儲與 PWA 調試 | 編輯 Cookie/LocalStorage、Service Worker 生命周期、Manifest 校驗 |
| Security | HTTPS 與證書檢查 | 混合內容檢測、證書透明度 |
掌握 DevTools 相當於擁有了「透視眼」與「時光機」，是前端從寫頁面到做工程的分水嶺。
