ChromeDevTools/chrome-devtools-mcp · 上手攻略

仓库：ChromeDevTools/chrome-devtools-mcp
链接：https://github.com/ChromeDevTools/chrome-devtools-mcp
分类：ai/coding-agent
作者：Jay
更新：2026-07-04

这是什么

chrome-devtools-mcp 是一个 MCP（Model Context Protocol）服务器，它把完整的 Chrome DevTools 能力暴露给 AI coding agent。使用时，你的 agent（Claude Code、Copilot、Cursor、Codex、OpenClaw 等）可以像人类开发者一样控制浏览器：点击、填表、截图、抓网络请求、做性能分析、调试 JS、查 heap snapshot——而这些都变成 agent 可调用的结构化工具，不再是黑盒操作。

项目由 Chrome DevTools 官方团队（ChromeDevTools）维护，构建在 Puppeteer 之上，MIT 协议。

解决什么问题

AI coding agent 在处理需要真实浏览器环境的任务时，长期是个痛点：

爬取或分析需要 JS 渲染的页面（传统 HTTP 请求拿不到内容）
做端到端的 UI 测试（agent 不知道页面长什么样）
优化网页性能（Core Web Vitals、LCP、CLS 等指标）
填表、登录、执行 JS 交互流程（agent 只能靠猜测坐标点击）
调试生产环境问题（看网络请求、console 错误）

chrome-devtools-mcp 把这些问题全部变成 MCP 工具调用：agent 通过快照（snapshot）看到页面元素结构，用 click/fill/type_text 等工具可靠地操作 DOM，不再靠像素坐标猜。

快速安装

基础依赖

Node.js LTS（建议 v20+，下同）
Chrome 稳定版（当前 stable 版本，或 Chrome for Testing）
npm

MCP 通用配置

在支持 MCP 的客户端（Claude Code、VS Code Copilot、Cursor、Warp、Cline 等）中加入以下配置：

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

⚠️ chrome-devtools-mcp@latest 每次启动会拉取最新版本。如需固定版本，将 @latest 替换为具体版本号（如 @0.3.2），生产环境推荐固定版本。

主流 IDE 安装方式

VS Code（Copilot）： - 方法一（推荐）：安装为 Agent 插件——Command Palette → "Chat: Install Plugin From Source" → 粘贴 ChromeDevTools/chrome-devtools-mcp - 方法二（手动 MCP）：VS Code 设置 → MCP Servers → 添加上面的标准配置

Claude Code：

# MCP only
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

# MCP + Skills（含专家引导）
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Cursor： Settings → MCP → New MCP Server → 填入标准配置 JSON。

OpenCode： 在 ~/.config/opencode/opencode.json 加入：

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

OpenClaw： 标准 MCP 配置路径（~/.openclaw/mcp.json 或通过 Web UI 配置），填入标准配置即可。

Slim 模式（轻量）

如果只需要基础浏览器控制，不需要性能分析、heap snapshot 等重型工具：

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

隐私/数据控制

Google 默认收集使用统计（工具调用成功率、延迟、环境信息）。关闭方法：

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

或设置环境变量：

export CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1
export CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1   # 关闭版本更新检查

核心用法

chrome-devtools-mcp 提供了 47 个工具，按功能分为七类：

输入自动化（10 个）

click / drag / fill / fill_form / hover / press_key / type_text / upload_file / click_at / handle_dialog

核心是 fill_form（一次性填写整个表单，比多次 fill 更快更可靠）：

// 示例：一次性填写登录表单
{
  "elements": [
    { "uid": "username-field-uid", "value": "user@example.com" },
    { "uid": "password-field-uid", "value": "secretpassword" },
    { "uid": "remember-me-checkbox-uid", "value": "true" }
  ]
}

导航自动化（6 个）

navigate_page / new_page / close_page / list_pages / select_page / wait_for

性能分析（3 个）

performance_start_trace / performance_stop_trace / performance_analyze_insight

录制 trace 后用 performance_analyze_insight 获取 Core Web Vitals 建议：

// 开始录制
{ "autoStop": true, "filePath": "./trace.json.gz" }
// 停止录制
{ "filePath": "./trace.json.gz" }
// 分析 insight
{ "insightSetId": "...", "insightName": "LCPBreakdown" }

