Chrome DevTools MCP：让 AI 助手掌控浏览器自动化

本文介绍 Chrome DevTools MCP，一个由 Google Chrome 团队开发的开源项目，它让 AI 编码助手能够控制和检查实时 Chrome 浏览器。该项目作为 Model-Context-Protocol (MCP) 服务器运行，为 Gemini、Claude、Cursor、Copilot 等 AI 助手提供完整的 Chrome DevTools 能力，实现可靠的浏览器自动化、深度调试和性能分析。

项目简介

Chrome DevTools MCP 是 Google Chrome 团队于 2025 年 9 月发布的开源项目，截至目前已在 GitHub 上获得超过 26,000 个星标。该项目基于 TypeScript 和 Puppeteer 构建，通过 MCP 协议将 Chrome DevTools 的强大功能暴露给 AI 编码助手。

核心特性

• 性能分析洞察：使用 Chrome DevTools 记录性能追踪并提取可操作的性能优化建议
• 高级浏览器调试：分析网络请求、截取屏幕截图、检查浏览器控制台消息（支持 source-mapped 堆栈跟踪）
• 可靠的自动化：基于 Puppeteer 实现 Chrome 操作自动化，并自动等待操作结果
• 多客户端支持：兼容 Gemini CLI、Claude Code、Cursor、VS Code Copilot、Codex 等主流 AI 工具
• 实验性功能：支持屏幕录制等实验性功能（需要 ffmpeg）

技术栈

• TypeScript - 主要开发语言
• Puppeteer - Chrome 自动化控制
• Chrome DevTools Protocol - 与浏览器通信
• MCP (Model-Context-Protocol) - AI 助手通信协议
• Node.js - 运行时环境（要求 v20.19+）

安装指南

前置要求

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

快速开始

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

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

Claude Code 安装

通过 CLI 安装（仅 MCP）：

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

Cursor 安装

点击安装按钮或手动在 Cursor Settings -> MCP -> New MCP Server 中添加配置。

VS Code 安装

使用 VS Code CLI：

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

功能工具概览

Chrome DevTools MCP 提供 26 个工具，分为 6 个类别：

输入自动化（8 个工具）

导航自动化（6 个工具）

性能分析（3 个工具）

网络监控（2 个工具）

调试工具（5 个工具）

仿真工具（2 个工具）

使用示例

基础用法：检查网站性能

在 MCP 客户端中输入：

AI 助手将自动打开浏览器，访问指定网站，并录制性能追踪报告。

高级配置示例

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

连接到运行中的 Chrome 实例

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

配置选项

隐私与安全说明

⚠️ 重要提醒：

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

2. 性能工具可能会将追踪 URL 发送到 Google CrUX API 以获取真实用户体验数据。可通过 --no-performance-crux 禁用。

3. Google 默认收集使用统计数据（工具调用成功率、延迟、环境信息），可通过 --no-usage-statistics 或设置 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 环境变量退出。

项目链接

• GitHub 仓库: https://github.com/ChromeDevTools/chrome-devtools-mcp
• NPM 包: https://npmjs.org/package/chrome-devtools-mcp
• 工具参考文档: https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md
• 故障排除指南: https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md