mcpField
C
Chrome DevTools MCP

Chrome DevTools MCP

本地服务
github.com/Async23浏览器自动化015 周前更新

关于 Chrome DevTools MCP

Chrome DevTools MCP 让编码 Agent 控制和检查运行中的 Chrome 浏览器,用于自动化、调试和性能分析。此 Async23 分支增加可见浏览器焦点控制,并修复超大整页截图问题;也提供无需 MCP 的 CLI。

主要功能

  1. 01使用 Puppeteer 自动操作 Chrome
  2. 02检查网络请求和控制台消息
  3. 03截取屏幕截图
  4. 04记录跟踪并提取性能洞察
  5. 05提供非 MCP 用法的 CLI

适用场景

  1. 01为编码 Agent 自动执行浏览器操作
  2. 02调试网络请求和浏览器控制台错误
  3. 03使用 Chrome 跟踪检查性能
  4. 04无需 MCP,通过 CLI 使用浏览器控制

MCP 相关

MCP 服务向编码 Agent 提供 Chrome DevTools 功能,用于控制和检查浏览器、调试及性能分析。

配置

本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
"mcpServers": {
"async23-chrome-devtools": {
"command": "npx",
"args": [
"-y",
"@async23/chrome-devtools-mcp"
]
}
}
}
启动命令npx -y @async23/chrome-devtools-mcp

本地服务需要在你的电脑上安装运行环境(如 Node.js 18+)。各客户端的配置文件位置不同,请参考客户端文档。

安装包
npm@async23/chrome-devtools-mcp1.7.0

工具

29

收录的工具列表 · 更新于 2 周前

参数类型必填说明
uidstring是页面内容快照中某个元素的 uid
dblClickboolean否设为 true 可执行双击。默认值为 false。
includeSnapshotboolean否是否在响应中包含快照。默认值为 false。

详细介绍

面向 Agent 的 Chrome DevTools

npm @async23/chrome-devtools-mcp package

面向 Agent 的 Chrome DevTools(chrome-devtools-mcp)可让你的编码 Agent(例如 Antigravity、Claude、Cursor 或 Copilot) 控制并检查正在运行的 Chrome 浏览器。它作为 Model-Context-Protocol (MCP)服务运行,让你的 AI 编码助手能够充分利用 Chrome DevTools 的强大功能,进行可靠的自动化、深入调试和性能分析。 它还提供了一个 CLI,可在不使用 MCP 的情况下使用。

此仓库以 @async23/chrome-devtools-mcp 的名称发布 Async23 分支。它包含本地可见浏览器的焦点控制和超大整页截图修复,同时保留 chrome-devtools-mcp 可执行文件名称。

工具参考 | 更新日志 | 贡献指南 | 故障排除 | 设计原则

主要功能

  • 获取性能洞察:使用 Chrome DevTools 记录 跟踪数据并提取可执行的性能洞察。
  • 高级浏览器调试:分析网络请求、截取屏幕截图,并检查浏览器控制台消息(包含源映射堆栈跟踪)。
  • 可靠的自动化:使用 puppeteer 自动执行 Chrome 中的操作,并自动等待操作结果。

免责声明

chrome-devtools-mcp 会向 MCP 客户端公开浏览器实例的内容, 使其能够检查、调试并修改浏览器或 DevTools 中的任何数据。 请避免分享你不希望 MCP 客户端获知的敏感或个人信息。

chrome-devtools-mcp 仅正式支持 Google Chrome 和 Chrome for Testing。 其他基于 Chromium 的浏览器可能可以使用,但不作保证,并且可能会遇到意外行为。请自行决定是否使用。 我们致力于为最新版本的 Extended Stable Chrome 提供修复和支持。

性能工具可能会将跟踪 URL 发送到 Google CrUX API,以获取真实用户体验数据。这有助于通过同时呈现现场数据和实验室数据,全面了解性能情况。该数据由 Chrome 用户体验报告(CrUX)收集。如需停用此功能,请使用 --no-performance-crux 标志运行。

