Inzicht in runtime: Introductie van tools van derden voor Chrome DevTools voor agents

Wolfgang Beyer
Wolfgang Beyer
X GitHub

Gepubliceerd: 18 juni 2026

Om een ​​moderne webapplicatie effectief te debuggen, heeft een AI-agent meer nodig dan alleen de broncode; hij moet begrijpen hoe de applicatie zich tijdens de uitvoering gedraagt.

We zijn verheugd om tools van derden voor Chrome DevTools voor agents te introduceren. Nu kunnen uw apps en frameworks AI-agents direct inzicht geven in hun interne status. Dit helpt agents om de verbanden te leggen tussen wat er op het scherm gebeurt en de logica die achter de schermen draait.

Het doel: Voorbij statische analyse

Moderne webontwikkeling is gebouwd op abstracties: frameworks zoals Angular, React of Vue; CMS-platforms zoals WordPress of Shopify; en libraries voor CSS, 3D-graphics of animaties. Hoewel DevTools directe toegang biedt tot de uiteindelijke DOM, bevindt de "waarheid" van een applicatie zich vaak in de interne state van het framework: componenthiërarchieën, JavaScript-signalen of de backend-state.

Ons doel met tools voor externe ontwikkelaars is om elke bibliotheek de mogelijkheid te bieden deze rijke, bruikbare context te delen met AI-agenten. Hierdoor kunnen agenten problemen opsporen die voorheen "onzichtbaar" voor hen waren, bijvoorbeeld:

  • Componenthiërarchieën: Koppel een DOM-element op de pagina rechtstreeks aan het bijbehorende frameworkcomponent en de interne status ervan.
  • Interne statusinspectie: Krijg rechtstreeks toegang tot de serverstatus of database-inhoud binnen de debugsessie.

Hoe het werkt: De Discovery API

Ontwikkelaarstools van derden gebruiken een op gebeurtenissen gebaseerde JavaScript API. De Chrome DevTools MCP-server detecteert deze tools door een devtoolstooldiscovery gebeurtenis te verzenden naar het globale window object. De devtoolstooldiscovery gebeurtenis wordt automatisch verzonden bij elke paginanavigatie of wanneer de geselecteerde pagina wordt gewijzigd, en kan expliciet worden verzonden met behulp van de list_3p_developer_tools MCP-tool.

Gebruik je eigen tools

Om tools uit uw bibliotheek of applicatie beschikbaar te maken, moet u luisteren naar deze ontdekkingsgebeurtenis en reageren met een 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);
        }
      }
    ]
  });
});

De implementatie verloopt als volgt:

  1. Definieer het schema: Gebruik JSON Schema om de invoer te definiëren die uw tool verwacht.
  2. Verwerk de logica: implementeer een execute die in de context van de pagina draait en serialiseerbare gegevens retourneert.
  3. DOM-elementen: Niet-serialiseerbare objecten kunnen niet tussen de pagina en DevTools for agents worden verzonden. DOM-elementen vormen hierop een uitzondering. Wanneer uw tools DOM-elementen retourneren, koppelt DevTools for agents deze automatisch aan dezelfde UID's die door de take_snapshot tool worden gebruikt. Hierdoor kan uw agent op dezelfde manier met alle pagina-elementen communiceren (ongeacht of ze afkomstig zijn van een framework of van een paginasnapshot).

Interacteer met tools via MCP

Zodra u uw tools registreert, kan uw codeeragent ermee communiceren via DevTools voor agents. De MCP-tool list_3p_developer_tools geeft beschrijvingen weer van de tools van derden die op de pagina beschikbaar zijn. Bovendien voegt DevTools een lijst met beschikbare tools toe aan het antwoord van de MCP-tool wanneer de geselecteerde pagina verandert (bijvoorbeeld na navigatie).

Om deze tools te gebruiken, roept uw ​​agent de functie execute_3p_developer_tool aan. DevTools valideert automatisch de invoerparameters om ervoor te zorgen dat ze overeenkomen met de definitie van de tool.

Je kunt ook tools aanroepen met de MCP-tool evaluate_script . Je agent levert een JavaScript-fragment dat DevTools op de pagina uitvoert. Dit fragment kan tools van derden aanroepen en de uitvoer ervan direct gebruiken voor verdere berekeningen.

Het gebruik van evaluate_script is effectief voor complexe foutopsporing omdat het agents de volgende mogelijkheden biedt:

  • Compositiebewerkingen : Combineer meerdere stappen tot één enkele uitvoering.
  • Niet-serialiseerbare waarden verwerken : frameworkspecifieke objecten of signalen rechtstreeks in de paginacontext verwerken.
  • Optimaliseer de prestaties : minimaliseer de overhead van serialisatie en vermijd meerdere communicaties tussen de agent en de browser.

Vroeg succes: Angular-integratie

We hebben samengewerkt met het Angular-team, dat twee tools van derden voor ontwikkelaars heeft geïmplementeerd:

  1. Signal Graph-tool: Hiermee kunnen agents de relaties tussen de status en de weergave visualiseren, waardoor ze afhankelijkheden kunnen identificeren die oneindige lussen of mislukte updates veroorzaken.
  2. Dependency Injection (DI) Graph-tool: Hiermee worden de elementinjectoren zichtbaar, waardoor agents precies kunnen zien waar een service wordt aangeboden of waar deze ontbreekt. Omdat de DI-grafiek van Angular een constructie is die alleen tijdens runtime wordt uitgevoerd, kan statische analyse alleen niet volstaan ​​om providerfouten op te sporen.
Een screencast waarin een AI-agent de Angular Signal Graph-tool gebruikt om een ​​reactieve lus te debuggen.

Het React-team is ook begonnen met experimenteren met ontwikkelaarstools van derden.

Bouw samen met ons aan de toekomst van agentische debugging.

Deze experimentele functie is beschikbaar in Chrome DevTools voor agents vanaf versie 0.25.0. Om deze in te schakelen, gebruikt u de opdrachtregeloptie --categoryExperimentalThirdParty .

Als u een framework, bibliotheek of tool onderhoudt en de debugervaring voor codeeragenten wilt verbeteren, werken we graag met u samen:

Bouw samen met ons aan de toekomst van agentgebaseerde webontwikkeling!