Chrome DevTools MCP

官方

用於從 Gemini、Claude、Cursor 和 Copilot 等程式碼代理控制與檢查即時 Chrome 瀏覽器的官方 Chrome DevTools MCP 伺服器。

你可以用 Chrome Dev Tools MCP 做什麼?

  • 記錄並分析效能追蹤 — 使用 performance_start_trace 開始追蹤,以 performance_stop_trace 停止,再透過 performance_analyze_insight 取得可操作的見解。
  • 檢查網路活動 — 使用 list_network_requests 列出所有請求,並以 get_network_request 擷取個別請求的詳細資訊。
  • 偵錯控制台錯誤與執行時期狀態 — 透過 list_console_messagesget_console_message 擷取控制台訊息,或使用 evaluate_script 執行任意 JavaScript。
  • 自動化瀏覽器互動 — 使用 navigate_pageclickfillpress_key 等工具進行導航、點擊、填寫表單及模擬輸入。
  • 擷取視覺狀態 — 使用 take_screenshot 擷取頁面截圖,或使用 take_snapshot 擷取無障礙快照。
  • 診斷記憶體問題 — 使用 take_heapsnapshot 擷取堆積快照,並檢查物件保留器、支配者或比較快照。

文件

適用於代理的 Chrome DevTools

npm chrome-devtools-mcp package

適用於代理的 Chrome DevTools (chrome-devtools-mcp) 可讓您的編碼代理(例如 Antigravity、Claude、Cursor 或 Copilot) 控制並檢查即時的 Chrome 瀏覽器。它作為模型上下文協定 (MCP) 伺服器運作,讓您的 AI 編碼助手能夠存取 Chrome DevTools 的完整功能, 以進行可靠的自動化、深入除錯和效能分析。 也提供了一個 CLI,可在沒有 MCP 的情況下使用。

工具參考 | 更新日誌 | 貢獻 | 疑難排解 | 設計原則

主要功能

  • 取得效能洞察:使用 Chrome DevTools 記錄 追蹤並提取可操作的效能洞察。
  • 進階瀏覽器除錯:分析網路請求、擷取螢幕截圖並 檢查瀏覽器主控台訊息(包含原始碼對應的堆疊追蹤)。
  • 可靠的自動化。使用 puppeteer 自動化 Chrome 中的操作, 並自動等待操作結果。

免責聲明

chrome-devtools-mcp 會將瀏覽器執行個體的內容公開給 MCP 用戶端, 允許它們檢查、除錯及修改瀏覽器或 DevTools 中的任何資料。 請避免分享您不希望與 MCP 用戶端分享的敏感或個人資訊。

chrome-devtools-mcp 僅正式支援 Google Chrome 和 Chrome for Testing。 其他基於 Chromium 的瀏覽器可能也能運作,但這不保證,且您可能會遇到非預期的行為。請自行斟酌使用。 我們致力於為最新版本的 Extended Stable Chrome 提供修正和支援。

效能工具可能會將追蹤網址傳送到 Google CrUX API,以擷取真實使用者 體驗資料。這有助於透過呈現現場資料和實驗室資料,提供全面的效能圖像。 此資料由 https://developer.chrome.com/docs/crux 收集。若要停用 此功能,請使用 --no-performance-crux 旗標執行。

使用統計資料

Google 會收集使用統計資料(例如工具叫用成功率、延遲和環境資訊),以改善 Chrome DevTools MCP 的可靠性和效能。

資料收集預設為啟用。您可以在啟動伺服器時傳遞 --no-usage-statistics 旗標來選擇退出:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google 會根據 Google 隱私權政策 處理此資料。

Google 對 Chrome DevTools MCP 使用統計資料的收集,獨立於 Chrome 瀏覽器的使用統計資料。選擇退出 Chrome 指標並不會自動讓您退出此工具,反之亦然。

如果設定了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICSCI 環境變數,則會停用收集。

更新檢查

預設情況下,伺服器會定期檢查 npm 登錄檔是否有更新,並在有較新版本可用時記錄通知。 您可以透過設定 CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 環境變數來停用這些更新檢查。

