Chrome 除錯 JS 必備技能：F12 或 Ctrl+Shift+I 開啟開發者工具 → 建議彈出獨立視窗。Elements：即時檢視/編輯 HTML/CSS；Console：執行 JS、看錯誤日誌、輸出除錯訊息；Sources：斷點除錯、觀察變數、呼叫堆疊、黑箱腳本。

開啟方式與介面

1. 頁面右鍵 → 「檢查」或工具列 → 更多工具 → 開發者工具，或熱鍵 F12/Ctrl+Shift+I。



2. 建議點右上角選單 → 「Dock side」→ 選「Undock into separate window」獨立視窗。

Elements 標籤頁實戰

• 左側 DOM 樹：雙擊編輯屬性、右鍵 Edit as HTML、刪除節點，變更即時反映頁面。
• 右側 Styles 面板：增刪改 CSS 規則、勾選/取消勾選即時生效、計算樣式追蹤。

進階：Sources 斷點除錯、Console 即時執行片段、Network 監控請求、Performance 分析效能。

延伸閱讀： Chrome 隱身模式使用教學 | Chrome 隱身模式快捷鍵