AI编码助手浏览器控制协议

面向 AI 智能体的 Chrome DevTools（chrome-devtools-mcp）可让你的编码智能体（例如 Antigravity、Claude、Cursor 或 Copilot）控制和检查实时运行的 Chrome 浏览器。它作为 Model Context Protocol（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 提供修复和支持。

性能工具可能会将跟踪 URL 发送至 Google CrUX API，以获取真实用户体验数据。通过同时呈现现场数据和实验室数据，这有助于提供全面的性能视图。这些数据由 Chrome User Experience Report（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_STATISTICS 或 CI 环境变量，数据收集将被禁用。

默认情况下，服务器会定期检查 npm 注册表中的更新，并在有新版本可用时记录通知。你可以通过设置 CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 环境变量来禁用这些更新检查。

需要 Chrome 当前稳定版本或更高版本。

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

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

使用 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 mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

要使用 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 图标将其启动。

通过 CLI 安装（仅 MCP）

使用 Claude Code CLI 添加 Chrome DevTools MCP 服务器（指南）：

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

作为插件安装（MCP + Skills）

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

要安装包含 Skills 的 Chrome DevTools MCP，请在 Claude Code 中添加插件市场注册表：

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

然后安装插件：

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

重启 Claude Code，以加载 MCP 服务器和 Skills（可使用 /skills 检查）。

[!TIP] 如果插件安装失败，并显示 Failed to clone repository 错误（例如企业防火墙导致的 HTTPS 连接问题），请查看故障排除指南了解变通方案，或改用上面的 CLI 安装方法。

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

通过更新 .codex/config.toml 并添加以下 env 和 startup_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 CLI 添加 Chrome DevTools MCP 服务器（MCP 指南）：

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

copilot

运行以下命令，启动添加新 MCP 服务器的对话：

/mcp add

配置以下字段，然后按 CTRL+S 保存配置：

服务器名称：chrome-devtools

服务器类型：[1] Local

命令：npx -y chrome-devtools-mcp@latest

作为插件安装（推荐）

最快捷的入门方式是将 chrome-devtools-mcp 安装为智能体插件。它将 MCP 服务器和所有 Skills 打包在一起，让你的智能体同时获得所需工具及有效使用这些工具所需的专业指导。

打开命令面板（macOS 上按 Cmd+Shift+P，Windows/Linux 上按 Ctrl+Shift+P）。

搜索并运行 Chat: Install Plugin From Source 命令。

粘贴我们的仓库名称：ChromeDevTools/chrome-devtools-mcp。

就这么简单！现在，你的智能体已获得强大的 Chrome DevTools 能力。

作为 MCP 服务器安装（仅 MCP）

单击按钮进行安装：

按照 VS Code MCP 配置指南使用上面的标准配置，或者使用 CLI：

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 Settings -> MCP -> New MCP Server。使用上面提供的配置。

通过 CLI 安装（仅 MCP）

使用 Devin CLI 添加 Chrome DevTools MCP 服务器（指南）：

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

droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"

# 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 指南使用上面的标准配置。

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

更多选项请参阅文档。

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

在 Kiro 设置中，前往 Configure MCP > Open Workspace or User MCP Config > Use the configuration snippet provided above。

或者，从 IDE 活动栏前往 Kiro > MCP Servers > Click Open MCP Config。使用上面提供的配置片段。

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：

连接 URL：http://127.0.0.1:8080/mcp

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

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

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

将以下配置添加到 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 设置中，前往 MCP Server > + Add > Use the configuration snippet provided above。

或者，按照 MCP 指南操作，并使用上面的标准配置。

使用 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

点击按钮进行安装：

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

在 MCP 客户端中输入以下提示词，检查一切是否正常工作：

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

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

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

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

输入自动化（10 个工具）click drag fill fill_form handle_dialog hover press_key type_text upload_file click_at

导航自动化（6 个工具）close_page list_pages navigate_page new_page select_page wait_for

模拟（2 个工具）emulate resize_page

性能（3 个工具）performance_analyze_insight performance_start_trace performance_stop_trace

