{"slug": "unlock-runtime-insights-introducing-third-party-developer-tools-for-chrome-for", "title": "Unlock runtime insights: Introducing third-party developer tools for Chrome DevTools for agents", "summary": "Google introduced third-party developer tools for Chrome DevTools for agents, enabling frameworks and apps to expose internal runtime state to AI agents via a new Discovery API. The tools allow agents to debug issues like component hierarchies and internal state that were previously invisible, using an event-based JavaScript API and MCP integration.", "body_md": "Published: June 18, 2026\n\nTo 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.\n\nWe are excited to [introduce third-party developer tools](/docs/devtools/agents/use-cases/third-party-tools)\nfor [Chrome DevTools for agents](/docs/devtools/agents). Now, your apps and frameworks can give AI agents\na direct look at their internal state. This helps agents connect the dots\nbetween what's happening on the screen and the logic running behind the scenes.\n\n## The goal: Beyond static analysis\n\nModern 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.\n\nOur 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:\n\n**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.\n\n## How it works: The Discovery API\n\nThird-party developer tools use an event-based JavaScript API. The Chrome\nDevTools MCP server discovers these tools by dispatching a\n`devtoolstooldiscovery`\n\nevent on the global `window`\n\nobject. The\n`devtoolstooldiscovery`\n\nevent is automatically dispatched on every page\nnavigation, or if the selected page is changed, and can be dispatched explicitly\nusing the `list_3p_developer_tools`\n\nMCP tool.\n\n### Implement your own tools\n\nTo expose tools from your library or application, you need to listen for this\ndiscovery event and respond with a `ToolGroup`\n\n.\n\n``` js\nwindow.addEventListener('devtoolstooldiscovery', (event) => {\n  event.respondWith({\n    name: \"My Library Tools\",\n    description: \"Tools for inspecting internal library state\",\n    tools: [\n      {\n        name: \"getInternalState\",\n        description: \"Returns the current internal state of the framework.\",\n        inputSchema: {\n          type: \"object\",\n          properties: {\n            componentId: { type: \"string\" }\n          }\n        },\n        execute: async (input) => {\n          // Access your framework's internal registry\n          return myFramework.getState(input.componentId);\n        }\n      }\n    ]\n  });\n});\n```\n\nImplementation is as follows:\n\n**Define the schema:** Use[JSON Schema](https://json-schema.org/)to define the input your tool expects.**Handle the logic:** Implement an`execute`\n\nfunction that runs in the page's context and returns serializable data.**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 thetool. This lets your agent interact with all page elements (whether they come from a framework or from a page snapshot) in the same way.`take_snapshot`\n\n## Interact with tools using MCP\n\nOnce you register your tools, your coding agent can interact with them through\nDevTools for agents. The `list_3p_developer_tools`\n\nMCP tool returns descriptions\nof the third-party tools available on the page. Additionally, when the selected\npage changes (for example, after navigation), DevTools appends a list of\navailable tools to the MCP tool response.\n\nTo use these tools, your agent calls `execute_3p_developer_tool`\n\n. DevTools\nautomatically validates input parameters to ensure they match the tool's\ndefinition.\n\nYou can also invoke tools using the `evaluate_script`\n\nMCP tool. Your agent\nprovides a JavaScript snippet that DevTools executes on the page. This snippet\ncan call third-party developer tools and immediately use their output for\nfurther calculations.\n\nUsing `evaluate_script`\n\nis effective for complex debugging because it lets\nagents:\n\n**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.\n\n## Early success: Angular integration\n\nWe've been collaborating with the Angular team, who implemented two third-party developer tools:\n\n**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.**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.\n\nThe React team has also started\n[experimenting](https://github.com/react/react/pull/36600) with third-party\ndeveloper tools.\n\n## Build the future of agentic debugging with us\n\nThis experimental feature is available in Chrome DevTools for agents starting\nwith version 0.25.0. To enable it, use the `--categoryExperimentalThirdParty`\n\ncommand-line flag.\n\nIf you maintain a framework, library, or tool and want to improve the debugging experience for coding agents, we'd love to collaborate:\n\n**Explore the docs:**[Technical Guide on GitHub](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/third-party-developer-tools.md).**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](https://github.com/ChromeDevTools/chrome-devtools-mcp/issues)to reach out.\n\nJoin us in building the future of agentic web development together!", "url": "https://wpnews.pro/news/unlock-runtime-insights-introducing-third-party-developer-tools-for-chrome-for", "canonical_source": "https://developer.chrome.com/blog/devtools-for-agents-3p-tools?hl=en", "published_at": "2026-06-18 07:00:00+00:00", "updated_at": "2026-06-24 09:23:25.671472+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents", "ai-tools"], "entities": ["Google", "Chrome DevTools", "Angular", "React", "Vue", "WordPress", "Shopify"], "alternates": {"html": "https://wpnews.pro/news/unlock-runtime-insights-introducing-third-party-developer-tools-for-chrome-for", "markdown": "https://wpnews.pro/news/unlock-runtime-insights-introducing-third-party-developer-tools-for-chrome-for.md", "text": "https://wpnews.pro/news/unlock-runtime-insights-introducing-third-party-developer-tools-for-chrome-for.txt", "jsonld": "https://wpnews.pro/news/unlock-runtime-insights-introducing-third-party-developer-tools-for-chrome-for.jsonld"}}