Chrome DevTools MCP 是一款让 AI 编程助手直接控制 Chrome 浏览器的工具，通过 MCP 协议为 Claude Code、Cursor、Copilot 等主流 IDE 提供截图、网络分析、性能追踪和自动化操作能力，支持无头模式和全面调试。
🎤 引言
现在的 AI 编程助手已经挺能打了——写代码、Debug、解释代码都能行。但一到前端领域就抓瞎：看不见页面长啥样，分析不了网络请求，Debug 浏览器问题只能靠猜。
Chrome DevTools MCP 就是来解决这个问题的。它是一个基于 Model Context Protocol 的服务器，让 AI 编程助手直接控制 Chrome 浏览器。截图、网络分析、性能追踪、自动化操作——全都能干。
目前支持 Claude Code、Cursor、Copilot、Codex、Gemini CLI 等主流工具，GitHub 41 Stars，Google 官方出品。
⭐ 核心功能
1. 性能分析与追踪
直接调用 Chrome DevTools 的底层能力，记录性能追踪并提取可操作的性能洞察。配合 CrUX 真实用户数据，帮你看清楚页面在实际用户手中的表现。
2. 高级浏览器调试
- 网络请求分析：查看请求头、响应、内容
- 截图：完整页面或特定区域
- 控制台消息：支持 source-mapped 堆栈追踪
3. 可靠自动化
基于 Puppeteer 实现自动化操作，自动等待 Action 结果，不用担心时序问题。
4. MCP 协议深度集成
不只是工具，更是Skills。Copilot/VS Code 可以一键安装插件（ MCP server + Skills 打包），Claude Code 可以通过 marketplace 安装，Gemini CLI 支持扩展模式。
📥 安装使用
前置要求
- Node.js LTS
- Chrome stable（最新版或更新）
- npm
基础配置（MCP）
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Claude Code 安装（Skill + MCP）
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins轻量模式（仅基础自动化，无性能工具）
{
"mcpServers": {
"chrome-devtools": {
"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
}
}
}常用参数
--headless：无头模式，服务器环境必备--no-performance-crux：禁用 CrUX API 查询--no-usage-statistics：禁用 Google 遥测--browser-url：连接远程浏览器（非本地）
🎯 适用场景
- 前端 Debug：让 AI 直接看页面截图，分析网络请求，找出问题
- 自动化测试：Puppeteer 驱动，AI 可执行复杂操作序列
- 性能优化：AI 读取性能追踪数据，给出优化建议
- 网页数据采集：自动化抓取动态页面内容
⚠️ 注意事项
⚠️ 安全提示：MCP 客户端可以访问浏览器所有内容，避免共享敏感个人信息。
仅官方支持 Google Chrome 和 Chrome for Testing，其他 Chromium 浏览器可能有问题。
性能工具默认会发送数据到 Google CrUX API（真实用户性能数据），介意的话加 --no-performance-crux 参数。
Usage statistics 默认开启，可通过 --no-usage-statistics 或设置 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS / CI 环境变量关闭。
✅ 总结
| 维度 | 评分 |
|---|---|
| 功能完整性 | ⭐⭐⭐⭐⭐ |
| IDE 支持广度 | ⭐⭐⭐⭐⭐（主流全覆盖） |
| 文档质量 | ⭐⭐⭐⭐（官方出品） |
| 生产可用性 | ⭐⭐⭐⭐（Google 维护） |
| 上手难度 | ⭐⭐⭐（配置略复杂） |
适合人群：前端开发者、AI 编程助手重度用户、需要自动化浏览器操作的同学。
安装建议：VS Code/Copilot 用户推荐用插件方式安装，一步到位。MCP 协议标准兼容，其他客户端也都能用。