需求

入門指南

將以下設定新增到您的 MCP 用戶端:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

[!NOTE] 使用 chrome-devtools-mcp@latest 可確保您的 MCP 用戶端將始終使用最新版本的 Chrome DevTools MCP 伺服器。

如果您只想執行基本的瀏覽器任務,請使用 --slim 模式:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

請參閱 Slim 工具參考

MCP 用戶端設定

Amp 請遵循 https://ampcode.com/manual#mcp 並使用上面提供的設定。您也可以使用 CLI 安裝 Chrome DevTools MCP 伺服器:
amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Antigravity

若要使用 Chrome DevTools MCP 伺服器,請遵循 Antigravity 的文件 中的指示來安裝自訂 MCP 伺服器。將以下設定新增到 MCP 伺服器設定中:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

這將使 Chrome DevTools MCP 伺服器自動連接到 Antigravity 正在使用的瀏覽器。如果您不是使用連接埠 9222,請務必相應調整。

使用此方法時,Chrome DevTools MCP 將不會自動啟動瀏覽器執行個體,因為 Chrome DevTools MCP 伺服器會連接到 Antigravity 的內建瀏覽器。如果瀏覽器尚未執行,您必須先按一下右上角的 Chrome 圖示來啟動它。

Claude Code

透過 CLI 安裝(僅限 MCP)

使用 Claude Code CLI 新增 Chrome DevTools MCP 伺服器(指南):

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

作為外掛程式安裝(MCP + 技能)

[!NOTE] 如果您先前已為 Claude Code 安裝過 Chrome DevTools MCP,請務必先從您的安裝和設定檔中將其移除。

若要安裝包含技能的 Chrome DevTools MCP,請在 Claude Code 中新增市集登錄檔:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

然後,安裝外掛程式:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

重新啟動 Claude Code 以載入 MCP 伺服器和技能(使用 /skills 檢查)。

[!TIP] 如果外掛程式安裝失敗並出現 Failed to clone repository 錯誤(例如,公司防火牆後面的 HTTPS 連線問題),請參閱疑難排解指南以取得解決方法,或改用上面的 CLI 安裝方法。

Cline 請遵循 https://docs.cline.bot/mcp/configuring-mcp-servers 並使用上面提供的設定。
Codex 請遵循 設定 MCP 指南, 使用上面的標準設定。您也可以使用 Codex CLI 安裝 Chrome DevTools MCP 伺服器:
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

在 Windows 11 上

透過更新 .codex/config.toml 並新增以下 envstartup_timeout_ms 參數,來設定 Chrome 安裝位置並增加啟動逾時時間:

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000
Command Code

使用 Command Code CLI 新增 Chrome DevTools MCP 伺服器(MCP 指南):

cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
Copilot CLI

啟動 Copilot CLI:

copilot

透過執行以下命令來啟動新增 MCP 伺服器的對話:

/mcp add

設定以下欄位並按下 CTRL+S 以儲存設定:

  • 伺服器名稱: chrome-devtools
  • 伺服器類型: [1] Local
  • 命令: npx -y chrome-devtools-mcp@latest
Copilot / VS Code

作為外掛程式安裝(建議)

最簡單的啟動和執行方式是將 chrome-devtools-mcp 安裝為代理外掛程式。 這會將 MCP 伺服器和所有技能捆綁在一起,因此您的代理可以同時獲得有效使用它們所需的工具和專家指導。

  1. 開啟命令選擇區(macOS 上為 Cmd+Shift+P,Windows/Linux 上為 Ctrl+Shift+P)。
  2. 搜尋並執行 Chat: Install Plugin From Source 命令。
  3. 貼上我們的儲存庫名稱:ChromeDevTools/chrome-devtools-mcp

就是這樣!您的代理現在已具備 Chrome DevTools 的超強功能。


作為 MCP 伺服器安裝(僅限 MCP)

按一下按鈕以安裝:

Install in VS Code

Install in VS Code Insiders

或手動安裝:

