作加

AI 编程新纪元：谷歌推出 Chrome DevTools MCP，让代码助手“看见”浏览器

作者：

阿宝

谷歌最近正式推出了 Chrome DevTools MCP 的公测版本，这是一款专为 AI 编码代理打造的浏览器控制工具。借助这项新技术，AI 不仅能提供建议，还能实时操控和观察真实的 Chrome 浏览器实例，从而大幅提升调试和优化的准确性。

为什么 AI 编程需要 Chrome DevTools MCP？

目前市面上的 AI 代码助手普遍存在一个短板：它们无法真正“看到”网页在浏览器中的运行状态。这意味着，即使 AI 能写出漂亮的代码，也无法确认这些代码在真实环境中的表现。

Chrome DevTools MCP 的出现填补了这一空白。它让 AI 成为一个闭环调试器，不仅能提供建议，还能通过浏览器的调试接口运行测试、测量性能、模拟用户行为，甚至提出优化方案。

什么是 MCP？

MCP（Model Context Protocol）是一种开放协议，旨在连接大型语言模型（LLM）与各类工具和数据源。谷歌开发的 Chrome DevTools MCP 是一个专门的服务器，它通过 Chrome 的调试接口，向兼容 MCP 的 AI 编码代理开放浏览器控制能力。

简单来说，这就是在 AI 编码助手和浏览器之间架起了一座桥梁。

强大功能一览

Chrome DevTools MCP 提供了丰富的功能，包括但不限于：

  • 性能跟踪：启动性能分析、诊断加载瓶颈（如最大内容绘制问题）。
  • 用户行为模拟：点击、输入、拖拽、悬停等操作，AI 可以像真实用户一样操作页面。
  • 运行时检查：查看控制台日志、执行脚本、监控网络请求。
  • 可视化与快照：截图、捕获 DOM 状态，支持差异比较和回归测试。
  • 底层技术：基于 Puppeteer 实现自动化，通过 Chrome DevTools 协议（CDP）与浏览器通信，确保稳定性和兼容性。

安装与集成：简单高效

谷歌设计了极为便捷的安装流程。只需在配置文件中添加一段代码，即可启动 MCP 服务器：

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

该工具已经与多个 AI 编码平台集成，包括 Gemini CLI、Claude Code、Cursor 和 GitHub Copilot。开发者可以通过一行命令快速接入：

  • VS Code 用户：code --add-mcp
  • Claude Code 用户：claude mcp add

当前版本支持 Node.js ≥22 和最新版 Chrome。

实际应用场景展示

谷歌在发布说明中展示了几个典型的使用场景，充分体现了 Chrome DevTools MCP 的实用价值：

  • 验证修复建议：AI 可以在浏览器中直接运行修改后的代码，观察实际效果。
  • 调试网络问题：检测 CORS 错误、被拦截的图片请求等。
  • 模拟用户行为：自动提交表单、点击按钮，帮助重现 bug。
  • 布局问题分析：读取 DOM 和 CSS 状态，辅助修复视觉问题。
  • 性能优化：自动运行性能审核，优化页面加载速度，减少最大内容绘制时间。

结语

Chrome DevTools MCP 的发布，标志着 AI 编程助手迈入了一个新阶段——从“纸上谈兵”到“实战演练”。它不仅提升了 AI 的调试能力，也为开发者带来了更智能、更高效的开发体验。

🔗 GitHub 项目地址

🌟 实时控制
⚙️ 广泛功能支持
🚀 一键部署与多平台兼容

如果你是 AI 编程的爱好者或开发者，不妨试试 Chrome DevTools MCP，让你的代码助手真正“看懂”浏览器。

更多文章