⚠️ Performance tools 会向 Google CrUX API 发送 URL 以获取真实用户体验数据。使用 --no-performance-crux 禁用此行为。

网络监控（2 个）

list_network_requests / get_network_request

调试（8 个）

evaluate_script / list_console_messages / get_console_message / take_screenshot / take_snapshot / lighthouse_audit / screencast_start / screencast_stop

take_snapshot 获取当前页面 DOM 结构快照（AI agent 用来确定元素 uid）：

// 返回当前可交互元素的 uid 列表
{ }
// 返回快照后，用 uid 执行 click/fill 等操作

内存分析（11 个）

Heap snapshot 全套工具：拍摄快照、对比、查类节点、查 retainers 等，适合深度内存泄漏排查。

扩展管理（5 个）

安装、重载、触发 Chrome 扩展操作。

验证安装

在支持 MCP 的客户端里发送：

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

如果 MCP 正常工作，会自动打开 Chrome、录制 trace 并返回性能报告。

⚠️ MCP 服务器不会自动启动浏览器——只有在客户端调用需要浏览器的工具时，服务器才会启动 Chrome 实例。

典型适用场景

AI 端到端测试：让 agent 真正"看到"页面——打开应用、执行操作、截 screenshot、验证结果，而不是靠猜 CSS 选择器。
网页性能审计：让 agent 自动跑 Lighthouse + Performance trace，输出优化建议——适合 CI/CD 里自动检测性能退化。
动态内容抓取：需要 JS 渲染后才显示的内容（单页应用、SSR 页面）——agent 可以等元素出现再抓取。
自动化数据录入：定期填表类操作（OA 系统、内部工具）——agent 读懂 DOM 结构后可靠填写，不依赖坐标。
生产问题排查：把 Chrome DevTools 网络面板 + console 的信息直接给 agent，减少 DevTools 和终端之间的上下文切换。

坑与注意

仅支持 Chrome：官方只保证 Google Chrome 和 Chrome for Testing，Chromium 内核浏览器（如 Edge）可能工作但不保证，Firefox 完全不支持。
数据安全：Chrome DevTools 会暴露浏览器内所有内容（cookie、localStorage、网络请求体）给 MCP client——不要在共享机器上使用，也不要把浏览器登录状态暴露给不受信的 agent。
性能工具数据发送：performance_analyze_insight 会向 Google CrUX API 发送 URL。关闭方式：--no-performance-crux。
Usage 统计：默认开启，关闭方式如上。Google 独立收集，不受 Chrome 浏览器统计设置影响。
跨平台 Windows 问题：Windows 11 + Codex 组合需要在 .codex/config.toml 中配置 Chrome 安装路径和 startup_timeout_ms: 20_000，否则可能超时。
企业防火墙下的 Claude Code 插件安装：如果 /plugin marketplace add 报 Failed to clone repository（HTTPS 阻断），改用 CLI 安装方式 claude mcp add chrome-devtools。
Slim 模式限制：去掉 --slim 后所有 47 个工具才可用，性能分析和 heap snapshot 在 slim 模式下不可用。

与同类对比

工具	类型	特点
chrome-devtools-mcp	MCP Server	官方 DevTools，47 工具，最全面
Playwright MCP	MCP Server	专注跨浏览器自动化，无 DevTools 深度分析
Puppeteer (direct)	库	Node.js 直接调用，无 MCP 接口
Selenium	WebDriver	传统 UI 测试，agent 集成不如 MCP 方便
Firecrawl + browser-use	爬虫方案	适合爬取，不适合调试和性能分析

chrome-devtools-mcp 的核心优势是把 Chrome DevTools 完整生态变成 agent 可用的工具——性能 trace、heap snapshot、network waterfall、console 这些都是传统浏览器自动化工具不提供的维度。对 AI coding agent 来说，能"看到"并"测量"页面是质的提升。

一句话推荐结论

任何需要 AI agent 与真实浏览器交互的场景（测试、爬取、填表、性能分析）——chrome-devtools-mcp 都是最完整的解决方案，特别是当你在用 OpenClaw、Claude Code 或 VS Code Copilot 时，装上它，你的 agent 第一次能真正"看见"并"操作"网页了。