Unlock runtime insights: Introducing third-party developer tools for Chrome DevTools for agents

Wolfgang Beyer

Published: June 18, 2026

To debug a modern web application effectively, an AI agent needs more than just your source code; it needs to understand how the application behaves at runtime.

We are excited to introduce third-party developer tools for Chrome DevTools for agents. Now, your apps and frameworks can give AI agents a direct look at their internal state. This helps agents connect the dots between what's happening on the screen and the logic running behind the scenes.

The goal: Beyond static analysis

Modern web development is built on abstractions—frameworks like Angular, React, or Vue; CMS platforms like WordPress or Shopify; and libraries for CSS, 3D graphics, or animations. While DevTools has direct access to the final rendered DOM, the "truth" of an application often lives inside the framework's internal state: component hierarchies, JavaScript signals, or backend state.

Our goal with third-party developer tools is to provide a path for any library to share this rich, actionable context with AI agents. By doing so, this lets agents debug issues that were previously "invisible" to them, for example:

• Component hierarchies: Map a DOM element on the page directly to its corresponding framework component and internal state.
• Internal state inspection: Access server-side state or database content directly within the debugging session.

How it works: The Discovery API

Third-party developer tools use an event-based JavaScript API. The Chrome DevTools MCP server discovers these tools by dispatching a devtoolstooldiscovery event on the global window object. The devtoolstooldiscovery event is automatically dispatched on every page navigation, or if the selected page is changed, and can be dispatched explicitly using the list_3p_developer_tools MCP tool.

Implement your own tools

To expose tools from your library or application, you need to listen for this discovery event and respond with a 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);
        }
      }
    ]
  });
});

Implementation is as follows:

1. Define the schema: Use JSON Schema to define the input your tool expects.
2. Handle the logic: Implement an execute function that runs in the page's context and returns serializable data.
3. DOM elements: Non-serializable objects cannot be sent between the page and DevTools for agents. DOM elements are an exception. When your tools return DOM elements, DevTools for agents automatically maps them to the same UIDs used by the take_snapshot tool. This lets your agent interact with all page elements (whether they come from a framework or from a page snapshot) in the same way.

Interact with tools using MCP

Once you register your tools, your coding agent can interact with them through DevTools for agents. The list_3p_developer_tools MCP tool returns descriptions of the third-party tools available on the page. Additionally, when the selected page changes (for example, after navigation), DevTools appends a list of available tools to the MCP tool response.

To use these tools, your agent calls execute_3p_developer_tool. DevTools automatically validates input parameters to ensure they match the tool's definition.

You can also invoke tools using the evaluate_script MCP tool. Your agent provides a JavaScript snippet that DevTools executes on the page. This snippet can call third-party developer tools and immediately use their output for further calculations.

Using evaluate_script is effective for complex debugging because it lets agents:

• Compose operations: Combine multiple steps into a single execution.
• Handle non-serializable values: Process framework-specific objects or signals directly in the page context.
• Optimize performance: Minimize serialization overhead and avoid multiple round trips between the agent and the browser.

Early success: Angular integration

We've been collaborating with the Angular team, who implemented two third-party developer tools:

1. Signal Graph tool: Gives agents the ability to visualize relationships between the state and the view, helping them identify dependencies that cause infinite loops or failed updates.
2. Dependency Injection (DI) Graph tool: Exposes the element injectors, which lets agents see exactly where a service is provided or where it is missing. Because Angular's DI graph is a runtime-only construct, static analysis alone cannot debug provider errors.

The React team has also started experimenting with third-party developer tools.

Build the future of agentic debugging with us

This experimental feature is available in Chrome DevTools for agents starting with version 0.25.0. To enable it, use the --categoryExperimentalThirdParty command-line flag.

If you maintain a framework, library, or tool and want to improve the debugging experience for coding agents, we'd love to collaborate:

• Explore the docs: Technical Guide on GitHub.
• Reach out: We are looking for partners to iterate on these APIs and help define the future of AI-powered web debugging. You can create an issue in the GitHub repository to reach out.

Join us in building the future of agentic web development together!