遵循 VS Code 的 MCP 設定指南,使用上面的標準設定,或使用 CLI:

適用於 macOS 和 Linux:

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

適用於 Windows (PowerShell):

code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'
Cursor

按一下按鈕以安裝:

Install in Cursor

或手動安裝:

前往 Cursor Settings -> MCP -> New MCP Server。使用上面提供的設定。

Factory CLI 使用 Factory CLI 新增 Chrome DevTools MCP 伺服器(指南):
droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"
Gemini CLI 使用 Gemini CLI 安裝 Chrome DevTools MCP 伺服器。

專案範圍:

# Either MCP only:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

全域:

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

或者,遵循 MCP 指南 並使用上面的標準設定。

Gemini Code Assist 請遵循 設定 MCP 指南, 使用上面的標準設定。
Grok Build CLI
grok mcp add chrome-devtools npx chrome-devtools-mcp@latest

請參閱 文件 以取得更多選項

JetBrains AI Assistant 和 Junie

前往 Settings | Tools | AI Assistant | Model Context Protocol (MCP) -> Add。使用上面提供的設定。 同樣地,chrome-devtools-mcp 也可以在 Settings | Tools | Junie | MCP Settings -> Add 中為 JetBrains Junie 設定。使用上面提供的設定。

Kiro

Kiro 設定中,前往 Configure MCP > Open Workspace or User MCP Config > 使用上面提供的設定片段。

或者,從 IDE 活動列 > Kiro > MCP Servers > Click Open MCP Config。使用上面提供的設定片段。

Katalon Studio

Chrome DevTools MCP 伺服器可以透過 MCP 代理與 Katalon StudioAssist 一起使用。

步驟 1: 遵循 MCP 代理設定指南 安裝 MCP 代理。

步驟 2: 使用代理啟動 Chrome DevTools MCP 伺服器:

mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest

注意: 如果連接埠 8080 已在使用中,您可能需要選擇其他連接埠。

步驟 3: 在 Katalon Studio 中,使用以下設定將伺服器新增到 StudioAssist:

  • 連線網址: http://127.0.0.1:8080/mcp
  • 傳輸類型: HTTP

連線後,Chrome DevTools MCP 工具將可在 StudioAssist 中使用。

Mistral Vibe

在 ~/.vibe/config.toml 中新增:

[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["chrome-devtools-mcp@latest"]
OpenCode

將以下設定新增到您的 opencode.json 檔案中。如果您沒有,請在 ~/.config/opencode/opencode.json 建立一個(指南):

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
    }
  }
}
Qoder

Qoder 設定中,前往 MCP Server > + Add > 使用上面提供的設定片段。

或者,遵循 MCP 指南 並使用上面的標準設定。

Qoder CLI

使用 Qoder CLI 安裝 Chrome DevTools MCP 伺服器(指南):

專案範圍:

qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

全域:

qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest
Visual Studio

按一下按鈕以安裝:

Install in Visual Studio

Warp

前往 Settings | AI | Manage MCP Servers -> + Add新增 MCP 伺服器。使用上面提供的設定。

Windsurf 請遵循 設定 MCP 指南, 使用上面的標準設定。
### 您的第一個提示

在您的 MCP 用戶端中輸入以下提示,檢查一切是否正常運作:

Check the performance of https://developers.chrome.com

您的 MCP 用戶端應會開啟瀏覽器並記錄效能追蹤。

[!NOTE] 當 MCP 用戶端使用需要執行中瀏覽器實例的工具時,MCP 伺服器會自動啟動瀏覽器。僅連線到 Chrome DevTools MCP 伺服器本身並不會自動啟動瀏覽器。

工具

如果您遇到任何問題,請查閱我們的疑難排解指南

設定

