🧱 Elements（元素）

用途：檢視與即時編輯網頁的 HTML 與 CSS 結構
功能重點：

顯示整個 DOM（文件物件模型）結構。

可以直接修改 HTML 或 CSS（例如更改文字、顏色、排版）。

可查看元素的「Computed styles」、「Box model（margin/padding/border）」。

常用於：

調整樣式（CSS debugging）。

檢查元素是否被隱藏、被覆蓋。

測試網頁在不同裝置大小下的顯示效果。

💬 Console（主控台）

用途：查看與輸出 JavaScript 訊息、執行指令
功能重點：

顯示程式的錯誤（Error）、警告（Warning）、訊息（Log）。

可以手動執行 JavaScript 程式碼（即時測試代碼片段）。

支援變數觀察、物件展開檢查。

常用於：

除錯（例如 console.log() 輸出）。

檢查變數或函式是否正確執行。

測試 API 回傳資料。

📂 Sources（來源）

用途：瀏覽、偵錯網站載入的 JavaScript、CSS、HTML 檔案
功能重點：

顯示網站實際載入的檔案（包含外部 JS、CSS）。

可設置中斷點（Breakpoints）進行逐步除錯。

可檢查原始碼對應（Source Maps）以追蹤壓縮後的程式。

常用於：

追蹤程式執行流程。

找出是哪個檔案或哪段程式造成錯誤。

單步執行（Step Into / Step Over）JavaScript。

🌐 Network（網路）

用途：監控網頁的所有網路請求與回應
功能重點：

顯示所有載入的資源（HTML、CSS、JS、圖片、XHR、API 等）。

可檢查每個請求的：

狀態碼（Status Code）

請求頭 / 回應頭（Request / Response Headers）

載入時間、大小。

常用於：

偵錯 API 請求是否正確（如 404、500 錯誤）。

分析網站載入速度（Performance）。

查看 API 的回傳資料（JSON 內容）。