chrome-devtools-mcp

作为 MCP 服务器，让 AI 编码助手（如 Gemini、Claude、Cursor）直接操控 Chrome DevTools 进行浏览器自动化、调试和性能分析。亮点是 Google 官方出品，预置丰富的工具集（输入模拟、网络、性能、内存等），且与主流 MCP 客户端开箱即用。数据收集默认开启，可 opt-out。

README

Chrome DevTools for Agents（代理版 Chrome 开发者工具）

Chrome DevTools for Agents (chrome-devtools-mcp) 让你的编码代理（如 Gemini、Claude、Cursor 或 Copilot）能够控制和检查正在运行的 Chrome 浏览器。它充当一个 Model-Context-Protocol (MCP) 服务器，为你的 AI 编码助手提供完整的 Chrome DevTools 能力，以实现可靠的自动化工、深入的调试和性能分析。同时提供了一个CLI 用于无需 MCP 的场景。

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

主要特性

获取性能洞察：使用 Chrome DevTools 录制 trace 并提取可操作的性能洞察。
高级浏览器调试：分析网络请求、截图并检查浏览器控制台消息（带有 source-mapped 堆栈跟踪）。
可靠的自动化：使用 puppeteer 在 Chrome 中执行操作，并自动等待操作结果。

免责声明

chrome-devtools-mcp 会将浏览器实例的内容暴露给 MCP 客户端，允许它们检查、调试和修改浏览器或 DevTools 中的任何数据。避免共享你不希望与 MCP 客户端共享的敏感或个人信息。

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

性能工具可能会将 trace URL 发送到 Google CrUX API，以获取真实用户体验数据。这有助于通过在场数据（field data）旁边呈现实验室数据（lab data）来提供全面的性能视图。这些数据由 Chrome 用户体验报告 (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 环境变量来禁用这些更新检查。

要求

Node.js v20.19 或更新的最新维护 LTS 版本。
Chrome 当前稳定版或更新版本。
npm

快速开始

将以下配置添加到你的 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": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222",
        "-y"
      ]
    }
  }
}

这将使 Chrome DevTools MCP 服务器自动连接到 Antigravity 正在使用的浏览器。如果你没有使用端口 9222，请确保相应调整。

使用此方法时，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 + Skills）

[!NOTE] 如果你之前已为 Claude Code 安装过 Chrome DevTools MCP，请确保先从安装文件和配置文件中移除它。

要在 Claude Code 中安装带 skills 的 Chrome DevTools MCP，请添加市场注册表：

/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 安装方法。

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 并添加以下 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

使用 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 服务器 和所有 skills 捆绑在一起，使你的代理既拥有工具，也拥有有效使用它们所需的专家指导。

打开 命令面板（macOS 上为 Cmd+Shift+P，Windows/Linux 上为 Ctrl+Shift+P）。
搜索并运行 Chat: Install Plugin From Source 命令。
粘贴我们的仓库 URL：https://github.com/ChromeDevTools/chrome-devtools-mcp

就这样！你的代理现在已拥有 Chrome DevTools 能力的增强。

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

点击按钮安装：

或者手动安装：

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

点击按钮安装：

或者手动安装：

进入 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 服务器。

项目范围：

# 仅 MCP：
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# 或作为 Gemini 扩展（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 指南，使用上面的标准配置。 JetBrains AI Assistant & 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：

连接 URL： 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

点击按钮安装：

Warp

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

Windsurf 按照配置 MCP 指南，使用上面的标准配置。

你的第一条提示

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

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

你的 MCP 客户端应该会打开浏览器并录制性能 trace。

[!NOTE] MCP 服务器会在 MCP 客户端使用需要浏览器实例运行的工具时自动启动浏览器。单独连接到 Chrome DevTools MCP 服务器不会自动启动浏览器。

工具

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

