chrome-devtools-mcp

一款由 Google 开发的 MCP 服务器，允许 AI 编码助手（如 Claude、Gemini、Cursor）通过 Puppeteer 和 Chrome DevTools Protocol 实时控制 Chrome 浏览器，进行自动化测试、性能分析和前端调试。

项目简介#

chrome-devtools-mcp 是由 Google LLC 推出的开源项目，通过 Model-Context-Protocol (MCP) 标准协议，将 Chrome DevTools 的强大能力暴露给 AI 编码智能体。

核心价值：打破 AI 模型与浏览器环境之间的隔阂，AI 不再仅依赖用户粘贴的代码片段或截图来"盲目"诊断问题，而是能够直接"看"到浏览器的控制台日志、网络请求、DOM 结构和性能追踪数据，并能执行点击、导航等操作。

功能特性#

工具集合（26个工具，6个类别）#

1. 输入自动化（8个工具）

click: 点击元素
drag: 拖拽操作
fill / fill_form: 填写输入框/表单
handle_dialog: 处理 JavaScript 对话框
hover: 悬停
press_key: 按键输入
upload_file: 文件上传

2. 导航自动化（6个工具）

navigate_page: 导航至 URL
new_page / close_page: 新建/关闭标签页
list_pages / select_page: 列出/选择当前活动页面
wait_for: 等待特定条件（如元素出现、网络空闲）

3. 调试与检查（5个工具）

take_screenshot: 全页或元素截图
take_snapshot: 获取页面 DOM 快照
list_console_messages / get_console_message: 读取浏览器控制台日志（支持 Source Map 还原堆栈）
evaluate_script: 在页面上下文执行 JavaScript

4. 网络分析（2个工具）

list_network_requests: 列出网络请求
get_network_request: 获取特定请求的详情（Headers、Payload、Response）

5. 性能洞察（3个工具）

performance_start_trace / performance_stop_trace: 开始/停止性能追踪
performance_analyze_insight: 分析追踪数据，提取 Core Web Vitals (LCP, CLS, INP) 及优化建议

6. 环境仿真（2个工具）

emulate: 模拟设备或网络条件
resize_page: 调整视窗大小

核心能力#

性能洞察: 使用 Chrome DevTools 记录追踪并提取可操作的性能洞察
高级浏览器调试: 分析网络请求、截图、检查浏览器控制台消息（包含源映射堆栈跟踪）
可靠自动化: 使用 Puppeteer 自动化 Chrome 中的操作并自动等待操作结果
集成 Google CrUX API: 提供实时用户体验数据

系统要求#

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

快速开始#

标准 MCP 配置#

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

主要客户端安装方法#

Claude Code CLI:

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

Gemini CLI:

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

VS Code CLI:

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

配置选项#

连接模式#

--autoConnect: 自动连接到运行中的 Chrome 实例（Chrome 144+）
--browserUrl: 连接到指定 URL 的 Chrome 实例（如 http://127.0.0.1:9222）
--wsEndpoint: 通过 WebSocket 端点连接

浏览器控制#

--headless: 无头模式运行
--channel: 指定 Chrome 通道（stable/beta/canary）
--executablePath: 自定义 Chrome 可执行文件路径
--isolated: 使用临时用户数据目录

高级配置示例#

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

设计原则#

Agent-Agnostic API: 使用 MCP 标准，不锁定特定 LLM
Token-Optimized: 返回语义摘要而非大量 JSON 数据
Small, Deterministic Blocks: 提供可组合的工具
Self-Healing Errors: 返回包含上下文和修复建议的可操作错误
Human-Agent Collaboration: 输出既机器可读又人类可读

适用场景#

自主前端调试: AI 分析页面崩溃、网络错误和控制台异常
端到端测试: AI 编写并执行 E2E 测试流程
性能审计: 自动检测 Core Web Vitals 并提出改进方案
视觉回归: 通过截图和快照功能对比页面状态