Chrome DevTools for agents 推出第三方开发者工具，让 AI agent 调试框架内部状态

解锁运行时洞察：为 Chrome DevTools for agents 推出第三方开发者工具

发布时间：2026 年 6 月 18 日

要有效调试现代 Web 应用，AI agent 需要的不仅仅是你的源代码；它还需要了解应用在运行时的行为方式。

我们很高兴为 Chrome DevTools for agents 推出第三方开发者工具。现在，你的应用和框架可以让 AI agent 直接查看其内部状态。这有助于 agent 将屏幕上发生的事情与幕后运行的逻辑联系起来。

目标：超越静态分析

现代 Web 开发建立在抽象之上——Angular、React 或 Vue 等框架；WordPress 或 Shopify 等 CMS 平台；以及用于 CSS、3D 图形或动画的各类库。虽然 DevTools 可以直接访问最终渲染的 DOM，但应用的“真相”往往存在于框架的内部状态中：组件层级、JavaScript signal 或后端状态。

我们推出第三方开发者工具的目标，是为任何库提供一条路径，与 AI agent 共享这些丰富且可操作的信息。这样一来，agent 就能调试那些以前对它们“不可见”的问题，例如：

• 组件层级：将页面上的 DOM 元素直接映射到其对应的框架组件及内部状态。
• 内部状态检查：在调试会话中直接访问服务端状态或数据库内容。

工作原理：Discovery API

第三方开发者工具使用基于事件的 JavaScript API。Chrome DevTools MCP 服务器通过在全局 window 对象上派发一个 devtoolstooldiscovery 事件来发现这些工具。 devtoolstooldiscovery 事件会在每次页面导航或所选页面更改时自动派发，也可以通过 list_3p_developer_tools MCP 工具显式派发。

实现你自己的工具

要从你的库或应用中暴露工具，你需要监听该发现事件，并以一个 ToolGroup 作出响应。

window.addEventListener('devtoolstooldiscovery', (event) => {
  event.respondWith({
    name: "My Library Tools",
    description: "Tools for inspecting internal library state",
    tools: [
      {
        name: "getInternalState",
        description: "Returns the current internal state of the framework.",
        inputSchema: {
          type: "object",
          properties: {
            componentId: { type: "string" }
          }
        },
        execute: async (input) => {
          // Access your framework's internal registry
          return myFramework.getState(input.componentId);
        }
      }
    ]
  });
});

实现方式如下：

1. 定义 schema：使用 JSON Schema 定义你的工具所期望的输入。
2. 处理逻辑：实现一个 execute 函数，在页面上下文中运行并返回可序列化的数据。
3. DOM 元素：不可序列化的对象无法在页面与 DevTools for agents 之间传递。DOM 元素是个例外。当你的工具返回 DOM 元素时，DevTools for agents 会自动将它们映射到 take_snapshot 工具所使用的相同 UID。这让你的 agent 可以用相同的方式与所有页面元素交互（无论它们来自框架还是页面快照）。

通过 MCP 与工具交互

注册你的工具后，你的编码 agent 就可以通过 DevTools for agents 与它们交互。list_3p_developer_tools MCP 工具会返回页面上可用的第三方工具的描述。此外，当所选页面发生更改时（例如导航之后），DevTools 会将可用工具列表附加到 MCP 工具响应中。

要使用这些工具，你的 agent 会调用 execute_3p_developer_tool。DevTools 会自动验证输入参数，确保它们符合工具的定义。

你还可以使用 evaluate_script MCP 工具来调用工具。你的 agent 提供一段 JavaScript 代码，由 DevTools 在页面上执行。这段代码可以调用第三方开发者工具，并立即将其输出用于进一步的计算。

使用 evaluate_script 对于复杂调试非常有效，因为它可以让代理：

• 组合操作：将多个步骤合并为单次执行。
• 处理不可序列化的值：直接在页面上下文中处理框架特定的对象或信号。
• 优化性能：减少序列化开销，避免代理与浏览器之间的多次往返。

早期成果：Angular 集成

我们一直在与 Angular 团队合作，他们实现了两款第三方开发者工具：

1. Signal Graph 工具：让代理能够可视化状态与视图之间的关系，帮助它们识别导致无限循环或更新失败的依赖。
2. Dependency Injection (DI) Graph 工具：公开元素注入器，让代理确切了解服务在哪里提供或在哪里缺失。由于 Angular 的 DI 图是仅运行时才存在的结构，仅靠静态分析无法调试提供者错误。

React 团队也已开始 尝试第三方 开发者工具。

与我们共建代理式调试的未来

这项实验性功能从 0.25.0 版本开始可在面向代理的 Chrome DevTools 中使用。要启用它，请使用 --categoryExperimentalThirdParty 命令行标志。

如果您维护某个框架、库或工具，并希望改善编码代理的调试体验，我们非常乐意与您合作：

• 查阅文档：GitHub 上的技术指南。
• 与我们联系：我们正在寻找合作伙伴，共同迭代这些 API，帮助定义 AI 驱动的网页调试的未来。您可以在 GitHub 仓库中 创建一个 issue 与我们联系。

与我们一起共建代理式网页开发的未来！

除非另有说明，本页面内容采用 Creative Commons Attribution 4.0 License 许可，代码示例采用 Apache 2.0 License 许可。详情请参阅 Google Developers 网站政策。Java 是 Oracle 和/或其关联公司的注册商标。

最后更新时间：2026-06-18 UTC。