利用 Chrome 开发者工具(适用于智能体 1.0)简化 AI 编码工作流程

发布时间:2026 年 5 月 19 日

AI 编码工具在编写代码方面非常强大,但它们通常与代码的执行脱节。它们可以生成复杂的 Web 应用,但无法在实时浏览器中观察其行为或检查其输出。

适用于智能体的 Chrome 开发者工具为您的编码智能体提供了实时验证、调试和优化代码所需的可见性。几个月前,我们首次展示了该工具,现在很高兴地宣布,适用于智能体的 Chrome 开发者工具现已作为稳定的 1.0 版本发布。

将智能体连接到浏览器

适用于智能体的 Chrome 开发者工具可让您的智能体像真实用户一样体验您的网站。此稳定版本包含多种方式,供您和您的智能体与 Chrome 进行交互:

  • Model Context Protocol (MCP) 服务器:一种将大型 语言模型 (LLM) 连接到开发者工具调试功能的服务器。
  • 命令行界面 (CLI):一种节省令牌的替代方案,可让 智能体将操作批量处理到脚本中。
  • 智能体技能:专家说明,用于教导您的智能体如何以及何时 使用特定工具来执行无障碍功能或性能调试等任务。

自动调试、模拟和审核

在 1.0 版本中,您的编码智能体现在可以执行以前需要手动执行的高级调试任务。

自动执行质量审核

您的智能体现在可以运行 Lighthouse 审核来评估网站 质量。它可以识别无障碍功能、SEO、最佳实践和智能体浏览方面的问题。这就像拥有一个了解运行时的代码检查工具。作为质量关口,它将您的编码智能体变成专家,可以在关键阻碍因素到达生产环境之前将其捕获。

模拟真实世界中的用户体验

您的智能体可以使用适用于智能体的开发者工具,通过模拟工具测试网站在 各种设备上或不同位置的外观和性能 。它可以调整窗口大小、模拟地理定位,并限制网络和 CPU 速度以模拟真实世界中的条件。这样,您的智能体就可以测试移动设备专有的行为(例如汉堡菜单),而无需手动调整浏览器大小。

开发和调试 Chrome 扩展程序

您还可以让智能体不仅帮助您开发 Chrome 扩展程序,还可以调试它们。您的智能体可以直接安装、重新加载和触发扩展程序操作。这有助于在开发过程中自动执行频繁的“保存并刷新”周期。它还可以深入了解后台脚本和扩展程序页面,帮助您修复更复杂的浏览器设置中的 bug。

调试和测试 WebMCP 工具

我们还为 WebMCP(Web 模型上下文协议)源试用带来了深入的可见性,以帮助您实现此新 API。

您的智能体无需依赖信号来推断导航 DOM 的计划,而是可以直接与您使用 WebMCP 公开的结构化工具进行交互。这样可以更轻松地开发、测试和调试这些工具:您的智能体可以列出这些工具、以编程方式调用它们,并实时验证其正确性。 这简化了向您的网站添加 WebMCP 支持并对其进行测试的过程。

检测和调试内存泄漏

我们还添加了专用的内存分析工具。您的智能体现在可以拍摄堆快照来识别内存泄漏,例如分离的 DOM 节点。通过使用专门的内存泄漏调试技能,智能体充当性能专家,帮助您保持应用的精简和快速。

通过自动连接移交会话

您可以与智能体共享当前的浏览器上下文,而不是让智能体打开自己的沙盒浏览器实例(这是适用于智能体的开发者工具通常为智能体提供浏览器访问权限的方式)。这非常适合调试需要登录的内容,例如经过身份验证的信息中心,您希望 AI 智能体接管技术调查,而无需重新验证所有内容。

使用第三方开发者工具公开内部状态

第三方开发者工具允许您的 Web 应用直接与 AI 智能体共享内部状态和组件详细信息。通过提供通常对标准分析隐藏的数据的访问权限,这些工具为智能体提供了理解复杂逻辑所需的上下文。这样,系统就可以根据应用在浏览器中的实际行为提供更准确的调试建议。

开始使用

您可以使用 npm 安装稳定版本,也可以直接在您选择的智能体中进行配置:

Antigravity

适用于智能体的 Chrome 开发者工具预先捆绑了 Antigravity 2.0。您可以使用 浏览器子智能体 立即开始使用它。尝试使用斜杠命令,例如:

/browser Navigate to the Google homepage

如需访问专门的智能体技能,我们建议您在初始设置的使用 Google 构建 步骤中或在应用设置中安装开发者工具插件。如需了解详情,请参阅 Antigravity 浏览器 子智能体文档

Gemini CLI

如需将 MCP 软件包和技能作为扩展程序安装,请使用以下命令:

$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

Claude Code

如需将适用于智能体的 Chrome 开发者工具作为 Claude Code 插件安装,请在 Claude Code 中使用以下斜杠命令。添加 Marketplace 注册表:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

并从 Marketplace 注册表安装插件:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

如需更详细的指南和示例提示,请参阅我们的 适用于智能体的 Chrome 开发者工具文档。您还可以在 GitHub 上探索源代码