performance_analyze_insight

performance_start_trace

performance_stop_trace

网络（2 个工具）get_network_request list_network_requests

list_network_requests

调试（8 个工具）evaluate_script get_console_message lighthouse_audit list_console_messages take_screenshot take_snapshot screencast_start screencast_stop

list_console_messages

内存（12 个工具）take_heapsnapshot close_heapsnapshot compare_heapsnapshots get_heapsnapshot_class_nodes get_heapsnapshot_details get_heapsnapshot_dominators get_heapsnapshot_duplicate_strings get_heapsnapshot_edges get_heapsnapshot_object_details get_heapsnapshot_retainers get_heapsnapshot_retaining_paths get_heapsnapshot_summary

compare_heapsnapshots

get_heapsnapshot_class_nodes

get_heapsnapshot_details

get_heapsnapshot_dominators

get_heapsnapshot_duplicate_strings

get_heapsnapshot_edges

get_heapsnapshot_object_details

get_heapsnapshot_retainers

get_heapsnapshot_retaining_paths

get_heapsnapshot_summary

扩展程序（5 个工具）install_extension list_extensions reload_extension trigger_extension_action uninstall_extension

trigger_extension_action

第三方（2 个工具）execute_3p_developer_tool list_3p_developer_tools

execute_3p_developer_tool

list_3p_developer_tools

WebMCP（2 个工具）execute_webmcp_tool list_webmcp_tools

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

--autoConnect/--auto-connect 如果指定，将自动连接到本地运行的浏览器（Chrome 144+），其用户数据目录由 channel 参数确定（默认渠道为 stable）。需要通过 chrome://inspect/#remote-debugging 在 Chrome 实例中启动远程调试服务器。类型：boolean 默认值：false

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

--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

--browserUrl/--browser-url, -u 连接到正在运行且可调试的 Chrome 实例（例如 http://127.0.0.1:9222）。更多详情请参阅：https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance。

--wsEndpoint/--ws-endpoint, -w 用于连接到正在运行的 Chrome 实例的 WebSocket 端点（例如 ws://127.0.0.1:9222/devtools/browser/）。可替代 --browserUrl。类型：string 默认值：false

--wsEndpoint/--ws-endpoint, -w 用于连接到正在运行的 Chrome 实例的 WebSocket 端点（例如 ws://127.0.0.1:9222/devtools/browser/）。可替代 --browserUrl。

--wsHeaders/--ws-headers JSON 格式的 WebSocket 连接自定义请求头（例如 '{"Authorization":"Bearer token"}'）。仅与 --wsEndpoint 配合使用。类型：string 默认值：false

--wsHeaders/--ws-headers JSON 格式的 WebSocket 连接自定义请求头（例如 '{"Authorization":"Bearer token"}'）。仅与 --wsEndpoint 配合使用。

--headless 是否以无头（无 UI）模式运行。类型：boolean 默认值：false

--headless 是否以无头（无 UI）模式运行。

--executablePath/--executable-path, -e 自定义 Chrome 可执行文件的路径。类型：string 默认值：false

--executablePath/--executable-path, -e 自定义 Chrome 可执行文件的路径。

--isolated 如果指定，将创建一个临时的用户数据目录，并在浏览器关闭后自动清理。默认为 false。类型：boolean 默认值：false

--isolated 如果指定，将创建一个临时的用户数据目录，并在浏览器关闭后自动清理。默认为 false。

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

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

--channel 指定要使用的其他 Chrome 渠道。默认使用稳定渠道版本。类型：string 可选值：canary、dev、beta、stable 默认值：false

--channel 指定要使用的其他 Chrome 渠道。默认使用稳定渠道版本。

可选值：canary、dev、beta、stable

--logFile/--log-file 用于写入调试日志的文件路径。将环境变量 DEBUG 设置为 * 可启用详细日志。提交错误报告时非常有用。类型：string 默认值：false

--logFile/--log-file 用于写入调试日志的文件路径。将环境变量 DEBUG 设置为 * 可启用详细日志。提交错误报告时非常有用。

