Les outils de développement tiers permettent aux agents de codage de voir au-delà du DOM, des requêtes réseau et des journaux de la console. En exposant des outils personnalisés directement à partir de votre site Web ou de votre framework, vous permettez à votre agent d'interagir avec l'état et les données de l'application qui seraient autrement inaccessibles.
Ces outils sont créés via JavaScript et sont automatiquement détectés par les Outils pour les développeurs Chrome pour les agents lorsque votre page se charge.
Comprendre les outils de développement tiers
Dans le contexte des agents de codage, les outils sont des fonctions prêtes à l'emploi permettant aux agents d'effectuer des actions spécifiques. Pour DevTools pour les agents en particulier, ces outils peuvent exposer directement son état d'exécution interne aux agents de codage, ce qui permet de combler le fossé entre la sortie rendue et la logique interne.
Lorsque vous utilisez des outils tiers, gardez les points suivants à l'esprit :
- Détection de l'environnement d'exécution. Les outils sont automatiquement détectés lorsque votre application répond à l'événement
devtoolstooldiscoveryémis par Chrome DevTools pour les agents sur l'objetwindowglobal. - Portée du contexte. Les outils ne s'exécutent que dans le contexte de la page qui les définit. Ils ne persistent pas entre les origines et les rechargements de page.
- Spécificité de l'outil. Les outils ne sont qu'un moyen supplémentaire pour votre agent d'effectuer une tâche. Il peut préférer les outils intégrés ou les fonctionnalités de modèle de base pour répondre à une invite. Par conséquent, rendez les noms et les descriptions des outils aussi descriptifs que possible.
Prérequis
Avant d'implémenter des outils tiers, assurez-vous de remplir les conditions suivantes :
- Outils pour les développeurs Chrome pour les agents. Utilisez la version 0.25.0 ou ultérieure.
- JavaScript activé. JavaScript doit être activé et en cours d'exécution.
Implémenter un outil
Pour implémenter un outil, vous écoutez un événement de détection spécifique et vous répondez avec vos définitions d'outil. Le code suivant représente une réponse qui inclut des définitions d'outil :
window.addEventListener(
'devtoolstooldiscovery',
(event: DevtoolsToolDiscoveryEvent) => {
event.respondWith({
name: 'Page-specific DevTools',
description: 'Provide runtime info directly from the JavaScript in the page.',
tools: [
{
name: 'add',
description: 'Calculates the sum of two numbers.',
inputSchema: {
type: 'object',
properties: {
a: {type: 'number'},
b: {type: 'number'},
},
required: ['a', 'b'],
},
execute: async (input: {a: number; b: number}) => {
return input.a + input.b;
},
},
],
});
},
);
Pour enregistrer des outils dans votre application :
Définissez votre groupe d'outils. Créez un
ToolGroupcontenant un nom, une description et un tableau de définitions d'outils individuelles.export interface ToolDefinition { name: string; description: string; inputSchema: JSONSchema7; execute: (args: Record<string, unknown>) => unknown; } export interface ToolGroup { name: string; description: string; tools: ToolDefinition[]; }Écoutez l'événement de détection. Les Outils pour les développeurs Chrome pour les agents envoient un événement
devtoolstooldiscoverypersonnalisé sur l'objetwindowglobal après chaque navigation et chaque fois qu'ils ont besoin d'une liste mise à jour des outils disponibles.Enregistrez vos outils. Appelez la méthode
respondWith()de l'événement pour fournir votre groupe d'outils à l'agent.
Composants essentiels pour les outils individuels
Chaque définition d'outil que vous implémentez doit inclure les trois parties suivantes :
- Nom et description. Ils fournissent les instructions que l'agent utilise pour décider quand et comment appeler votre outil.
- Schéma d'entrée. Un schéma JSON qui définit la structure et les types d'arguments attendus par l'outil.
- Fonction d'exécution. Le code JavaScript réel qui s'exécute sur la page lorsque l'agent appelle l'outil.
L'exemple suivant illustre ces trois composants dans une seule définition d'outil :
{
name: 'add',
description: 'Calculates the sum of two numbers.',
inputSchema: {
type: 'object',
properties: {
a: {type: 'number'},
b: {type: 'number'},
},
required: ['a', 'b'],
},
execute: async (input) => {
return input.a + input.b;
},
}
Cas d'utilisation des outils de développement tiers
Demandez à votre agent d'inspecter la logique d'application approfondie plutôt que les éléments d'interface utilisateur de surface. Utilisez ces outils personnalisés pour simplifier le débogage des applications avec état ou lourdes en framework.
Conseils pour la détection des outils
Rédigez des noms et des descriptions d'outils descriptifs. Les agents utilisent ces descriptions comme contexte pour décider quel outil utiliser. Un langage clair aide l'agent à déterminer de manière autonome quand un outil est approprié pour une tâche.
Déboguer les métriques d'exécution spécifiques à l'application
Les problèmes tels que les échecs de cache silencieux ou les appels d'API redondants sont souvent invisibles lors d'une inspection standard. En exposant des statistiques internes, votre agent peut expliquer pourquoi un certain comportement s'est produit.
Supposons que vous disposiez d'une fonction qui expose des statistiques internes. Vous devez d'abord créer un outil comme celui-ci :
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: 'My app',
description: 'Tools to debug my app',
tools: [
{
name: 'getCacheStatistics',
description: 'Exposes runtime cache hits and misses for the frontend API service.',
inputSchema: {},
execute: async () => {
// Assuming window.__apiCacheService exists in your app
return window.__apiCacheService.getStats();
}
}
]
});
});
Si la description de votre outil est claire, votre agent peut l'utiliser de manière autonome lorsqu'il le juge approprié. Vous pouvez demander à votre agent d'effectuer une tâche à l'aide de l'outil comme suit :
When I reassign a lead to a new sales rep, the dashboard takes a second to
update. Please verify if the frontend is correctly updating the local cache,
or if it is doing a full cache miss and refetching the entire pipeline from the
database.
Exemple d'exécution de l'agent : votre agent détecte l'outil getCacheStatistics exposé par votre application. Il appelle l'outil, analyse le taux de réussite/échec renvoyé et identifie que le frontend récupère inutilement l'ensemble du pipeline au lieu de mettre à jour le cache local.
Vérifier les flags de fonctionnalité
Définissez des points de données personnalisés pour exposer les variables d'environnement actuelles ou les flags de fonctionnalité actifs pour une session utilisateur spécifique. Cela vous aide à comprendre pourquoi certaines fonctionnalités sont visibles ou non pour des utilisateurs spécifiques. Si un utilisateur signale un bug, l'agent peut vérifier s'il appartient à un groupe d'expérimentation qui pourrait être à l'origine du problème.
Par exemple, créez un outil comme celui-ci pour renvoyer l'état du flag de fonctionnalité interne :
// Implementation for a website creator to expose feature flags
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: 'Application Configuration Tools',
description: 'Tools for inspecting runtime environment and feature toggles',
tools: [
{
name: 'getFeatureFlags',
description: 'Returns a list of all active feature flags and their current values for the session.',
inputSchema: {
type: 'object',
properties: {} // No input parameters required for this tool
},
execute: async () => {
// This should return your internal feature flag state
// Example: return window.AppConfig.getFlags();
return {
"new-ui-enabled": true,
"beta-search-v2": false,
"experiment-group": 'control',
"log-level": 'debug'
};
}
}
]
});
});
Si la description de votre outil est claire, votre agent peut l'utiliser de manière autonome lorsqu'il le juge approprié. Vous pouvez demander à votre agent d'effectuer une tâche à l'aide de l'outil comme suit :
Check the active feature flags and tell me if the new-ui-enabled flag is set to
true for this session.
Exemple d'exécution de l'agent : votre agent appelle l'outil getFeatureFlags,
confirme que le flag new-ui-enabled est actif et procède au débogage des
composants associés à la nouvelle interface.
Inspecter l'état global de l'application
Exposez l'arborescence d'état d'exécution de votre application pour aider votre agent à comprendre la logique interne sans récupérer l'ensemble du DOM.
Vous pouvez créer un outil comme celui-ci pour interroger des chemins spécifiques dans votre arborescence d'état, comme suit :
// Library-agnostic implementation for inspecting global application state
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: "Global State Inspector",
description: 'Tools to inspect the runtime state tree of the application',
tools: [
{
name: 'getGlobalState',
description: "Returns the current application state. Use the 'path' parameter to drill down into specific sections (for example, 'auth.user' or 'cart.items'). ",
inputSchema: {
type: 'object',
properties: {
path: {
type: 'string',
description: 'Optional dot-notation path to a specific property in the state tree.'
}
}
},
execute: async (input) => {
// Library-agnostic access:
// Website creators can point this to whatever global store they use.
const state = window.__APP_STATE__ ||
(window.store && typeof window.store.getState === 'function' ? window.store.getState() : null);
if (!state) {
return { error: 'Application state is not accessible via window.__APP_STATE__ or window.store.' };
}
if (!input.path) {
return state;
}
// Helper to resolve a dot-notated path against the state object
return input.path.split('.').reduce((acc, part) => {
return acc && acc[part] !== undefined ? acc[part] : undefined;
}, state);
}
}
]
});
});
Si la description de votre outil est claire, votre agent peut l'utiliser de manière autonome lorsqu'il le juge approprié. Vous pouvez demander à votre agent d'effectuer une tâche à l'aide de l'outil comme suit :
The number of items in my cart is not updating. Inspect the global state at the
path cart.items and list the current items and their quantities, see if they are
the same.
Exemple d'exécution de l'agent : votre agent appelle getGlobalState avec le path
paramètre. Il récupère la liste des articles du panier et identifie une différence entre l'état interne et les articles affichés sur la page.
Voici quelques remarques importantes concernant cet exemple d'outil :
- Logique découplée : l'agent IA demande l'"état". En tant que développeur, vous décidez comment mapper cette requête à votre structure de données réelle dans la fonction
execute. - Débogage ciblé : en incluant le paramètre
path, l'agent peut éviter d'extraire l'ensemble de l'arborescence d'état (qui peut être énorme) et se concentrer uniquement sur la partie pertinente, ce qui permet d'économiser des jetons et d'améliorer les performances. - Interface standardisée : même si vous changez de bibliothèques de gestion de l'état,
tant que vous mettez à jour cette fonction
execute, votre agent de débogage IA n'aura pas besoin de nouvelles instructions ni de nouveaux outils.
Inspecter le contenu de la base de données
Vérifiez que vos données de backend correspondent à l'état de l'interface utilisateur en interrogeant directement les enregistrements de la base de données via un point de terminaison de débogage en lecture seule.
Exposez un point de terminaison de débogage sécurisé et créez un outil comme celui-ci pour vérifier les enregistrements de backend :
// Framework-agnostic implementation for inspecting database content
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: 'Database Inspection Tools',
description: 'Tools to query backend database records using existing browser session',
tools: [
{
name: 'queryDatabaseTable',
description: 'Retrieves a limited set of records from a specific table. Useful for verifying that backend data matches the UI state.',
inputSchema: {
type: 'object',
properties: {
tableName: {
type: 'string',
description: 'The name of the database table to inspect.'
},
limit: {
type: 'number',
default: 5,
description: 'Maximum number of rows to return.'
}
},
required: ['tableName']
},
execute: async (input) => {
// This calls a generic debug endpoint you've set up on your server.
// It's framework-agnostic because it just expects a JSON response.
try {
const response = await fetch(`/api/debug/db-inspect?table=${input.tableName}&limit=${input.limit}`);
if (!response.ok) {
return { error: `Backend returned ${response.status}: ${response.statusText}` };
}
return await response.json();
} catch (error) {
return { error: `Failed to connect to debug endpoint: ${error.message}` };
}
}
}
]
});
});
Si la description de votre outil est claire, votre agent peut l'utiliser de manière autonome lorsqu'il le juge approprié. Vous pouvez demander à votre agent d'effectuer une tâche à l'aide de l'outil comme suit :
The total price on the checkout page seems wrong. Query the orders table for my
last order to verify the subtotal and tax values and see what may be causing the
problem, if any.
Exemple d'exécution de l'agent : votre agent appelle queryDatabaseTable pour la
table des commandes. Il récupère l'enregistrement JSON, identifie une erreur dans le calcul des taxes du backend et suggère un correctif pour la logique du serveur.
Voici quelques remarques importantes concernant cet exemple d'outil :
- Sécurité et authentification : vous n'avez pas besoin de transmettre les identifiants de la base de données
à l'agent IA. L'appel
fetchutilise la session de connexion actuelle du navigateur pour autoriser la requête sur votre backend. - Débogage exploitable : si un agent IA identifie un bug d’interface utilisateur, il peut
immédiatement appeler
queryDatabaseTablepour voir si l’erreur existe dans les données sources ou dans le calcul du frontend. - Configuration minimale : vous n'avez besoin d'exposer qu'un seul point de terminaison de débogage "sécurisé" (en lecture seule) sur votre serveur qui accepte un nom de table et renvoie du code JSON. Le framework que vous utilisez pour créer ce point de terminaison n'a pas d'importance.