输入自动化（10 个工具）
- click
- drag
- fill
- fill_form
- handle_dialog
- hover
- press_key
- type_text
- upload_file
- click_at
导航自动化（6 个工具）
模拟（2 个工具）
- emulate
- resize_page
性能（3 个工具）
网络（2 个工具）
- get_network_request
- list_network_requests
调试（8 个工具）
内存（4 个工具）
扩展（5 个工具）
第三方（2 个工具）
- 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 参数标识的用户数据目录（默认 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
--wsEndpoint/ --ws-endpoint, -w 用于连接到正在运行的 Chrome 实例的 WebSocket 端点（例如 ws://127.0.0.1:9222/devtools/browser/）。替代 --browserUrl。
- 类型： string
--wsHeaders/ --ws-headers WebSocket 连接的自定义请求头，JSON 格式（例如 '{"Authorization":"Bearer token"}'）。仅与 --wsEndpoint 一起使用。
- 类型： string
--headless 是否以无界面模式运行。
- 类型： boolean
- 默认值： false
--executablePath/ --executable-path, -e 自定义 Chrome 可执行文件的路径。
- 类型： string
--isolated 如果指定，创建一个临时用户数据目录，该目录在浏览器关闭后会自动清理。默认为 false。
- 类型： boolean
--userDataDir/ --user-data-dir Chrome 用户数据目录的路径。默认为 $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE
- 类型： string
--channel 指定应使用的不同 Chrome 频道。默认为稳定版频道。
- 类型： string
- 可选值： canary、dev、beta、stable
--logFile/ --log-file 用于写入调试日志的文件路径。将环境变量 DEBUG 设置为 * 以启用详细日志。可用于提交错误报告。
- 类型： string
--viewport 服务器启动的 Chrome 实例的初始视口大小。例如 1280x720。在 headless 模式下，最大尺寸为 3840x2160 像素。
- 类型： string
--proxyServer/ --proxy-server Chrome 的代理服务器配置，在启动浏览器时作为 --proxy-server 传递。详情请参阅 https://www.chromium.org/developers/design-documents/network-settings/。
- 类型： string
--acceptInsecureCerts/ --accept-insecure-certs 如果启用，忽略与自签名和过期证书相关的错误。请谨慎使用。
- 类型： boolean
--experimentalVision/ --experimental-vision 是否启用基于坐标的工具，如 click_at(x,y)。通常需要一个能够通过查看截图产生精确坐标的 computer-use 模型。
- 类型： boolean
--experimentalScreencast/ --experimental-screencast 暴露实验性的屏幕录制工具（需要 ffmpeg）。安装 ffmpeg https://www.ffmpeg.org/download.html 并确保它在 MCP 服务器的 PATH 中。
- 类型： boolean
--experimentalFfmpegPath/ --experimental-ffmpeg-path ffmpeg 可执行文件的路径，用于屏幕录制。
- 类型： string
--categoryExperimentalWebmcp/ --category-experimental-webmcp 设置为 true 以启用调试 WebMCP 工具。需要 Chrome 149+ 并启用以下标志：--enable-features=WebMCPTesting,DevToolsWebMCPSupport
- 类型： boolean
--chromeArg/ --chrome-arg Chrome 的附加参数。仅当 Chrome 由 chrome-devtools-mcp 启动时适用。
- 类型： array
--ignoreDefaultChromeArg/ --ignore-default-chrome-arg 显式禁用 Chrome 的默认参数。仅当 Chrome 由 chrome-devtools-mcp 启动时适用。
- 类型： array
--categoryEmulation/ --category-emulation 设置为 false 以排除与模拟相关的工具。
- 类型： boolean
- 默认值： true
--categoryPerformance/ --category-performance 设置为 false 以排除与性能相关的工具。
- 类型： boolean
- 默认值： true
--categoryNetwork/ --category-network 设置为 false 以排除与网络相关的工具。
- 类型： boolean
- 默认值： true
--categoryExtensions/ --category-extensions 设置为 true 以包含与扩展相关的工具。注意：此功能目前仅支持管道连接。在 149 发布之前，不支持 autoConnect、browserUrl 和 wsEndpoint。
- 类型： boolean
- 默认值： false
--categoryExperimentalThirdParty/ --category-experimental-third-party 设置为 true 以启用被检查页面本身暴露的第三方开发者工具。
- 类型： boolean
- 默认值： false
--performanceCrux/ --performance-crux 设置为 false 以禁用将性能 trace 的 URL 发送到 CrUX API 获取场性能数据。
- 类型： boolean
- 默认值： true
--usageStatistics/ --usage-statistics 设置为 false 以选择退出使用统计信息收集。Google 会收集使用数据以改进工具，根据 Google 隐私政策（https://policies.google.com/privacy）处理。这与 Chrome 浏览器指标无关。如果设置了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 或 CI 环境变量，则禁用。
- 类型： boolean
- 默认值： true
--slim 暴露一组“精简”的 3 个工具，仅涵盖导航、脚本执行和截图。适用于基本浏览器任务。
- 类型： boolean
--redactNetworkHeaders/ --redact-network-headers 如果为 true，则在返回给客户端之前对某些被视为敏感的请求头进行编辑。
- 类型： 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 查看所有可用的配置选项。

概念

用户数据目录

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 需要登录网站时。某些

开源项目ChromeDevTools2026-05-09原文

打开互动版

chrome-devtools-mcp

README

Chrome DevTools for Agents（代理版 Chrome 开发者工具）

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

主要特性

免责声明

使用统计

更新检查

要求

快速开始

MCP 客户端配置

你的第一条提示

工具

配置

通过 WebSocket 带自定义请求头连接

概念

用户数据目录

连接到正在运行的 Chrome 实例

相关内容

warp

sim

superpowers

skills

skills