代理專用 Chrome 開發人員工具是一套工具，可將 Chrome 開發人員工具的強大功能帶入 AI 程式設計工作流程。安裝代理專用 Chrome 開發人員工具後，您就能存取：
- MCP 伺服器：使用開放原始碼 Model Context Protocol，將 AI 代理連線至即時瀏覽器執行個體。
- Chrome 開發人員工具 CLI：可直接從終端機與瀏覽器互動的介面。
- 代理技能：專家指令，可教導代理如何協調多項工具，處理無障礙或效能偵錯等複雜工作。
在網頁開發環境中，代理專用 Chrome 開發人員工具會將偵錯功能整合至 AI 代理程式。
舉例來說，代理程式可以使用工具記錄及評估效能追蹤記錄，藉此分析網站效能並找出可改善之處。除了網頁開發之外，代理程式專用的開發人員工具還可讓代理程式瀏覽即時網頁，而不只是擷取靜態 HTML。
設定
本指南說明如何設定代理專用 Chrome 開發人員工具，讓代理程式協助您的程式碼代理程式控制及檢查即時 Chrome 瀏覽器。
使用 chrome-devtools-mcp 套件，透過程式設計代理 (例如 Gemini、Claude、Cursor 或 Copilot) 控制及檢查即時 Chrome 瀏覽器。請注意，雖然代理程式的 Chrome 開發人員工具提供全套工具，但 CLI 僅支援以 Shell 為基礎的自動化作業。
支援的 IDE 和模型
代理專用 Chrome 開發人員工具支援任何支援 MCP 通訊協定的工具或 IDE。包括 Antigravity、Gemini CLI、Claude Code、Cursor、Copilot 等。
安全性考量
由於服務專員可以查看及與存取的頁面互動，因此如果將服務專員連結至已通過驗證的有效工作階段，服務專員就能代表您採取行動。請勿分享不想讓服務專員知道的私密或個人資訊。
必要條件
安裝代理專用 Chrome 開發人員工具前，請確認您的環境符合下列需求：
如要設定代理專用 Chrome 開發人員工具，請選擇符合您偏好程式設計環境的方法。部分代理程式需要手動安裝，其他代理程式則已預先整合至工具中。
Antigravity
代理專用 Chrome 開發人員工具已預先與 Antigravity 2.0 組合。您可以使用瀏覽器子代理程式立即開始使用。請嘗試使用斜線指令，例如：
/browser Navigate to the Google homepage
如要存取專業的代理程式技能，建議在初始設定的「使用 Google 建構」步驟中，或在應用程式設定中安裝開發人員工具外掛程式。詳情請參閱 Antigravity 瀏覽器子代理程式說明文件。
使用 CLI 安裝
如要為代理程式設定 Chrome 開發人員工具，可以使用 JSON 設定檔或 CLI 指令直接安裝伺服器 (如果代理程式支援)。部分代理程式也提供官方擴充功能或外掛程式，內含代理程式技能、專家指令，可協助代理程式使用開發人員工具功能。
如果這裡未列出您的代理程式，請前往 Chrome 開發人員工具的代理程式 GitHub 存放區，瞭解如何安裝。
如要將代理專用 Chrome 開發人員工具新增至指令列代理程式，請使用特定代理程式的內建 CLI 指令：
Gemini CLI
使用下列指令，安裝包含 MCP 套件和隨附技能的 Gemini CLI 擴充功能：
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
使用下列指令，只安裝 MCP 套件：
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
如要將代理專用 Chrome 開發人員工具安裝為 Claude 程式碼外掛程式，請在 Claude 程式碼中使用下列斜線指令。新增 Marketplace 登錄檔：
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
然後從 Marketplace 登錄檔安裝外掛程式：
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
詳情請參閱官方 Chrome 開發人員工具 Claude 外掛程式頁面。
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
使用 JSON 設定進行安裝
如為支援 mcpServers 設定鍵的其他代理程式，請手動新增這個項目，並確保透過 npm i
chrome-devtools-mcp 安裝代理程式的開發人員工具。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
在其他代理程式中安裝
如要設定未列出的代理程式，請參閱 Chrome 開發人員工具 MCP GitHub 存放區。
測試設定
在代理程式中輸入下列提示，確認一切運作正常：
Check the performance of https://developers.chrome.com
代理程式應會開啟瀏覽器視窗，並記錄效能追蹤記錄。
排解設定問題
如果代理程式無法執行工具，但具備 Chrome 開發人員工具技能，可能會嘗試自動修正問題。如果沒有，您可以明確提示代理程式：
Use the Chrome DevTools troubleshooting skill to fix my setup.
或者，你也可以更具體地說：
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
後續步驟
如要自訂設定，請參閱「設定」。