Chrome DevTools MCP 是 Google Chrome 团队官方推出的 Model Context Protocol (MCP) 服务器，让 AI 编码助手能够直接控制、检查和调试 Chrome 浏览器。项目上线以来迅速积累 41,000+ Stars，成为 AI 编码工具链中浏览器自动化领域的事实标准。
项目介绍
Chrome DevTools MCP 解决了 AI 编码助手的一个核心痛点：AI 可以生成代码，但无法验证它在浏览器中实际运行的效果。传统的 AI 编码工具只能看到静态代码，而无法进行交互式调试、性能分析和视觉验证。
该项目作为 MCP 服务器运行，将 Chrome DevTools 的全部能力以工具接口的形式暴露给 AI 编码助手。这意味着：
- Claude Code、Codex、Cursor 等 AI 工具可以直接打开 Chrome 浏览器
- 实时查看页面渲染效果、网络请求和 Console 输出
- 进行性能分析、内存快照和 Lighthouse 审计
- 自动完成元素交互、表单填写和截图比对
核心功能
项目提供 45+ 个工具，分为十大类别：
输入自动化（10个工具）： click、drag、fill、fill_form、hover、press_key、type_text、upload_file 等——覆盖所有浏览器交互场景。
导航（6个工具）： navigate_page、list_pages、close_page、new_page、select_page、wait_for——支持多标签页管理。
性能分析（3个工具）： performance_start_trace、performance_stop_trace、performance_analyze_insight——基于 Chrome DevTools 的 Trace 事件进行深入性能诊断。
调试（8个工具）： evaluate_script、get_console_message、take_screenshot、take_snapshot、lighthouse_audit 等——从截图到堆快照，覆盖全链路调试。
网络分析（2个工具）： list_network_requests、get_network_request——查看所有网络请求的详细信息。
模拟（2个工具）： emulate（设备模拟）、resize_page（窗口大小调整）。
内存分析（5个工具）： take_heapsnapshot、get_heapsnapshot_class_nodes、get_heapsnapshot_details、get_heapsnapshot_retainers、get_heapsnapshot_summary——JS 堆内存的全方位分析。
快速上手
安装和使用极其简单，只需在 MCP 客户端配置文件中添加：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
对于简单的自动化场景，可以使用 Slim 模式（仅含 3 个基础工具）：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
}
}
}
配置完成后，向 AI 编码助手提问：“帮我检查一下 https://example.com 的性能"或"截取当前页面的屏幕截图”，AI 就能自动打开浏览器执行操作并返回结果。
类似项目对比
| 项目 | 定位 | 区别 |
|---|---|---|
| Chrome DevTools MCP | Google 官方，完整 DevTools 能力 | 45+ 工具，涵盖调试/性能/网络/内存全维度 |
| Playwright MCP | 微软 Playwright 的 MCP 封装 | 更侧重端到端测试，DevTools 能力较弱 |
| Puppeteer | Google 维护的浏览器自动化库 | 需要编写代码，不是 MCP 协议，无法被 AI Agent 直接调用 |
| Browserbase | 云端无头浏览器服务 | 托管服务，不是本地开源方案 |
结合 AI 编码趋势的分析
Chrome DevTools MCP 的火爆反映了 AI 编码工具链的一个重要演进方向：从"代码生成"到"代码验证"的闭环。
2025 年，AI 编码工具的核心能力是生成代码。但生成只是第一步——生成的代码是否正确、性能如何、UI 是否美观，需要一个自动化的验证环节。Chrome DevTools MCP 恰好填补了这一空白：
-
前端开发自动化： AI 生成 UI 代码后，可以自动打开浏览器验证渲染效果，截图回传，形成"生成→验证→修正"的闭环。
-
端到端测试智能化： 传统 E2E 测试需要手工编写脚本，现在 AI 可以直接用自然语言描述测试步骤，让 Chrome DevTools MCP 自动执行。
-
性能回归预防： CI/CD 流水线中可以集成性能分析工具，每次部署后自动获取性能指标，防止性能退化。
-
MCP 生态的标准化信号： Google 官方推出 MCP 服务器，是对 MCP 协议作为 AI 工具调用标准的有力背书。当 Chrome（全球使用率最高的浏览器）以 MCP 接口开放自身能力时，MCP 作为 AI Agent 工具协议的事实标准地位已无可撼动。
项目亮点
该项目由 Chrome DevTools 团队官方维护（90 位贡献者、50 个版本发布），意味着它与 Chrome 浏览器本身的 DevTools 功能保持同步更新。使用了 Chrome 的 CrUX 真实用户监控数据来提供性能基准对比，这是其他第三方工具无法获得的独特数据优势。