谷歌近期正式推出 “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 进行高效通信。
安装过程设计得极为便捷。谷歌建议用户只需添加一行配置代码，通过 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 上下文检查布局问题，以及运行自动化性能审核以减少最大内容绘制等。这些操作现在都可通过实际测量而非启发式验证完成，大幅提升了开发效率。
划重点：
🌟 ** 实时控制 **：谷歌的 Chrome DevTools MCP 允许 AI 代理对真实 Chrome 浏览器进行精细控制和全面检查
⚙️ ** 广泛功能 **：全面支持性能跟踪、用户输入模拟、运行时状态检查等多元化功能
🚀 ** 简便安装 **：用户只需简单配置即可快速部署 MCP 服务器，并轻松集成至多种开发工具中
github：https://github.com/ChromeDevTools/chrome-devtools-mcp