使用统计信息

Google 会收集使用统计信息(例如工具调用成功率、延迟和环境信息),以提升 Chrome DevTools MCP 的可靠性和性能。

默认情况下,数据收集处于启用状态。启动服务时传入 --no-usage-statistics 标志即可选择退出:

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

Google 会根据《Google 隐私权政策》处理这些数据。

Google 对 Chrome DevTools MCP 使用统计信息的收集独立于 Chrome 浏览器的使用统计信息。选择退出 Chrome 指标不会自动让你退出此工具的数据收集,反之亦然。

如果设置了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 或 CI 环境变量,则会停用数据收集。

更新检查

默认情况下,服务会定期检查 npm 注册表是否有更新,并在发现新版本时记录通知。 你可以通过设置 CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 环境变量来停用更新检查。

要求

入门

将以下配置添加到你的 MCP 客户端:

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

说明

使用 @async23/chrome-devtools-mcp@latest 可确保 MCP 客户端 始终使用此分支的最新已发布版本。上述配置要求已有一个可调试的 Chrome 实例运行在端口 9222。

如果你只想执行基本的浏览器任务,请使用 --slim 模式:

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

请参阅 精简工具参考。

MCP 客户端配置
Amp 请遵循 https://ampcode.com/manual#mcp,并使用上文提供的配置。你也可以使用 CLI 安装 Chrome DevTools MCP 服务:
amp mcp add chrome-devtools -- npx @async23/chrome-devtools-mcp@latest
Antigravity

要使用 Chrome DevTools MCP 服务,请按照 Antigravity 文档中的说明安装自定义 MCP 服务。将以下配置添加到 MCP 服务配置中:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "@async23/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 @async23/chrome-devtools-mcp@latest

作为插件安装(MCP + 技能)

说明

如果之前已为 Claude Code 安装过 Chrome DevTools MCP,请务必先从安装内容和配置文件中将其移除。

要安装包含技能的 Chrome DevTools MCP,请在 Claude Code 中添加市场注册表:

/plugin marketplace add Async23/chrome-devtools-mcp

然后安装插件:

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

重启 Claude Code,以加载 MCP 服务和技能(使用 /skills 检查)。

提示

如果插件安装失败并出现 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 @async23/chrome-devtools-mcp@latest

在 Windows 11 上

更新 .codex/config.toml,添加以下 env 和 startup_timeout_ms 参数,以配置 Chrome 的安装位置并延长启动超时时间:

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "@async23/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 @async23/chrome-devtools-mcp@latest
Copilot CLI

启动 Copilot CLI:

copilot

运行以下命令,打开添加新 MCP 服务的对话框:

/mcp add

配置以下字段,然后按 CTRL+S 保存配置:

  • 服务名称: chrome-devtools
  • 服务类型: [1] Local
  • 命令: npx -y @async23/chrome-devtools-mcp@latest
Copilot / VS Code

作为插件安装(推荐)

最简单的入门方式是将 chrome-devtools-mcp 安装为 Agent 插件。 它将 MCP 服务和所有技能打包在一起,让你的 Agent 同时获得工具 和专家指导,从而有效地使用这些工具。

  1. 打开命令面板(macOS 上按 Cmd+Shift+P,Windows/Linux 上按 Ctrl+Shift+P)。
  2. 搜索并运行 Chat: Install Plugin From Source 命令。
  3. 粘贴我们的仓库名称:Async23/chrome-devtools-mcp。

就这样!你的 Agent 现在已获得 Chrome DevTools 的强大功能。


安装为 MCP 服务(仅 MCP)

点击按钮进行安装:

在 VS Code 中安装

在 VS Code Insiders 中安装

或手动安装:

按照 VS Code MCP 配置指南使用上面的标准配置,或使用 CLI:

