你以为写完代码就算完了？今天 Chrome DevTools for Agents 用一个 API 把这件事彻底翻了

你以为 AI 写完代码就算完了？今天 Chrome DevTools for Agents 用一个新的 API 把这件事彻底翻了——从今往后，框架内部状态对 AI 不再是黑箱。

旧问题：AI agent 在浏览器里是瞎子

AI coding agent 能生成代码，但它从来不「看见」代码跑起来什么样。给它一个 React 或 Angular 项目，它只能靠静态分析猜状态——组件树什么样、signal 依赖谁、service 从哪来。这些东西在代码里有，在 DOM 里没有。

这不只是「体验不好」，是真的会出错。一行错误的依赖声明就能让 agent 陷进死循环，因为它根本不知道 Signal Graph 长什么样。

新的解法：Chrome DevTools for Agents 开放了 3rd-party tools 接口

Chrome DevTools for Agents 从 0.25.0 版本开始，引入了第三方开发者工具的支持。核心是一个基于事件的 JavaScript API，任何框架或库都可以用它向 AI agent 暴露自己的内部状态。

工作方式是这样的：Chrome DevTools 的 MCP server 在页面加载时会在 window 对象上派发一个 devtoolstooldiscovery 事件，框架代码监听这个事件，然后注册自己的工具组。

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) => {
          return myFramework.getState(input.componentId);
        }
      }
    ]
  });
});

工具注册完之后，AI agent 通过 execute_3p_developer_tool MCP 工具调用它们，DevTools 会自动校验输入参数。如果需要更灵活的控制，agent 也可以用 evaluate_script MCP 工具直接在页面上下文里执行 JavaScript，既能调用第三方工具，也能处理那些无法序列化的 framework-specific 对象（比如 signal 本身）。

第一个吃螃蟹的：Angular Signal Graph

Google 官方和 Angular 团队合作，已经实装了第一批第三方工具：

Signal Graph tool：让 AI agent 可视化 signal 和视图之间的依赖关系。以前 agent 看到的是一个死循环报错，现在它可以直接看到哪个 signal 触发了哪个更新、依赖链上谁在循环引用。这对调试 Angular 响应式问题是革命性的。

Dependency Injection Graph tool：Angular 的 DI 容器是运行时才构建的，静态分析根本看不到。新的 DI Graph tool 让 agent 直接看到某个 service 在哪里被提供、哪里缺失。以前 agent 改完代码跑崩，只能靠猜；现在它能说出「第 47 行缺少 UserService provider」。

这是真正的 agentic debugging——不是让 agent 跑个测试看报错，而是让它像人一样，打开 DevTools，一层层看内部状态。

React 团队也在跟进这个接口。

怎么用上

目前这个功能还在实验阶段。要启用它，需要 Chrome DevTools for Agents 0.25.0 以上版本，并加上启动参数 --categoryExperimentalThirdParty。

如果你是框架或库的维护者，想让自己的内部状态对 AI agent 可见，Google 在 GitHub 上提供了完整的技术文档：搜索 chrome-devtools-mcp third-party-developer-tools，里面有完整的实现指南。Google 还在招募合作伙伴一起完善这个 API 的设计。

这件事为什么重要

以前的 debugging 是给人用的。打开 DevTools，看 Network 面板、Elements 面板，都是人读的数据结构。现在 Chrome DevTools for Agents 正在把这些能力桥接到 AI agent：让它看、让它调、让它自己找到问题。

AI coding agent 正在从「生成代码」进化到「验证代码」。这个 API 是这个进化的基础设施。

下一步：如果你用 Angular v22，可以直接试一下新版 DevTools 里的 Signal Graph 工具，看它能告诉你多少静态分析永远看不到的东西。