Chrome DevTools MCP 伺服器支援以下設定選項:

  • --autoConnect/ --auto-connect 若指定,會自動連線到在本機執行的瀏覽器 (Chrome 144+),該瀏覽器使用由 channel 參數識別的使用者資料目錄 (預設 channel 為 stable)。需要在 Chrome 實例中透過 chrome://inspect/#remote-debugging 啟動遠端除錯伺服器。

    • 類型: boolean
    • 預設值: false
  • --browserUrl/ --browser-url, -u 連線到正在執行且可除錯的 Chrome 實例 (例如 http://127.0.0.1:9222)。更多詳細資訊請參閱:https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.

    • 類型: string
    • 預設值: false
  • --wsEndpoint/ --ws-endpoint, -w 用於連線到正在執行的 Chrome 實例的 WebSocket 端點 (例如 ws://127.0.0.1:9222/devtools/browser/)。--browserUrl 的替代方案。

    • 類型: string
    • 預設值: false
  • --wsHeaders/ --ws-headers 用於 WebSocket 連線的自訂標頭,格式為 JSON (例如 '{"Authorization":"Bearer token"}')。僅與 --wsEndpoint 搭配使用。

    • 類型: string
    • 預設值: false
  • --headless 是否以無頭模式 (無 UI) 執行。

    • 類型: boolean
    • 預設值: false
  • --executablePath/ --executable-path, -e 自訂 Chrome 執行檔的路徑。

    • 類型: string
    • 預設值: false
  • --isolated 若指定,會建立一個暫存的使用者資料目錄,並在瀏覽器關閉後自動清除。預設為 false。

    • 類型: boolean
    • 預設值: false
  • --userDataDir/ --user-data-dir Chrome 使用者資料目錄的路徑。預設為 $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE

    • 類型: string
    • 預設值: false
  • --channel 指定應使用的不同 Chrome 頻道。預設為穩定版頻道。

    • 類型: string
    • 選項: canary, dev, beta, stable
    • 預設值: false
  • --logFile/ --log-file 寫入除錯記錄檔的檔案路徑。將環境變數 DEBUG 設為 * 以啟用詳細記錄。有助於提交錯誤報告。

    • 類型: string
    • 預設值: false
  • --viewport 伺服器啟動的 Chrome 實例的初始視窗大小。例如 1280x720。在無頭模式下,最大尺寸為 3840x2160px。

    • 類型: string
    • 預設值: false
  • --proxyServer/ --proxy-server Chrome 的代理伺服器設定,在啟動瀏覽器時作為 --proxy-server 傳遞。詳情請參閱 https://www.chromium.org/developers/design-documents/network-settings/。

    • 類型: string
    • 預設值: false
  • --acceptInsecureCerts/ --accept-insecure-certs 若啟用,會忽略與自簽憑證和過期憑證相關的錯誤。請謹慎使用。

    • 類型: boolean
    • 預設值: false
  • --experimentalPageIdRouting/ --experimental-page-id-routing 是否在頁面範圍的工具上公開 pageId,並按頁面 ID 路由請求 (對於並行代理工作階段很有用)。

    • 類型: boolean
    • 預設值: false
  • --experimentalDevtools/ --experimental-devtools 是否對 DevTools 目標啟用自動化

    • 類型: boolean
    • 預設值: false
  • --experimentalVision/ --experimental-vision 是否啟用基於座標的工具,例如 click_at(x,y)。通常需要一個能夠透過查看螢幕截圖來產生準確座標的電腦使用模型。

    • 類型: boolean
    • 預設值: false
  • --memoryDebugging/ --memory-debugging, -experimentalMemory 是否啟用記憶體除錯工具。

    • 類型: boolean
    • 預設值: false
  • --experimentalStructuredContent/ --experimental-structured-content 是否輸出結構化格式的內容。

    • 類型: boolean
    • 預設值: false
  • --experimentalIncludeAllPages/ --experimental-include-all-pages 是否將所有類型的頁面 (例如 webview 或背景頁面) 都包含為頁面。

    • 類型: boolean
    • 預設值: false
  • --experimentalScreencast/ --experimental-screencast 公開實驗性的螢幕錄影工具 (需要 ffmpeg)。安裝 ffmpeg https://www.ffmpeg.org/download.html 並確保它在 MCP 伺服器的 PATH 中可用。

    • 類型: boolean
    • 預設值: false
  • --experimentalFfmpegPath/ --experimental-ffmpeg-path 用於螢幕錄影的 ffmpeg 執行檔路徑。

    • 類型: string
    • 預設值: false
  • --categoryExperimentalWebmcp/ --category-experimental-webmcp 設為 true 以啟用 WebMCP 工具的除錯。需要 Chrome 149+ 並搭配以下旗標:--enable-features=WebMCP,DevToolsWebMCPSupport

    • 類型: boolean
    • 預設值: false
  • --chromeArg/ --chrome-arg Chrome 的額外引數。僅在 Chrome 由 chrome-devtools-mcp 啟動時適用。

    • 類型: array
    • 預設值: false
  • --blockedUrlPattern/ --blocked-url-pattern 透過封鎖指定的 URL 模式來限制瀏覽器的網路存取 (使用 https://urlpattern.spec.whatwg.org/)。連線時會靜默地中斷與具有被封鎖 URL 的目標的連線,並封鎖執行階段請求 (包括導航和子資源)。接受模式陣列。

    • 類型: array
    • 預設值: false
  • --allowedUrlPattern/ --allowed-url-pattern 透過僅允許指定的 URL 模式來限制瀏覽器的網路存取 (使用 https://urlpattern.spec.whatwg.org/)。需要 Chrome 149+。連線時會靜默地中斷與具有未被允許 URL 的目標的連線,並封鎖執行階段請求 (包括導航和子資源)。接受模式陣列。

    • 類型: array
    • 預設值: false
  • --ignoreDefaultChromeArg/ --ignore-default-chrome-arg 明確停用 Chrome 的預設引數。僅在 Chrome 由 chrome-devtools-mcp 啟動時適用。

    • 類型: array
    • 預設值: false
  • --categoryEmulation/ --category-emulation 設為 false 以排除與模擬相關的工具。

    • 類型: boolean
    • 預設值: true
  • --categoryPerformance/ --category-performance 設為 false 以排除與效能相關的工具。

    • 類型: boolean
    • 預設值: true
  • --categoryNetwork/ --category-network 設為 false 以排除與網路相關的工具。

    • 類型: boolean
    • 預設值: true
  • --categoryExtensions/ --category-extensions 設為 true 以包含與擴充功能相關的工具。注意:此功能目前僅支援 pipe 連線。在 149 版本發布前,autoConnect、browserUrl 和 wsEndpoint 不支援此功能。

    • 類型: boolean
    • 預設值: false
  • --categoryExperimentalThirdParty/ --category-experimental-third-party 設為 true 以啟用由受檢查頁面本身公開的第三方開發者工具

    • 類型: boolean
    • 預設值: false
  • --performanceCrux/ --performance-crux 設為 false 以停用將效能追蹤中的 URL 傳送到 CrUX API 以獲取現場效能資料。

    • 類型: boolean
    • 預設值: true
  • --usageStatistics/ --usage-statistics 設為 false 以選擇退出使用統計資料收集。Google 會收集使用資料以改善工具,並依據 Google 隱私權政策 (https://policies.google.com/privacy) 處理。這與 Chrome 瀏覽器指標無關。若設定了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICSCI 環境變數,則會停用。

    • 類型: boolean
    • 預設值: true
  • --screenshotFormat/ --screenshot-format 當呼叫者未指定時,覆寫 take_screenshot 使用的預設輸出格式。JPEG 和 WebP 比 PNG 小約 3-5 倍,有助於減少 AI 對話中的上下文大小。未設定則保留現有預設值 ("png")。

    • 類型: string
    • 選項: jpeg, png, webp
    • 預設值: false
  • --screenshotQuality/ --screenshot-quality 當呼叫者未指定時,覆寫 take_screenshot 用於 JPEG 和 WebP 的預設壓縮品質 (0-100)。較低的值表示檔案較小。對 PNG 無效。未設定則保留 Puppeteer 預設值。

    • 類型: number
    • 預設值: false
  • --screenshotMaxWidth/ --screenshot-max-width 螢幕截圖的最大寬度 (像素)。若擷取的影像較寬,則在傳回前會縮小 (保持長寬比)。減少 AI 對話中的上下文大小。未設定表示不調整大小。

    • 類型: number
    • 預設值: false
  • --screenshotMaxHeight/ --screenshot-max-height 螢幕截圖的最大高度(像素)。如果擷取的影像較高,則會在傳回前縮小(保持長寬比)。可與 --screenshot-max-width 合併使用;會採用較小的縮放比例。未設定表示不調整大小。

    • 類型: number
    • 預設值: false
  • --slim 公開一組「精簡」的 3 個工具,僅涵蓋導覽、指令碼執行和螢幕截圖。適用於基本的瀏覽器任務。

    • 類型: boolean
    • 預設值: false
  • --redactNetworkHeaders/ --redact-network-headers 如果設為 true,則在傳回給用戶端之前,會遮蔽部分被視為敏感的網路標頭。

    • 類型: boolean
    • 預設值: false
  • --allowUnrestrictedPaths/ --allow-unrestricted-paths 如果設定,則會停用在 MCP 用戶端未協商 roots 功能時適用的預設路徑限制。預設情況下,當未設定 roots 時,檔案寫入工具僅限於作業系統的暫存目錄。僅在連接未實作 MCP roots 且需要存取暫存目錄外路徑的受信任本機用戶端時,才使用此選項。

    • 類型: boolean
    • 預設值: false

透過 JSON 設定中的 args 屬性傳遞它們。例如:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

透過 WebSocket 連線並使用自訂標頭

您可以直接連線到 Chrome WebSocket 端點,並包含自訂標頭(例如,用於驗證):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

若要從執行中的 Chrome 執行個體取得 WebSocket 端點,請造訪 http://127.0.0.1:9222/json/version 並尋找 webSocketDebuggerUrl 欄位。

您也可以執行 npx chrome-devtools-mcp@latest --help 來查看所有可用的設定選項。

概念

並行工作階段

大多數 MCP 用戶端會為每個對話啟動一個 Chrome DevTools MCP 伺服器。如果您的用戶端在並行代理程式或子代理程式之間共用單一伺服器執行個體,請使用 --experimentalPageIdRouting 啟動伺服器。這會在頁面範圍的工具上公開 pageId,以便每個代理程式可以將工具呼叫路由到其正在使用的分頁。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--experimentalPageIdRouting"
      ]
    }
  }
}

如果您執行多個獨立的 MCP 用戶端工作階段,並且希望每個工作階段都啟動自己的暫存 Chrome 設定檔,也請傳遞 --isolated。這可以避免在這些伺服器執行個體之間共用預設的 Chrome DevTools MCP 使用者資料目錄。

使用者資料目錄

chrome-devtools-mcp 使用下列使用者資料目錄啟動 Chrome 穩定版通道的執行個體:

  • Linux / macOS:$HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
  • Windows:%HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

使用者資料目錄不會在兩次執行之間清除,並且會在所有 chrome-devtools-mcp 的執行個體之間共用。將 isolated 選項設為 true,即可改為使用暫存使用者資料目錄,該目錄會在瀏覽器關閉後自動清除。

連線到執行中的 Chrome 執行個體

預設情況下,Chrome DevTools MCP 伺服器會使用專用設定檔啟動一個新的 Chrome 執行個體。這在某些情況下可能不是最理想的:

  • 當您在手動網站測試和代理程式驅動測試之間切換時,希望維持相同的應用程式狀態。
  • 當 MCP 需要登入網站時。某些帳戶可能會在瀏覽器透過 WebDriver(Chrome DevTools MCP 伺服器的預設啟動機制)控制時阻止登入。
  • 如果您在沙箱環境中執行 LLM,但想要連線到在沙箱外執行的 Chrome 執行個體。

在這些情況下,請先啟動 Chrome,然後讓 Chrome DevTools MCP 伺服器連線到它。有兩種方法可以做到:

  • 自動連線(Chrome 144 中可用):最適合在手動和代理程式驅動測試之間共用狀態。
  • 透過遠端除錯連接埠手動連線:最適合在沙箱環境中執行時使用。

自動連線到執行中的 Chrome 執行個體

步驟 1: 在 Chrome 中設定遠端除錯

在 Chrome(>= M144)中,執行以下操作來設定遠端除錯:

  1. 導覽至 chrome://inspect/#remote-debugging 以啟用遠端除錯。
  2. 依照對話方塊 UI 允許或拒絕傳入的除錯連線。

步驟 2: 設定 Chrome DevTools MCP 伺服器以自動連線到執行中的 Chrome 執行個體

若要將 chrome-devtools-mcp 伺服器連線到執行中的 Chrome 執行個體,請為 MCP 伺服器使用 --autoConnect 命令列引數。

以下程式碼片段是 gemini-cli 的設定範例:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

步驟 3: 測試您的設定

確保您的瀏覽器正在執行。開啟 gemini-cli 並執行以下提示:

Check the performance of https://developers.chrome.com

[!NOTE] autoConnect 選項需要使用者啟動 Chrome。如果使用者有多個作用中的設定檔,MCP 伺服器將連線到預設設定檔(由 Chrome 決定)。MCP 伺服器可以存取所選設定檔的所有開啟視窗。

Chrome DevTools MCP 伺服器將嘗試連線到您執行中的 Chrome 執行個體。它會顯示一個對話方塊,請求使用者權限。

按一下 允許 會導致 Chrome DevTools MCP 伺服器開啟 developers.chrome.com 並擷取效能追蹤。

使用連接埠轉送手動連線

您可以使用 --browser-url 選項連線到執行中的 Chrome 執行個體。如果您在不允許啟動新 Chrome 執行個體的沙箱環境中執行 MCP 伺服器,這會很有用。

以下是如何連線到執行中 Chrome 執行個體的逐步指南:

步驟 1:設定 MCP 用戶端

--browser-url 選項新增到您的 MCP 用戶端設定中。此選項的值應為執行中 Chrome 執行個體的 URL。http://127.0.0.1:9222 是常見的預設值。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

步驟 2:啟動 Chrome 瀏覽器

[!WARNING] 啟用遠端除錯連接埠會在執行中的瀏覽器執行個體上開啟一個除錯連接埠。您機器上的任何應用程式都可以連線到此連接埠並控制瀏覽器。確保在除錯連接埠開啟時,您沒有瀏覽任何敏感網站。

啟動 Chrome 瀏覽器並啟用遠端除錯連接埠。在啟用除錯連接埠啟動新執行個體之前,請確保關閉所有正在執行的 Chrome 執行個體。您選擇的連接埠號碼必須與您在 MCP 用戶端設定的 --browser-url 選項中指定的相同。

出於安全原因,Chrome 要求您在啟用遠端除錯連接埠時使用非預設的使用者資料目錄。您可以使用 --user-data-dir 旗標指定自訂目錄。這可確保您的常規瀏覽設定檔和資料不會暴露給除錯工作階段。

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

步驟 3:測試您的設定

設定 MCP 用戶端並啟動 Chrome 瀏覽器後,您可以透過在 MCP 用戶端中執行一個簡單的提示來測試您的設定:

Check the performance of https://developers.chrome.com

您的 MCP 用戶端應連線到執行中的 Chrome 執行個體並接收效能報告。

如果您遇到虛擬機器到主機的連接埠轉送問題,請參閱 docs/troubleshooting.md 中的「虛擬機器 (VM) 與主機之間的遠端除錯失敗」一節。

有關遠端除錯的更多詳細資訊,請參閱 Chrome DevTools 文件

在 Android 上除錯 Chrome

請參閱這些說明

已知限制

請參閱疑難排解

整合為瀏覽器子代理程式

如果您正在開發代理工具,並希望提供一個整合的瀏覽器子代理程式作為產品的一部分,我們建議您基於 Chrome DevTools for agents 進行建置。

有關參考實作,請參閱 Gemini CLI 瀏覽器代理程式文件