macOS 和 Linux:

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

Windows(PowerShell):

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

点击按钮进行安装:

在 Cursor 中安装

或手动安装:

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

Factory CLI 使用 Factory CLI 添加 Chrome DevTools MCP 服务(指南):
droid mcp add chrome-devtools "npx -y @async23/chrome-devtools-mcp@latest"
Gemini CLI 使用 Gemini CLI 安装 Chrome DevTools MCP 服务。

项目范围:

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

全局:

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

或者,按照 MCP 指南使用上面的标准配置。

Gemini Code Assist 按照 MCP 配置指南 使用上面的标准配置。
Grok Build CLI
grok mcp add chrome-devtools npx @async23/chrome-devtools-mcp@latest

如需了解更多选项,请参阅文档

JetBrains AI Assistant & Junie

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

Kiro

在 Kiro Settings 中,前往 Configure MCP > Open Workspace or User MCP Config > 使用上面提供的配置片段。

或者,在 IDE 的 Activity Bar 中,前往 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 @async23/chrome-devtools-mcp@latest

注意: 如果 8080 端口已被占用,你可能需要选择其他端口。

步骤 3: 在 Katalon Studio 中,使用以下设置将服务添加到 StudioAssist:

  • 连接 URL: http://127.0.0.1:8080/mcp
  • 传输类型: HTTP

连接后,StudioAssist 中即可使用 Chrome DevTools MCP 工具。

Mistral Vibe

在 ~/.vibe/config.toml 中添加:

[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["@async23/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", "@async23/chrome-devtools-mcp@latest"]
    }
  }
}
Qoder

在 Qoder Settings 中,前往 MCP Server > + Add > 使用上方提供的配置片段。

或者,按照 MCP 指南,使用上方的标准配置。

Qoder CLI

使用 Qoder CLI 安装 Chrome DevTools MCP 服务(指南):

项目范围:

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

全局:

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

点击按钮进行安装:

在 Visual Studio 中安装

Warp

前往 Settings | AI | Manage MCP Servers -> + Add 以添加 MCP 服务。使用上方提供的配置。

Windsurf 按照MCP 配置指南,使用上方的标准配置。
第一个提示词

在 MCP 客户端中输入以下提示词,检查一切是否正常:

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

MCP 客户端应打开浏览器并记录性能跟踪。

说明

MCP 客户端使用需要运行中的浏览器实例的工具后,MCP 服务会自动启动浏览器。仅连接到 Chrome DevTools MCP 服务不会自动启动浏览器。

工具

如果遇到问题,请查看我们的故障排除指南。

配置

