谷歌 AI 推出 Chrome DevTools MCP 公测版:赋能编码代理控制实时浏览器

发布时间：2026-11-12 来源：人文荟萃网 作者：团队建设

谷歌最近发布了 “Chrome DevTools MCP” 的公测版，这是一种模型上下文协议（MCP）服务器，能够让 AI 编码代理控制和检查真实的 Chrome 浏览器实例。该工具可以记录性能数据、检查 DOM 和 CSS、执行 JavaScript谷歌、读取控制台输出以及自动化用户流程。

这一发布直击代码生成代理的一个普遍局限性:它们通常无法观察所创建或修改页面的运行时行为。通过将代理与 Chrome 的 DevTools 连接，谷歌将静态建议引擎转变为能够在浏览器中运行测量并提出修复 A建议的闭环调试器。

Chrome DevTools MCP 究竟是什么?  

MCP 是一种连接大型语言模型（LLM）与工具和数据的开放协议。谷歌的 DevTools MCP 作为一个专门的服务器，向兼容 MCP 的客户端开放 ChromeI 的调试界面。谷歌开发者博客将其描述为 “将 Chrome DevTools 的强大功能带给 AI 编码助手”，并提供了如启动性能跟踪(例如 performance_start_trace)并让代理分析结果以提出优化建议(例如诊断高最大内容绘制推出)等具体工作流。

功能与工具  

官方的 GitHub 仓库列出了广泛的工具集。除了性能跟踪，代理还可以运行导航原语（如 navigate_page、new_page、wait_for）、模拟用户输入(如 click、fill C、drag、hover)，以及检查运行时状态(如 list_console_messages、evaluate_script、list_network_requests、get_network_request)。截图和快照工具提供了可视化hr和 DOM 状态捕捉，支持差异比较和回归测试。该服务器在底层使用 Puppeteer 实现可靠的自动化和等待语义，并通过 Chrome DevTools 协议(CDP)与 Chrome 进行通信。

安装过程  

MCP 客户端的设置om非常简单。谷歌建议只需添加一个配置段，通过 npx 跟踪最新的服务器构建:

json

{

  "mcpServers": {

    "chrome-devtools": {

  &ne bsp;   "command": "npx"，

      "args": ["chrome-devtools-mcp@latest"]

    }

  }

}

该服务器与多个代理前端集成:De如 Gemini CLI、Claude Code、Cursor 以及 GitHub Copilot 的 MCP 支持。对于 VS Code/Copilot，仓库提供了一个 code --add-mcp 的一行命令;对于 Claude Code，则通过 claude mcvTp add 命令进行相同的 npx 目标调用。该包的目标是 Node.js ≥22和当前版本的 Chrome。

示例代理工作流  

谷歌的公告突出了显示端到端循环的实用提示:在实时浏览器中验证建议的修复、分析网络故障（如 CORS 或被oo阻止的图像请求）、模拟用户行为如表单提交以重现错误、通过读取 DOM/CSS 上下文检查布局问题，以及运行自动化性能审核以减少最大内容绘制等。这些都是代理现在可以通过实际测量而非启发式验证的操作。

github：https://githlsub.com/ChromeDevTools/chrome-devtools-mcp

划重点:  

** 实时控制 **:谷歌的 Chrome DevTools MCP 允许 AI 代理控制和检查真实的 Chrome 浏览器。  M; 

️ ** 广泛功能 **:支持性能跟踪、用户输入模拟及运行时状态检查等多种功能。  

** 简便安装 **:用户只需简单配置，即可快速部署 MCP 服务器并集成至多种开发工具中。

相关文章