--viewport 服务器启动的 Chrome 实例的初始视口尺寸。例如 1280x720。在无头模式下，最大尺寸为 3840x2160px。类型：string 默认值：false

--viewport 服务器启动的 Chrome 实例的初始视口尺寸。例如 1280x720。在无头模式下，最大尺寸为 3840x2160px。

--proxyServer/--proxy-server Chrome 的代理服务器配置，启动浏览器时会将其作为 --proxy-server 参数传入。详情请参阅 https://www.chromium.org/developers/design-documents/network-settings/。类型：`string` 默认值：false

--proxyServer/--proxy-server Chrome 的代理服务器配置，启动浏览器时会将其作为 --proxy-server 参数传入。详情请参阅 https://www.chromium.org/developers/design-documents/network-settings/。

--acceptInsecureCerts/--accept-insecure-certs 如果启用，将忽略与自签名证书和过期证书有关的错误。请谨慎使用。类型：boolean 默认值：false

--acceptInsecureCerts/--accept-insecure-certs 如果启用，将忽略与自签名证书和过期证书有关的错误。请谨慎使用。

--experimentalPageIdRouting/--experimental-page-id-routing 是否在页面作用域的工具上公开 pageId，并按页面 ID 路由请求（适用于并发智能体会话）。类型：boolean 默认值：false

--experimentalPageIdRouting/--experimental-page-id-routing 是否在页面作用域的工具上公开 pageId，并按页面 ID 路由请求（适用于并发智能体会话）。

--experimentalDevtools/--experimental-devtools 是否启用对 DevTools 目标的自动化操作。类型：boolean 默认值：false

--experimentalDevtools/--experimental-devtools 是否启用对 DevTools 目标的自动化操作。

--experimentalVision/--experimental-vision 是否启用基于坐标的工具，例如 click_at(x,y)。通常需要能够通过查看截图生成精确坐标的计算机操作模型。类型：boolean 默认值：false

--experimentalVision/ --experimental-vision 是否启用基于坐标的工具，例如 click_at(x,y)。通常需要使用能够通过查看屏幕截图生成准确坐标的计算机操作模型。

--memoryDebugging/ --memory-debugging, -experimentalMemory 是否启用内存调试工具。类型：boolean 默认值：false

--memoryDebugging/ --memory-debugging, -experimentalMemory 是否启用内存调试工具。

--experimentalStructuredContent/ --experimental-structured-content 是否输出结构化的格式化内容。类型：boolean 默认值：false

--experimentalStructuredContent/ --experimental-structured-content 是否输出结构化的格式化内容。

--experimentalIncludeAllPages/ --experimental-include-all-pages 是否将 WebView 或后台页面等各种页面都作为页面包含在内。类型：boolean 默认值：false

--experimentalIncludeAllPages/ --experimental-include-all-pages 是否将 WebView 或后台页面等各种页面都作为页面包含在内。

--experimentalScreencast/ --experimental-screencast 提供实验性的屏幕录制工具（需要 ffmpeg）。请安装 ffmpeg https://www.ffmpeg.org/download.html，并确保 MCP 服务器可通过 PATH 访问它。类型：boolean 默认值：false

--experimentalScreencast/ --experimental-screencast 提供实验性的屏幕录制工具（需要 ffmpeg）。请安装 ffmpeg https://www.ffmpeg.org/download.html，并确保 MCP 服务器可通过 PATH 访问它。

--experimentalFfmpegPath/ --experimental-ffmpeg-path 用于屏幕录制的 ffmpeg 可执行文件路径。类型：string 默认值：false

--experimentalFfmpegPath/ --experimental-ffmpeg-path 用于屏幕录制的 ffmpeg 可执行文件路径。

--categoryExperimentalWebmcp/ --category-experimental-webmcp 设置为 true 以启用 WebMCP 调试工具。需要 Chrome 150+，并启用以下标志：--enable-features=WebMCP 类型：boolean 默认值：false

--categoryExperimentalWebmcp/ --category-experimental-webmcp 设置为 true 以启用 WebMCP 调试工具。需要 Chrome 150+，并启用以下标志：--enable-features=WebMCP

