这是 ChromeDevTools/chrome-devtools-mcp 的个人学习分支。 它添加了简单的英语教程和真实世界的演示，从零开始引导您了解该工具——无需事先了解 Chrome、DevTools、MCP 或 CLI。

新来的？从 demo-health-check/ 开始 ↓

✦ 此分支新增内容：两个端到端演示

如果 MCP 服务器、Chrome DevTools 协议、性能追踪 或 Lighthouse 等术语让您感到陌生——您并不孤单，而且您来对地方了。

此分支添加了两个独立的演示——它们总共涵盖了 29 个 chrome-devtools-mcp 工具中的 26 个。

演示 1 — demo-health-check/ — 网站健康审计 (CNN.com)

演示 2 — demo-shopping/ — 代理购物工作流 (saucedemo.com)

一个 AI 代理自主运行完整的电子商务购买流程：登录 → 浏览 → 多标签页比较 → 购物车 → 移动端模拟 → 结账 → 订单确认。涵盖了演示 1 中未使用的 18 个交互工具。

您还能用它构建什么？ → use-cases.md

涵盖 QA、性能、SEO、电子商务、研究、安全和个人生产力的 50 多个代理工作流——以及每个工作流使用的特定工具，以及为什么 CDP 优于替代方案。

该工具的实际功能

chrome-devtools-mcp 使您的 AI 助手（Claude、Gemini、Cursor、Copilot……）能够控制和检查真实的 Chrome 浏览器。AI 不仅仅是读取和写入文本文件，还可以：

• 打开网页并截取屏幕截图

• 像屏幕阅读器一样读取页面结构

• 收集实时控制台错误和网络请求

• 运行 Lighthouse 审计（可访问性、SEO、最佳实践）

• 记录性能追踪并测量核心网页指标 (LCP, CLS, INP)

您通过简单的英语与它交互——“检查此页面的性能”——AI 会计算出要调用 29 个工具中的哪一个。

无需经验

该演示专为从未打开过 Chrome DevTools、从未使用过 MCP 服务器且刚开始使用 AI 编码助手的人设计。每个概念在被使用之前都从第一性原理进行了说明。

Chrome DevTools MCP

chrome-devtools-mcp 让您的编码代理（如 Gemini、Claude、Cursor 或 Copilot）能够控制和检查实时 Chrome 浏览器。它充当模型上下文协议 (MCP) 服务器，使您的 AI 编码助手能够访问 Chrome DevTools 的全部功能，以实现可靠的自动化、深入的调试和性能分析。

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

主要功能

• 获取性能洞察：使用 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", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google 根据 Google 隐私政策 处理此数据。

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

如果设置了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 或 CI 环境变量，则禁用收集。

要求

• Node.js v20.19 或更新的 最新维护 LTS 版本。

• Chrome 当前稳定版本或更新版本。

• npm

入门

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

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

如果您只对执行基本的浏览器任务感兴趣，请使用 --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": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222",
        "-y"
      ]
    }
  }
}

这将使 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 + 技能）

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

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

然后，安装插件：

/plugin install chrome-devtools-mcp

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

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

启动 Copilot CLI：

copilot

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

/mcp add

配置以下字段并按 CTRL+S 保存配置：

• 服务器名称： chrome-devtools

• 服务器类型： [1] Local

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

单击按钮进行安装：

或手动安装：

遵循 MCP 安装 指南，使用上面的标准配置。您还可以使用 VS Code CLI 安装 Chrome DevTools MCP 服务器：

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

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