产品简介
Chrome DevTools MCP 是 **Google Chrome DevTools 团队官方开源**的一个 MCP（Model Context Protocol）Server，**2026/5 正式发布**。核心作用是把 Chrome 浏览器的 **DevTools Protocol（CDP）** 封装成 MCP 标准接口，让 AI 编程 Agent（Claude Code、Cursor、Copilot、Antigravity 等）**原生控制并检查实时运行的 Chrome 浏览器**——不再是「让 AI 写好代码你去手动测」，而是「AI 自己打开浏览器、点击、填表、截图、抓请求、执行 JS、看控制台报错、自己调试」。
**为什么这是 2026 年前端 AI 编程的关键基础设施**：
- **官方 Google 出品**：不是社区第三方项目，是 Chrome DevTools 团队官方维护，权威性与稳定性有保障（GitHub 仓库：ChromeDevTools/chrome-devtools-mcp）
- **补齐 AI 编程的最后一环**：之前的 AI 编程 Agent 会写代码但不会「跑起来看效果」，Chrome DevTools MCP 让 Agent 具备真实浏览器环境的调试能力
- **兼容主流 MCP 客户端**：Claude Code、Cursor、Copilot、Antigravity 开箱即用，只需在 MCP 配置中加入即可
- **能力完整**：截图、点击、填表、执行 JS、抓取网络请求、读取 DOM、监听控制台日志、Performance 分析等 DevTools 全套能力都可通过 MCP 调用
**典型工作流示例**：让 Claude Code 修一个前端 bug——Agent 通过 Chrome DevTools MCP 打开你的本地开发服务器 → 截图看当前渲染效果 → 抓控制台报错 → 定位到具体代码 → 修改文件 → 让 MCP 刷新页面重新截图验证。整个过程无需人工介入。
这标志着 AI 编程 Agent 正式进入「能看到自己代码效果」的时代。
核心功能
- Google 官方出品：Chrome DevTools 团队官方维护，权威性与稳定性有保障
- MCP 标准协议：使用 Anthropic 2024 年推出的 MCP 协议，兼容 Claude Code / Cursor / Copilot / Antigravity 等主流 AI 编程工具
- 浏览器控制全能力：截图、点击、填表、执行 JS、抓请求、读 DOM、控制台日志、Performance 分析
- 实时调试而非静态分析：AI Agent 能在真实运行的浏览器里看到代码效果，不是纸上谈兵
- 本地开发友好：对接本地开发服务器（localhost）零配置，前端开发流程无缝集成
- 开源免费：MIT 协议开源，GitHub 仓库 ChromeDevTools/chrome-devtools-mcp
适合谁用
以下类型的用户会特别受益于 Chrome DevTools MCP：
- 前端 AI 编程：让 Agent 自主调试 UI bug
- 网页自动化测试：让 Agent 编写并执行 E2E 测试用例
- 网页数据抓取：让 Agent 直接从页面拉取数据
- 性能调优：让 Agent 用 DevTools Performance 面板分析瓶颈
- 浏览器兼容性测试：多标签页多环境并行测试
- 无头浏览器场景的 AI Agent 集成（服务端渲染 / SEO 检测）
优点亮点
- Google 官方出品，权威性与长期维护有保障
- MCP 标准协议，兼容所有主流 AI 编程工具，无生态锁定
- 补齐 AI 编程「不会看效果」这一关键短板
- 本地开发零配置，前端开发者上手门槛极低
- 开源免费，可完全私有部署
- 覆盖 DevTools 全套能力，不阉割
价格与方案
**完全免费**：MIT 协议开源，GitHub 直接获取（`ChromeDevTools/chrome-devtools-mcp`）。npm 安装：`npm install -g chrome-devtools-mcp`。配置到你的 MCP 客户端（Claude Code / Cursor 等）即可使用，无任何额外成本。
总结与建议
Chrome DevTools MCP 是 **2026 年前端 AI 编程绕不开的基础设施**——让 AI Agent 从「写代码」升级到「真的能在浏览器里跑起来自己调试」。如果你用 Claude Code / Cursor / Copilot 做前端开发，配上 Chrome DevTools MCP 相当于给 AI 装上了「眼睛和手」。Google 官方出品的稳定性 + MCP 生态的通用性 + 开源免费，几乎没有拒绝的理由。搭配 Playwright MCP、Puppeteer MCP 等其它浏览器 MCP 一起用，可以构建完整的 AI 前端开发+测试工作流。
版本演进
- 官方 GA 版发布 （2026-05）：Chrome DevTools 团队官方正式发布 chrome-devtools-mcp，提供完整 DevTools 能力的 MCP 封装；兼容 Claude Code / Cursor / Copilot / Antigravity 等主流 AI 编程工具
- 早期测试版 （2025-09）：GitHub 仓库 ChromeDevTools/chrome-devtools-mcp 首次公开，早期开发者社区试用