Chrome DevTools MCP 服务支持以下配置选项:

  • --autoConnect/ --auto-connect 如果指定,则自动连接到通过 channel 参数指定的用户数据目录中本地运行的浏览器(Chrome 144+,默认 channel 为 stable)。需要通过 chrome://inspect/#remote-debugging 在 Chrome 实例中启动远程调试服务器。

    • 类型: 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 如果指定,则创建一个临时 user-data-dir,并在浏览器关闭后自动清理。默认为 false。

    • 类型: boolean
    • 默认值: false
  • --userDataDir/ --user-data-dir Chrome 用户数据目录的路径。默认值为 $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE

    • 类型: string
    • 默认值: false
  • --channel 指定要使用的其他 Chrome channel。默认使用 stable channel 版本。

    • 类型: 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 路由请求(适用于并发 Agent 会话)。

    • 类型: boolean
    • 默认值: false
  • --experimentalDevtools/ --experimental-devtools 是否启用通过 DevTools targets 进行自动化

    • 类型: 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 或后台页面)都作为页面纳入。

    • Type: 布尔值
    • Default: false
  • --emulateFocusedPages/ --emulate-focused-pages 是否将页面模拟为已聚焦且处于活动状态。仅当可见浏览器的焦点行为出现问题时才禁用;保持启用可保留多 Agent 工作流中的现有行为,使页面表现为已聚焦/处于活动状态。

    • Type: 布尔值
    • Default: true
  • --experimentalScreencast/ --experimental-screencast 开放实验性屏幕录制工具(需要 ffmpeg)。请从 https://www.ffmpeg.org/download.html 安装 ffmpeg,并确保它位于 MCP 服务的 PATH 中。

    • Type: 布尔值
    • Default: false
  • --experimentalFfmpegPath/ --experimental-ffmpeg-path 用于屏幕录制的 ffmpeg 可执行文件路径。

    • Type: 字符串
    • Default: false
  • --categoryExperimentalWebmcp/ --category-experimental-webmcp 设为 true 可启用 WebMCP 调试工具。需要 Chrome 149+,并启用以下标志:--enable-features=WebMCP,DevToolsWebMCPSupport

    • Type: 布尔值
    • Default: false
  • --chromeArg/ --chrome-arg Chrome 的其他参数。仅在由 chrome-devtools-mcp 启动 Chrome 时生效。

    • Type: 数组
    • Default: false
  • --blockedUrlPattern/ --blocked-url-pattern 通过屏蔽指定的 URL 模式来限制浏览器的网络访问(使用 https://urlpattern.spec.whatwg.org/)。连接时会静默断开与含有被屏蔽 URL 的目标的连接,并屏蔽运行时请求(包括导航和子资源请求)。接受模式数组。

    • Type: 数组
    • Default: false
  • --allowedUrlPattern/ --allowed-url-pattern 通过仅允许指定的 URL 模式来限制浏览器的网络访问(使用 https://urlpattern.spec.whatwg.org/)。需要 Chrome 149+。连接时会静默断开与含有未允许 URL 的目标的连接,并屏蔽运行时请求(包括导航和子资源请求)。接受模式数组。

    • Type: 数组
    • Default: false
  • --ignoreDefaultChromeArg/ --ignore-default-chrome-arg 明确禁用 Chrome 的默认参数。仅在由 chrome-devtools-mcp 启动 Chrome 时生效。

    • Type: 数组
    • Default: false
  • --categoryEmulation/ --category-emulation 设为 false 可排除与模拟相关的工具。

    • Type: 布尔值
    • Default: true
  • --categoryPerformance/ --category-performance 设为 false 可排除与性能相关的工具。

    • Type: 布尔值
    • Default: true
  • --categoryNetwork/ --category-network 设为 false 可排除与网络相关的工具。

    • Type: 布尔值
    • Default: true
  • --categoryExtensions/ --category-extensions 设为 true 可包含与扩展相关的工具。注意:此功能目前仅支持管道连接。在 149 发布之前,此功能不支持 autoConnect、browserUrl 和 wsEndpoint。

    • Type: 布尔值
    • Default: false
  • --categoryExperimentalThirdParty/ --category-experimental-third-party 设为 true 可启用由被检查页面本身开放的第三方开发者工具。

    • Type: 布尔值
    • Default: false
  • --performanceCrux/ --performance-crux 设为 false 可停止将性能跟踪中的 URL 发送到 CrUX API,以获取现场性能数据。

    • Type: 布尔值
    • Default: true
  • --usageStatistics/ --usage-statistics 设置为 false 可选择退出使用情况统计信息收集。Google 会根据 Google 隐私权政策 (https://policies.google.com/privacy) 处理收集到的使用数据,以改进工具。这与 Chrome 浏览器指标相互独立。如果设置了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 或 CI 环境变量,则会禁用此功能。

    • 类型: boolean
    • 默认值: true
  • --screenshotFormat/ --screenshot-format 当调用方未指定格式时,覆盖 take_screenshot 使用的默认输出格式。JPEG 和 WebP 的文件大小约为 PNG 的 1/3 到 1/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": [
        "@async23/chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}
使用自定义标头通过 WebSocket 连接

你可以直接连接到 Chrome WebSocket 端点,并附带自定义标头(例如,用于身份验证):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "@async23/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 @async23/chrome-devtools-mcp@latest --help,查看所有可用的配置选项。

概念

并发会话

大多数 MCP 客户端会为每个对话启动一个 Chrome DevTools MCP 服务。如果你的客户端在多个并发 Agent 或子 Agent 之间共享同一个服务实例,请使用 --experimentalPageIdRouting 启动服务。这样,页面级工具会公开 pageId,以便每个 Agent 将工具调用路由到自己正在操作的标签页。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "@async23/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 实例。在某些情况下,这可能并不理想:

  • 如果你希望在手动测试网站和由 Agent 驱动的测试之间切换时,保留相同的应用状态。
  • MCP 需要登录网站时。有些账户可能会阻止通过 WebDriver(Chrome DevTools MCP 服务的默认启动机制)控制浏览器时的登录。
  • 如果你在沙盒环境中运行大模型,但希望连接到沙盒之外运行的 Chrome 实例。

遇到这些情况时,请先启动 Chrome,再让 Chrome DevTools MCP 服务连接到它。可以通过以下两种方式实现:

  • 自动连接(Chrome 144 起可用):最适合在手动测试和由 Agent 驱动的测试之间共享状态。
  • 通过远程调试端口手动连接:最适合在沙盒环境中运行时使用。
自动连接到正在运行的 Chrome 实例

**步骤 1:**在 Chrome 中设置远程调试

在 Chrome(>= M144)中,执行以下操作来设置远程调试:

  1. 前往 chrome://inspect/#remote-debugging 启用远程调试。
  2. 按照对话框界面提示,允许或拒绝传入的调试连接。

**步骤 2:**配置 Chrome DevTools MCP 服务,以便自动连接到正在运行的 Chrome 实例

若要将 chrome-devtools-mcp 服务连接到正在运行的 Chrome 实例,请为 MCP 服务使用 --autoConnect 命令行参数。

以下代码片段是 gemini-cli 的配置示例:

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

**步骤 3:**测试设置

确保浏览器正在运行。打开 gemini-cli 并运行以下提示词:

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

说明

autoConnect 选项要求用户启动 Chrome。如果用户有多个活跃配置文件,MCP 服务将连接到默认配置文件(由 Chrome 确定)。MCP 服务可以访问所选配置文件中的所有打开窗口。

Chrome DevTools MCP 服务会尝试连接到正在运行的 Chrome 实例。系统会显示一个对话框,请求用户许可。

点击 允许后,Chrome DevTools MCP 服务会打开 developers.chrome.com,并采集性能 跟踪记录。

使用端口转发手动连接

你可以使用 --browser-url 选项连接到正在运行的 Chrome 实例。如果你在不允许启动新 Chrome 实例的沙盒环境中运行 MCP 服务,这会很有用。

以下是连接到正在运行的 Chrome 实例的分步指南:

步骤 1:配置 MCP 客户端

在 MCP 客户端配置中添加 --browser-url 选项。此选项的值应为正在运行的 Chrome 实例的 URL。http://127.0.0.1:9222 是常见的默认值。

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

步骤 2:启动 Chrome 浏览器

警告

启用远程调试端口会在正在运行的浏览器实例上开放一个调试端口。你机器上的任何应用都可以连接到此端口并控制浏览器。调试端口开放期间,请勿浏览任何敏感网站。

启动 Chrome 浏览器并启用远程调试端口。启用调试端口启动新的 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

请参阅这些说明。

已知限制

请参阅故障排除。

集成为浏览器子 Agent

如果你正在开发 Agent 工具,并希望将集成式浏览器子 Agent 作为产品的一部分提供,我们建议基于 Chrome DevTools for agents 构建。

参考实现请参阅 Gemini CLI 浏览器 Agent 文档。

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。