解锁运行时洞见：面向代理的 Chrome 开发者工具推出第三方开发者工具

Wolfgang Beyer
Wolfgang Beyer
X GitHub

发布时间：2026 年 6 月 18 日

若要有效地调试现代 Web 应用，AI 智能体不仅需要您的源代码，还需要了解应用在运行时如何运行。

我们很高兴能为 Chrome DevTools for agents 引入第三方开发者工具。现在，应用和框架可以直接向 AI 智能体展示其内部状态。这有助于客服人员将屏幕上发生的情况与后台运行的逻辑联系起来。

目标：超越静态分析

现代 Web 开发基于抽象概念构建，例如 Angular、React 或 Vue 等框架；WordPress 或 Shopify 等 CMS 平台；以及 CSS、3D 图形或动画库。虽然开发者工具可以直接访问最终呈现的 DOM，但应用的“实际情况”通常存在于框架的内部状态中：组件层次结构、JavaScript 信号或后端状态。

我们推出第三方开发者工具的目标是，为任何库提供一种与 AI 智能体分享丰富、可操作的上下文的途径。这样一来，客服人员就可以调试之前对他们来说“不可见”的问题，例如：

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

工作原理：Discovery API

第三方开发者工具使用基于事件的 JavaScript API。Chrome 开发者工具 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. 定义架构：使用 JSON 架构定义工具所需的输入。
  2. 处理逻辑：实现一个在网页上下文中运行并返回可序列化数据的 execute 函数。
  3. DOM 元素：不可序列化的对象无法在网页和代理的开发者工具之间发送。DOM 元素除外。当您的工具返回 DOM 元素时，代理的开发者工具会自动将这些元素映射到 take_snapshot 工具使用的相同 UID。这样，代理就可以以相同的方式与所有页面元素（无论它们来自框架还是页面快照）进行互动。

使用 MCP 与工具互动

注册工具后，编码智能体可以通过面向智能体的开发者工具与这些工具互动。list_3p_developer_tools MCP 工具会返回页面上可用的第三方工具的说明。此外，当所选页面发生变化时（例如在导航后），开发者工具会将可用工具列表附加到 MCP 工具响应中。

如需使用这些工具，智能体需要调用 execute_3p_developer_tool。开发者工具会自动验证输入参数，以确保它们与工具的定义相符。

您还可以使用 evaluate_script MCP 工具调用工具。您的代理提供了一个 JavaScript 代码段，开发者工具会在网页上执行该代码段。此代码段可以调用第三方开发者工具，并立即使用其输出进行进一步计算。

使用 evaluate_script 可进行复杂的调试，因为该标志可让代理执行以下操作：

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

早期成功：Angular 集成

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

  1. 信号图工具：使代理能够直观呈现状态与视图之间的关系，帮助他们识别导致无限循环或更新失败的依赖项。
  2. 依赖注入 (DI) 图工具：公开元素注入器，使代理能够准确了解服务提供的位置或缺失的位置。由于 Angular 的 DI 图是仅在运行时构建的，因此仅靠静态分析无法调试提供程序错误。
一段屏幕录制视频，展示了 AI 智能体如何使用 Angular Signal Graph 工具调试响应式循环。

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

与我们一起打造智能体调试的未来

此实验性功能适用于版本 0.25.0 及更高版本的代理，可在 Chrome 开发者工具中使用。如需启用该功能，请使用 --categoryExperimentalThirdParty 命令行标志。

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

快来加入我们，携手打造智能体 Web 开发的未来！