Chrome 開發人員工具是直接內建在 Google Chrome 瀏覽器中的網頁開發人員工具。開發人員工具可讓您即時編輯網頁並快速診斷問題，更快打造出更優質的網站。
開始使用 版本資訊

運用 AI 偵錯

瞭解開發人員工具的 AI 創新功能如何協助您事半功倍。使用代理程式專用的開發人員工具，將開發人員工具的強大功能與您慣用的程式碼編寫代理程式連結。
讓 Gemini 協助您分析及改善網站的樣式、網路、來源和效能。在「控制台」和「來源」面板中，取得控制台錯誤的相關說明和程式碼建議。
探索 AI 創新功能
在 AI 工作流程中，為程式設計代理提供您用來檢查網路活動、記錄追蹤記錄及排解網頁應用程式問題的相同信任工具。

將 Chrome 開發人員工具 MCP (Model Context Protocol) 伺服器連結至您選擇的工具，例如 Antigravity、Claude Code、Cline、Copilot 等。

瞭解詳情
取得網頁成效的完整且可做為行動依據的檢視畫面。
瞭解如何檢查網頁載入的資源，並透過瀏覽器編輯這些資源。
即時分析及覆寫網路要求和回應。

開發人員工具提示

歡迎觀看每月推出的系列影片，以輕鬆有趣的方式瞭解開發人員工具的常見偵錯情境。
代理程式專用的 Chrome 開發人員工具可讓代理程式驗證回應式版面配置、測試位置感知 API，以及模擬各種 CPU 或網路速度。
代理專用 Chrome 開發人員工具中的 Lighthouse 可讓程式設計代理執行無障礙、SEO、最佳做法和代理瀏覽的即時健康檢查，評估網站品質。
透過導覽瞭解更新後的「效能」面板，看看如何評估網站使用體驗核心指標 (LCP、CLS、INP)，以及如何向 Gemini 取得量身打造的建議。
使用開發人員工具出航，成為偵錯海盜！瞭解如何模擬焦點樣式、測試自動填入表單，以及使用網路覆寫功能解決後端錯誤。

取得成效洞察資料

多種工具可協助您評估及改善各項執行階段效能：效能面板、Lighthouse 等。
瞭解「效能」面板中的所有功能，包括如何記錄效能追蹤記錄、如何查看及分析追蹤記錄等。
瞭解 DevTools 的新功能，例如 CPU 節流校正功能，協助您根據實際資料做出效能偵錯決策
瞭解開發人員工具「效能」面板中的全新效能深入分析資料，以及 Lighthouse 的強大功能。

最新消息與動態

檢查及編輯資源

瞭解「Sources」面板中的所有功能：如何查看及編輯檔案、偵錯 JavaScript 及設定工作區。
開始使用
Workspace 可讓您將在開發人員工具中所做的變更，儲存至儲存在電腦上的原始程式碼。瞭解如何在專案中設定工作區。
閱讀教學課程

分析網路活動

網路面板

瞭解「網路」面板中的所有功能：檢查回應和要求主體、覆寫標頭等。
開始使用
實作教學課程，引導您完成「Network」面板中的常見工作。
閱讀教學課程

更多工具

探索開發人員工具中的所有其他功能。
瞭解如何查看及變更頁面的 DOM。
瞭解如何查看及變更網頁的 CSS。
追蹤 HTML、CSS 和 JavaScript 的變更。
記錄訊息並執行 JavaScript。
評估網站成效。
找出影響網頁效能的記憶體問題，包括記憶體流失等。
檢查、修改及偵錯網頁應用程式、測試快取、查看儲存空間等等。
檢查及修改動畫。
記錄、重播、評估使用者流程，以及編輯步驟。
探索一系列會影響網路內容轉譯的選項。
檢查已儲存的地址並進行偵錯。
找出網站問題並加以修正。
確認網頁已完全受到 HTTPS 保護。
為每個瀏覽器分頁查看資訊和偵錯媒體播放器。
模擬裝置感應器。
模擬驗證器。