--chromeArg/ --chrome-arg Chrome 的附加参数。仅当 Chrome 由 chrome-devtools-mcp 启动时适用。类型：array 默认值：false

--chromeArg/ --chrome-arg Chrome 的附加参数。仅当 Chrome 由 chrome-devtools-mcp 启动时适用。

--blockedUrlPattern/ --blocked-url-pattern 通过阻止指定的 URL 模式来限制浏览器的网络访问（使用 https://urlpattern.spec.whatwg.org/）。连接时会静默地从 URL 被阻止的目标分离，并阻止运行时请求（包括导航和子资源）。接受模式数组。类型：array 默认值：false

--blockedUrlPattern/ --blocked-url-pattern 通过阻止指定的 URL 模式来限制浏览器的网络访问（使用 https://urlpattern.spec.whatwg.org/）。连接时会静默地从 URL 被阻止的目标分离，并阻止运行时请求（包括导航和子资源）。接受模式数组。

--allowedUrlPattern/ --allowed-url-pattern 通过仅允许指定的 URL 模式来限制浏览器的网络访问（使用 https://urlpattern.spec.whatwg.org/）。需要 Chrome 149+。连接时会静默地从 URL 不被允许的目标分离，并阻止运行时请求（包括导航和子资源）。接受模式数组。类型：array 默认值：false

--allowedUrlPattern/ --allowed-url-pattern 通过仅允许指定的 URL 模式来限制浏览器的网络访问（使用 https://urlpattern.spec.whatwg.org/）。需要 Chrome 149+。连接时会静默地从 URL 不被允许的目标分离，并阻止运行时请求（包括导航和子资源）。接受模式数组。

--ignoreDefaultChromeArg/ --ignore-default-chrome-arg 显式禁用 Chrome 的默认参数。仅当 Chrome 由 chrome-devtools-mcp 启动时适用。类型：array 默认值：false

--ignoreDefaultChromeArg/ --ignore-default-chrome-arg 显式禁用 Chrome 的默认参数。仅当 Chrome 由 chrome-devtools-mcp 启动时适用。

--categoryEmulation/ --category-emulation 设置为 false 以排除与模拟相关的工具。类型：boolean 默认值：true

--categoryEmulation/ --category-emulation 设置为 false 以排除与模拟相关的工具。

--categoryPerformance/ --category-performance 设置为 false 以排除与性能相关的工具。类型：boolean 默认值：true

--categoryPerformance/ --category-performance 设置为 false 以排除与性能相关的工具。

--categoryNetwork/ --category-network 设置为 false 以排除与网络相关的工具。类型：boolean 默认值：true

--categoryNetwork/ --category-network 设置为 false 以排除与网络相关的工具。

--categoryExtensions/ --category-extensions 设置为 true 以包含与扩展程序相关的工具。注意：此功能目前仅支持管道连接。在 149 发布之前，此功能不支持 autoConnect、browserUrl 和 wsEndpoint。类型：boolean 默认值：false

--categoryExtensions/ --category-extensions 设置为 true 以包含与扩展程序相关的工具。注意：此功能目前仅支持管道连接。在 149 发布之前，此功能不支持 autoConnect、browserUrl 和 wsEndpoint。

--categoryExperimentalThirdParty/ --category-experimental-third-party 设置为 true 以启用被检查页面自身提供的第三方开发者工具。类型：boolean 默认值：false

--categoryExperimentalThirdParty/ --category-experimental-third-party 设置为 true 以启用被检查页面自身提供的第三方开发者工具。

--performanceCrux/ --performance-crux 设置为 false 以禁止将性能跟踪中的 URL 发送到 CrUX API 来获取真实环境性能数据。类型：boolean 默认值：true

--performanceCrux/ --performance-crux 设置为 false 以禁止将性能跟踪中的 URL 发送到 CrUX API 来获取真实环境性能数据。

--usageStatistics/ --usage-statistics 设置为 false 以选择退出使用情况统计信息收集。Google 收集