代理程式專用的 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
使用下列指令安裝 Gemini CLI 擴充功能，其中包含 MCP 套件和隨附技能：
# 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.
進階設定
以下是代理程式存取瀏覽器的其他方式。
設定無頭模式
如要在沒有瀏覽器視窗的情況下執行背景工作，可以無頭 (無 UI) 模式執行 Chrome。將 --headless 標記新增至伺服器引數：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
連線至現有的瀏覽器工作階段
根據預設，代理程式的開發人員工具會啟動新的 Chrome 執行個體。不過，您可以使用 --autoConnect 標記，將代理程式連線至現有的瀏覽器工作階段。如果問題需要登入或已啟動的工作階段才能調查，這項功能就特別實用。
連線至現有工作階段的方式有兩種：
使用自動連線功能 (Chrome 144 以上版本)
使用 --autoConnect 選項設定 Chrome 開發人員工具 MCP 伺服器時，MCP 伺服器會連線至有效的 Chrome 執行個體，並要求遠端偵錯工作階段。
- 在執行中的 Chrome 瀏覽器中，前往
chrome://inspect/#remote-debugging啟用遠端偵錯。 更新 MCP 設定，加入
--autoConnect旗標：{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }向代理程式發出提示。Chrome 會顯示對話方塊，要求使用者允許遠端偵錯工作階段。按一下「允許」。
使用遠端偵錯通訊埠手動連線
如果無法使用 --autoConnect (例如在沙箱環境中執行代理程式)，可以手動啟動 Chrome 並指定偵錯通訊埠。範例如下 (macOS)：
啟動 Chrome 瀏覽器，並啟用遠端偵錯連接埠。基於安全考量，您也必須指定自訂使用者資料目錄。
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable使用
--browser-url參數設定代理程式連線：{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }