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

Wolfgang Beyer
Wolfgang Beyer
X GitHub

Published: June 18, 2026

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

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

目标：超越静态分析

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

我们推出第三方开发者工具的目标是为任何库提供一种与 AI 智能体共享这种丰富且可操作的上下文的方式。这样，智能体就可以调试之前对它们“不可见”的问题，例如：

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

使用 MCP 与工具互动

注册工具后，您的编码智能体可以通过智能体版 DevTools 与它们互动。list_3p_developer_tools MCP 工具会返回网页上可用的第三方工具的说明。此外，当所选网页发生更改时（例如，导航后），DevTools 会将可用工具列表附加到 MCP 工具响应中。

如需使用这些工具，您的智能体会调用 execute_3p_developer_tool。DevTools 会自动验证输入参数，以确保它们与工具的定义匹配。

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

使用 evaluate_script 对于复杂的调试非常有效，因为它允许智能体：

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

早期成功案例：Angular 集成

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

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

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

与我们携手打造智能体调试的未来

此实验性功能在智能体版 Chrome 开发者工具中提供，从 0.25.0 版开始提供。如需启用此功能，请使用 --categoryExperimentalThirdParty 命令行标志。

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

  • 探索文档： GitHub 上的技术指南。
  • 联系我们： 我们正在寻找合作伙伴来迭代这些 API，并帮助定义 AI 驱动的 Web 调试的未来。您可以在 GitHub 代码库中 创建问题 来联系我们。

与我们携手打造智能体 Web 开发的未来！