問題
使用者詢問 Chrome 瀏覽器中某個開發者工具面板的名稱（附圖）。
解答
圖中所示為 Chrome 瀏覽器內建的開發者工具。無需安裝額外外掛，直接按 F12 或 Ctrl+Shift+I（Windows/Linux） / Cmd+Option+I（Mac）即可開啟。
主要功能面板
- Elements：檢視與編輯 HTML DOM 結構、CSS 樣式。
- Console：JavaScript 控制台，輸出錯誤、日誌，可互動執行 JS 代碼。
- Sources：斷點除錯、檢視來源文件、Snippets 片段管理。
- Network：監控網路請求、回應標頭、載入時間、弱網模擬。
- Performance：效能分析，記錄運行時幀率、記憶體、CPU 使用情況。
- Application：儲存體檢視：LocalStorage、SessionStorage、IndexedDB、Cookies、Cache Storage、Service Workers。
- Security：憑證、連線安全性檢查。
- Lighthouse：自動化審計工具，評估效能、無障礙、SEO、PWA 等指標。
快速開啟技巧
- 右鍵頁面任意處 → 檢查（Inspect）直接定位到 Elements 面板對應節點。
- 按 Ctrl+Shift+P 開啟命令選單，輸入面板名稱快速切換。
- 開啟後可拖曳面板至獨立視窗，或停靠在左/右/下方。
總結
Chrome 開發者工具是前端開發、除錯、效能優化的核心利器，內建於瀏覽器，無需額外安裝。熟練掌握各面板功能能大幅提升開發效率。
