探索未来：谷歌 AI 带来 Chrome DevTools MCP 公测，革新实时浏览器编码管理

发布时间：2025-09-24 17:07:48 | 责任编辑：吴昊 | 浏览量：9 次

谷歌最近发布了 “Chrome DevTools MCP” 的公测版，这是一种模型上下文协议（MCP）服务器，能够让 AI 编码代理控制和检查真实的 Chrome 浏览器实例。该工具可以记录性能数据、检查 DOM 和 CSS、执行 JavaScript、读取控制台输出以及自动化用户流程。
这一发布直击代码生成代理的一个普遍局限性:它们通常无法观察所创建或修改页面的运行时行为。通过将代理与 Chrome 的 DevTools 连接，谷歌将静态建议引擎转变为能够在浏览器中运行测量并提出修复建议的闭环调试器。
Chrome DevTools MCP 究竟是什么?
MCP 是一种连接大型语言模型（LLM）与工具和数据的开放协议。谷歌的 DevTools MCP 作为一个专门的服务器，向兼容 MCP 的客户端开放 Chrome 的调试界面。谷歌开发者博客将其描述为 “将 Chrome DevTools 的强大功能带给 AI 编码助手”，并提供了如启动性能跟踪(例如 performance_start_trace)并让代理分析结果以提出优化建议(例如诊断高最大内容绘制)等具体工作流。
功能与工具
官方的 GitHub 仓库列出了广泛的工具集。除了性能跟踪，代理还可以运行导航原语（如 navigate_page、new_page、wait_for）、模拟用户输入(如 click、fill、drag、hover)，以及检查运行时状态(如 list_console_messages、evaluate_script、list_network_requests、get_network_request)。截图和快照工具提供了可视化和 DOM 状态捕捉，支持差异比较和回归测试。该服务器在底层使用 Puppeteer 实现可靠的自动化和等待语义，并通过 Chrome DevTools 协议(CDP)与 Chrome 进行通信。
安装过程
MCP 客户端的设置非常简单。谷歌建议只需添加一个配置段，通过 npx 跟踪最新的服务器构建:
json
{
"mcpServers": {
"chrome-devtools": {
"command": "npx"，
"args": ["chrome-devtools-mcp@latest"]
}
}
}
该服务器与多个代理前端集成:如 Gemini CLI、Claude Code、Cursor 以及 GitHub Copilot 的 MCP 支持。对于 VS Code/Copilot，仓库提供了一个 code --add-mcp 的一行命令;对于 Claude Code，则通过 claude mcp add 命令进行相同的 npx 目标调用。该包的目标是 Node.js ≥22和当前版本的 Chrome。
示例代理工作流
谷歌的公告突出了显示端到端循环的实用提示:在实时浏览器中验证建议的修复、分析网络故障（如 CORS 或被阻止的图像请求）、模拟用户行为如表单提交以重现错误、通过读取 DOM/CSS 上下文检查布局问题，以及运行自动化性能审核以减少最大内容绘制等。这些都是代理现在可以通过实际测量而非启发式验证的操作。
github：https://github.com/ChromeDevTools/chrome-devtools-mcp
划重点:
🌟 ** 实时控制 **:谷歌的 Chrome DevTools MCP 允许 AI 代理控制和检查真实的 Chrome 浏览器。
⚙️ ** 广泛功能 **:支持性能跟踪、用户输入模拟及运行时状态检查等多种功能。
🚀 ** 简便安装 **:用户只需简单配置，即可快速部署 MCP 服务器并集成至多种开发工具中。