Desbloquea estadísticas del tiempo de ejecución: Presentamos herramientas para desarrolladores externas para las Herramientas para desarrolladores de Chrome para agentes

Wolfgang Beyer

Fecha de publicación: 18 de junio de 2026

Para depurar una aplicación web moderna de manera eficaz, un agente de IA necesita más que solo tu código fuente; debe comprender cómo se comporta la aplicación en el tiempo de ejecución.

Nos complace presentar las herramientas para desarrolladores de terceros para las Herramientas para desarrolladores de Chrome para agentes. Ahora, tus apps y frameworks pueden brindarles a los agentes de IA una vista directa de su estado interno. Esto ayuda a los agentes a conectar los puntos entre lo que sucede en la pantalla y la lógica que se ejecuta en segundo plano.

El objetivo: Más allá del análisis estático

El desarrollo web moderno se basa en abstracciones: frameworks como Angular, React o Vue; plataformas de CMS como WordPress o Shopify; y bibliotecas para CSS, gráficos 3D o animaciones. Si bien las Herramientas para desarrolladores tienen acceso directo al DOM renderizado final, la "verdad" de una aplicación suele residir en el estado interno del framework: jerarquías de componentes, indicadores de JavaScript o estado de backend.

Nuestro objetivo con las herramientas para desarrolladores de terceros es proporcionar una ruta para que cualquier biblioteca comparta este contexto enriquecido y procesable con los agentes de IA. De esta manera, los agentes pueden depurar problemas que antes eran "invisibles" para ellos, por ejemplo:

• Jerarquías de componentes: Asigna un elemento DOM en la página directamente a su componente de framework y estado interno correspondientes.
• Inspección del estado interno: Accede al estado del servidor o al contenido de la base de datos directamente en la sesión de depuración.

Cómo funciona: La API de Discovery

Las herramientas para desarrolladores de terceros usan una API de JavaScript basada en eventos. El servidor MCP de las Herramientas para desarrolladores de Chrome descubre estas herramientas mediante el envío de un evento devtoolstooldiscovery en el objeto window global. El evento devtoolstooldiscovery se envía automáticamente en cada navegación de página o si se cambia la página seleccionada, y se puede enviar de forma explícita con la herramienta MCP list_3p_developer_tools.

Implementa tus propias herramientas

Para exponer herramientas de tu biblioteca o aplicación, debes escuchar este evento de descubrimiento y responder con 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);
        }
      }
    ]
  });
});

La implementación es la siguiente:

1. Define el esquema: Usa el esquema JSON para definir la entrada que espera tu herramienta.
2. Controla la lógica: Implementa una función execute que se ejecute en el contexto de la página y muestre datos serializables.
3. Elementos DOM: Los objetos no serializables no se pueden enviar entre la página y las Herramientas para desarrolladores para agentes. Los elementos DOM son una excepción. Cuando tus herramientas muestran elementos DOM, las Herramientas para desarrolladores para agentes los asignan automáticamente a los mismos UIDs que usa la take_snapshot herramienta. Esto permite que tu agente interactúe con todos los elementos de la página (ya sea que provengan de un framework o de una instantánea de la página) de la misma manera.

Interactúa con herramientas usando MCP

Una vez que registres tus herramientas, tu agente de codificación podrá interactuar con ellas a través de las Herramientas para desarrolladores para agentes. La herramienta MCP list_3p_developer_tools muestra descripciones de las herramientas de terceros disponibles en la página. Además, cuando cambia la página seleccionada (por ejemplo, después de la navegación), las Herramientas para desarrolladores agregan una lista de herramientas disponibles a la respuesta de la herramienta MCP.

Para usar estas herramientas, tu agente llama a execute_3p_developer_tool. Las Herramientas para desarrolladores validan automáticamente los parámetros de entrada para garantizar que coincidan con la definición de la herramienta.

También puedes invocar herramientas con la herramienta MCP evaluate_script. Tu agente proporciona un fragmento de JavaScript que las Herramientas para desarrolladores ejecutan en la página. Este fragmento puede llamar a herramientas para desarrolladores de terceros y usar de inmediato su resultado para realizar más cálculos.

El uso de evaluate_script es eficaz para la depuración compleja, ya que permite que los agentes hagan lo siguiente:

• Componer operaciones: Combina varios pasos en una sola ejecución.
• Controlar valores no serializables: Procesa objetos o indicadores específicos del framework directamente en el contexto de la página.
• Optimizar el rendimiento: Minimiza la sobrecarga de serialización y evita varios viajes de ida y vuelta entre el agente y el navegador.

Éxito anticipado: Integración de Angular

Colaboramos con el equipo de Angular, que implementó dos herramientas para desarrolladores de terceros:

1. Herramienta Signal Graph: Les brinda a los agentes la capacidad de visualizar las relaciones entre el estado y la vista, lo que los ayuda a identificar las dependencias que causan bucles infinitos o actualizaciones fallidas.
2. Herramienta Dependency Injection (DI) Graph: Expone los inyectores de elementos, lo que permite que los agentes vean exactamente dónde se proporciona un servicio o dónde falta. Debido a que el gráfico de DI de Angular es una construcción solo de tiempo de ejecución, el análisis estático por sí solo no puede depurar los errores del proveedor.

El equipo de React también comenzó a experimentar con herramientas para desarrolladores de terceros.

Crea el futuro de la depuración de agentes con nosotros

Esta función experimental está disponible en las Herramientas para desarrolladores de Chrome para agentes a partir de la versión 0.25.0. Para habilitarla, usa la marca de línea de comandos --categoryExperimentalThirdParty.

Si mantienes un framework, una biblioteca o una herramienta y quieres mejorar la experiencia de depuración para los agentes de codificación, nos encantaría colaborar:

• Explora la documentación: Guía técnica en GitHub.
• Comunícate con nosotros: Buscamos socios para iterar en estas APIs y ayudar a definir el futuro de la depuración web potenciada por IA. Puedes crear un problema en el repositorio de GitHub para comunicarte con nosotros.

Únete a nosotros para crear juntos el futuro del desarrollo web de agentes.