Las herramientas para desarrolladores de terceros permiten que los agentes de codificación vean más allá del DOM, las solicitudes de red y los registros de la consola. Si expones herramientas personalizadas directamente desde tu sitio web o framework, permites que tu agente interactúe con datos y estados de la aplicación que, de otro modo, serían inaccesibles.
Estas herramientas se crean con JavaScript y las Herramientas para desarrolladores de Chrome las detectan automáticamente para los agentes cuando se carga tu página.
Comprende las herramientas para desarrolladores de terceros
En el contexto de los agentes de codificación, las herramientas son funciones listas para usar que los agentes pueden utilizar para realizar acciones específicas. En el caso específico de las herramientas para desarrolladores de agentes, estas pueden exponer su estado interno de tiempo de ejecución directamente a los agentes de codificación, lo que cierra la brecha entre el resultado renderizado y la lógica interna.
Cuando uses herramientas de terceros, ten en cuenta lo siguiente:
- Descubrimiento en tiempo de ejecución: Las herramientas se detectan automáticamente cuando tu aplicación responde al evento
devtoolstooldiscoveryque emiten las Herramientas para desarrolladores de Chrome para los agentes en el objetowindowglobal. - Alcance del contexto. Las herramientas solo se ejecutan en el contexto de la página que las define. No persisten en diferentes orígenes ni cuando se vuelve a cargar la página.
- Especificidad de la herramienta. Las herramientas son solo una forma adicional para que tu agente realice una tarea. Es posible que prefiera las herramientas integradas o las capacidades del modelo básico para completar una instrucción. Por lo tanto, haz que los nombres y las descripciones de las herramientas sean lo más descriptivos posible.
Requisitos previos
Antes de implementar herramientas de terceros, asegúrate de cumplir con los siguientes requisitos:
- Herramientas para desarrolladores de Chrome para agentes. Usa la versión 0.25.0 o una posterior.
- Habilitaste JavaScript. Tener JavaScript habilitado y en ejecución
Implementa una herramienta
Para implementar una herramienta, debes escuchar un evento de descubrimiento específico y responder con las definiciones de tu herramienta. El siguiente código representa una respuesta que incluye definiciones de herramientas:
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;
},
},
],
});
},
);
Para registrar herramientas en tu aplicación, haz lo siguiente:
Define tu grupo de herramientas. Crea un objeto
ToolGroupque contenga un nombre, una descripción y un array de definiciones de herramientas individuales.export interface ToolDefinition { name: string; description: string; inputSchema: JSONSchema7; execute: (args: Record<string, unknown>) => unknown; } export interface ToolGroup { name: string; description: string; tools: ToolDefinition[]; }Detecta el evento de descubrimiento. Las Herramientas para desarrolladores de Chrome para agentes envían un evento
devtoolstooldiscoverypersonalizado en el objetowindowglobal después de cada navegación y cada vez que necesitan una lista actualizada de las herramientas disponibles.Registra tus herramientas. Llama al método
respondWith()del evento para proporcionar tu grupo de herramientas al agente.
Componentes esenciales para herramientas individuales
Cada definición de herramienta que implementes debe incluir las siguientes tres partes:
- Nombre y descripción. Estas proporcionan las instrucciones que el agente usa para decidir cuándo y cómo llamar a tu herramienta.
- Esquema de entrada. Es un esquema JSON que define la estructura y los tipos de argumentos que espera la herramienta.
- Función de ejecución. Es el código JavaScript real que se ejecuta en la página cuando el agente invoca la herramienta.
En el siguiente ejemplo, se muestran estos tres componentes en una sola definición de herramienta:
{
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;
},
}
Casos de uso de herramientas para desarrolladores de terceros
Indícale a tu agente que inspeccione la lógica de la aplicación en profundidad en lugar de solo los elementos de la IU a nivel superficial. Usa estas herramientas personalizadas para optimizar la depuración de aplicaciones con estado o con un marco de trabajo pesado.
Sugerencias para descubrir herramientas
Escribe nombres y descripciones descriptivos para las herramientas. Los agentes usan estas descripciones como contexto para decidir qué herramienta usar. El lenguaje claro ayuda al agente a determinar de forma autónoma cuándo una herramienta es adecuada para una tarea.
Depura métricas de tiempo de ejecución específicas de la aplicación
Los problemas, como las fallas silenciosas de la caché o las llamadas a la API redundantes, suelen ser invisibles para la inspección estándar. Al exponer estadísticas internas, tu agente puede explicar por qué ocurrió un determinado comportamiento.
Supongamos que tienes una función que expone estadísticas internas. Primero, debes crear una herramienta como esta:
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 descripción de la herramienta es clara, es posible que el agente la use de forma autónoma cuando lo considere adecuado. Puedes indicarle a tu agente que realice una tarea con la herramienta de la siguiente manera:
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.
Ejemplo de ejecución del agente: Tu agente detecta la herramienta getCacheStatistics que expone tu aplicación. Invoca la herramienta, analiza la proporción de aciertos y errores devuelta, y determina que el frontend está volviendo a recuperar innecesariamente toda la canalización en lugar de actualizar la caché local.
Cómo verificar las marcas de función
Define puntos de datos personalizados para exponer las variables de entorno o las marcas de funciones activas para una sesión de usuario específica. Esto te ayuda a depurar por qué ciertas funciones son visibles o no para usuarios específicos. Si un usuario informa un error, el agente puede verificar si pertenece a un grupo experimental que podría estar causando el problema.
Por ejemplo, crea una herramienta como esta para devolver el estado interno de la marca de función:
// 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 descripción de la herramienta es clara, es posible que el agente la use de forma autónoma cuando lo considere adecuado. Puedes indicarle a tu agente que realice una tarea con la herramienta de la siguiente manera:
Check the active feature flags and tell me if the new-ui-enabled flag is set to
true for this session.
Ejemplo de ejecución del agente: Tu agente invoca la herramienta getFeatureFlags, confirma que la marca new-ui-enabled está activa y procede a depurar los componentes asociados con la nueva interfaz.
Inspecciona el estado global de la aplicación
Expón el árbol de estado del tiempo de ejecución de tu aplicación para ayudar a tu agente a comprender la lógica interna sin recuperar todo el DOM.
Podrías crear una herramienta como esta para consultar rutas específicas en tu árbol de estado, como la siguiente:
// 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 descripción de la herramienta es clara, es posible que el agente la use de forma autónoma cuando lo considere adecuado. Puedes indicarle a tu agente que realice una tarea con la herramienta de la siguiente manera:
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.
Ejemplo de ejecución del agente: Tu agente llama a getGlobalState con el parámetro path. Recupera la lista de elementos del carrito y detecta una discrepancia entre el estado interno y los elementos renderizados en la página.
Estas son algunas notas importantes sobre este ejemplo de herramienta:
- Lógica desacoplada: El agente de IA solicita el "estado". Tú, como desarrollador, decides cómo asignar esa solicitud a tu estructura de datos real en la función
execute. - Depuración segmentada: Si se incluye el parámetro
path, el agente puede evitar extraer todo el árbol de estado (que podría ser enorme) y enfocarse solo en la parte pertinente, lo que ahorra tokens y mejora el rendimiento. - Interfaz estandarizada: Incluso si cambias las bibliotecas de administración de estados, siempre y cuando actualices esta función
execute, tu agente de depuración de IA no necesitará nuevas instrucciones ni herramientas.
Inspecciona el contenido de la base de datos
Verifica que los datos de backend coincidan con el estado de la IU consultando los registros de la base de datos directamente a través de un extremo de depuración de solo lectura.
Expón un extremo de depuración seguro y crea una herramienta como esta para verificar los registros 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 descripción de la herramienta es clara, es posible que el agente la use de forma autónoma cuando lo considere adecuado. Puedes indicarle a tu agente que realice una tarea con la herramienta de la siguiente manera:
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.
Ejemplo de ejecución del agente: Tu agente llama a queryDatabaseTable para la tabla de pedidos. Recupera el registro JSON, identifica un error en el cálculo de impuestos del backend y sugiere una corrección para la lógica del servidor.
Estas son algunas notas importantes sobre este ejemplo de herramienta:
- Seguridad y autenticación: No es necesario que pases credenciales de la base de datos al agente de IA. La llamada a
fetchusa la sesión de acceso actual del navegador para autorizar la solicitud en tu backend. - Depuración práctica: Si un agente de IA identifica un error de la IU, puede llamar de inmediato a
queryDatabaseTablepara ver si el error existe en los datos de origen o en el cálculo del frontend. - Configuración mínima: Solo necesitas exponer un extremo de depuración "seguro" (de solo lectura) en tu servidor que acepte un nombre de tabla y devuelva JSON. No importa el framework que uses para compilar ese extremo.