Débloquez des insights sur l'exécution : présentation des outils pour les développeurs tiers pour les Outils pour les développeurs Chrome pour les agents

Wolfgang Beyer
Wolfgang Beyer
X GitHub

Publié le : 18 juin 2026

Pour déboguer efficacement une application Web moderne, un agent d'IA a besoin de plus que votre code source. Il doit comprendre comment l'application se comporte au moment de l'exécution.

Nous sommes ravis de vous présenter les outils pour les développeurs tiers pour les outils pour les développeurs Chrome pour les agents. Vos applications et frameworks peuvent désormais donner aux agents d'IA un aperçu direct de leur état interne. Cela permet aux agents de faire le lien entre ce qui se passe à l'écran et la logique qui s'exécute en arrière-plan.

Objectif : Au-delà de l'analyse statique

Le développement Web moderne repose sur des abstractions : frameworks comme Angular, React ou Vue ; plates-formes CMS comme WordPress ou Shopify ; et bibliothèques pour CSS, graphiques 3D ou animations. Bien que les outils de développement aient un accès direct au DOM final rendu, la "vérité" d'une application réside souvent dans l'état interne du framework : hiérarchies de composants, signaux JavaScript ou état du backend.

Notre objectif avec les outils de développement tiers est de permettre à n'importe quelle bibliothèque de partager ce contexte riche et exploitable avec les agents d'IA. Cela permet aux agents de déboguer des problèmes qui leur étaient auparavant "invisibles", par exemple :

  • Hiérarchies de composants : mappez un élément DOM sur la page directement à son composant de framework et à son état interne correspondants.
  • Inspection de l'état interne : accédez à l'état côté serveur ou au contenu de la base de données directement dans la session de débogage.

Fonctionnement : l'API Discovery

Les outils de développement tiers utilisent une API JavaScript basée sur les événements. Le serveur MCP Chrome DevTools découvre ces outils en distribuant un événement devtoolstooldiscovery sur l'objet window global. L'événement devtoolstooldiscovery est automatiquement déclenché à chaque navigation sur une page ou si la page sélectionnée est modifiée. Il peut également être déclenché explicitement à l'aide de l'outil MCP list_3p_developer_tools.

Implémenter vos propres outils

Pour exposer des outils de votre bibliothèque ou application, vous devez écouter cet événement de découverte et répondre avec un 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);
        }
      }
    ]
  });
});

L'implémentation est la suivante :

  1. Définissez le schéma : utilisez JSON Schema pour définir l'entrée attendue par votre outil.
  2. Gérez la logique : implémentez une fonction execute qui s'exécute dans le contexte de la page et renvoie des données sérialisables.
  3. Éléments DOM : les objets non sérialisables ne peuvent pas être envoyés entre la page et les outils de développement pour les agents. Les éléments DOM font exception. Lorsque vos outils renvoient des éléments DOM, les outils de développement pour les agents les mappent automatiquement aux mêmes UID que ceux utilisés par l'outil take_snapshot. Cela permet à votre agent d'interagir avec tous les éléments de la page (qu'ils proviennent d'un framework ou d'un instantané de page) de la même manière.

Interagir avec des outils à l'aide de MCP

Une fois vos outils enregistrés, votre agent de codage peut interagir avec eux via les outils de développement pour les agents. L'outil MCP list_3p_developer_tools renvoie des descriptions des outils tiers disponibles sur la page. De plus, lorsque la page sélectionnée change (par exemple, après une navigation), les outils de développement ajoutent une liste des outils disponibles à la réponse de l'outil MCP.

Pour utiliser ces outils, votre agent appelle execute_3p_developer_tool. Les outils de développement valident automatiquement les paramètres d'entrée pour s'assurer qu'ils correspondent à la définition de l'outil.

Vous pouvez également appeler des outils à l'aide de l'outil MCP evaluate_script. Votre agent fournit un extrait de code JavaScript que les outils de développement exécutent sur la page. Cet extrait de code peut appeler des outils de développement tiers et utiliser immédiatement leur sortie pour d'autres calculs.

L'utilisation de evaluate_script est efficace pour le débogage complexe, car elle permet aux agents :

  • Opérations de composition : combinez plusieurs étapes en une seule exécution.
  • Gérer les valeurs non sérialisables : traitez les objets ou signaux spécifiques au framework directement dans le contexte de la page.
  • Optimiser les performances : minimisez les frais généraux de sérialisation et évitez les allers-retours multiples entre l'agent et le navigateur.

Premiers succès : intégration d'Angular

Nous avons collaboré avec l'équipe Angular, qui a implémenté deux outils de développement tiers :

  1. Outil Signal Graph : permet aux agents de visualiser les relations entre l'état et la vue, ce qui les aide à identifier les dépendances qui provoquent des boucles infinies ou des échecs de mise à jour.
  2. Outil de graphique d'injection de dépendances (DI) : expose les injecteurs d'éléments, ce qui permet aux agents de voir exactement où un service est fourni ou où il manque. Étant donné que le graphique d'injection de dépendances d'Angular est une construction d'exécution uniquement, l'analyse statique seule ne peut pas déboguer les erreurs de fournisseur.
Capture vidéo montrant un agent IA utilisant l'outil Angular Signal Graph pour déboguer une boucle réactive.

L'équipe React a également commencé à tester des outils de développement tiers.

Construisez l'avenir du débogage agentique avec nous

Cette fonctionnalité expérimentale est disponible dans les outils pour les développeurs Chrome pour les agents à partir de la version 0.25.0. Pour l'activer, utilisez le flag de ligne de commande --categoryExperimentalThirdParty.

Si vous gérez un framework, une bibliothèque ou un outil et que vous souhaitez améliorer l'expérience de débogage pour les agents de codage, nous serions ravis de collaborer avec vous :

Rejoignez-nous pour construire ensemble l'avenir du développement Web agentique !