Publicado em 18 de junho de 2026
Para depurar um aplicativo da Web moderno de maneira eficaz, um agente de IA precisa de mais do que apenas o código-fonte. Ele precisa entender como o aplicativo se comporta no momento da execução.
Temos o prazer de apresentar ferramentas de desenvolvedores de terceiros para o Chrome DevTools para agentes. Agora, seus apps e frameworks podem dar aos agentes de IA uma visão direta do estado interno. Isso ajuda os agentes a conectar os pontos entre o que está acontecendo na tela e a lógica em execução nos bastidores.
O objetivo: além da análise estática
O desenvolvimento da Web moderno é baseado em abstrações: frameworks como Angular, React ou Vue; plataformas de CMS como WordPress ou Shopify; e bibliotecas para CSS, gráficos 3D ou animações. Embora o DevTools tenha acesso direto ao DOM renderizado final, a "verdade" de um aplicativo geralmente reside no estado interno do framework: hierarquias de componentes, indicadores JavaScript ou estado de back-end.
Nosso objetivo com as ferramentas de desenvolvedores de terceiros é fornecer um caminho para que qualquer biblioteca compartilhe esse contexto rico e acionável com agentes de IA. Ao fazer isso, os agentes podem depurar problemas que antes eram "invisíveis" para eles, por exemplo:
- Hierarquias de componentes:mapeie um elemento DOM na página diretamente para o componente de framework e o estado interno correspondentes.
- Inspeção de estado interno:acesse o estado do lado do servidor ou o conteúdo do banco de dados diretamente na sessão de depuração.
Como funciona: a API Discovery
As ferramentas de desenvolvedores de terceiros usam uma API JavaScript baseada em eventos. O servidor MCP do Chrome DevTools descobre essas ferramentas enviando um evento devtoolstooldiscovery no objeto window global. O evento devtoolstooldiscovery é enviado automaticamente em todas as navegações de página ou se a página selecionada for alterada. Ele também pode ser enviado explicitamente usando a ferramenta list_3p_developer_tools do MCP.
Implementar suas próprias ferramentas
Para expor ferramentas da sua biblioteca ou aplicativo, é necessário detectar esse evento de descoberta e responder com um 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);
}
}
]
});
});
A implementação é a seguinte:
- Defina o esquema: Use JSON Schema para definir a entrada esperada pela ferramenta.
- Processar a lógica:implemente uma função
executeque é executada no contexto da página e retorna dados serializáveis. - Elementos DOM:objetos não serializáveis não podem ser enviados entre a página e o DevTools para agentes. Os elementos DOM são uma exceção. Quando as ferramentas
retornam elementos DOM, o DevTools para agentes os mapeia automaticamente para os mesmos
UIDs usados pela
take_snapshotferramenta. Isso permite que o agente interaja com todos os elementos da página (sejam eles de um framework ou de um snapshot de página) da mesma maneira.
Interagir com ferramentas usando o MCP
Depois de registrar as ferramentas, o agente de codificação poderá interagir com elas pelo DevTools para agentes. A ferramenta list_3p_developer_tools do MCP retorna descrições das ferramentas de terceiros disponíveis na página. Além disso, quando a página selecionada muda (por exemplo, após a navegação), o DevTools anexa uma lista de ferramentas disponíveis à resposta da ferramenta MCP.
Para usar essas ferramentas, o agente chama execute_3p_developer_tool. O DevTools valida automaticamente os parâmetros de entrada para garantir que eles correspondam à definição da ferramenta.
Também é possível invocar ferramentas usando a ferramenta evaluate_script do MCP. O agente fornece um snippet JavaScript que o DevTools executa na página. Esse snippet pode chamar ferramentas de desenvolvedores de terceiros e usar imediatamente a saída delas para outros cálculos.
O uso de evaluate_script é eficaz para depuração complexa porque permite que os agentes:
- Componham operações: combinem várias etapas em uma única execução.
- Processam valores não serializáveis: processem objetos ou indicadores específicos do framework diretamente no contexto da página.
- Otimizem o desempenho: minimizem a sobrecarga de serialização e evitem várias viagens de ida e volta entre o agente e o navegador.
Sucesso inicial: integração do Angular
Colaboramos com a equipe do Angular, que implementou duas ferramentas de desenvolvedores de terceiros:
- Ferramenta de gráfico de indicadores:oferece aos agentes a capacidade de visualizar relações entre o estado e a visualização, ajudando a identificar dependências que causam loops infinitos ou atualizações com falha.
- Ferramenta de gráfico de injeção de dependência (DI):expõe os injetores de elementos, o que permite que os agentes vejam exatamente onde um serviço é fornecido ou onde ele está ausente. Como o gráfico de DI do Angular é uma construção somente de execução, a análise estática sozinha não pode depurar erros do provedor.
A equipe do React também começou a fazer experimentos com ferramentas de desenvolvedores de terceiros.
Crie o futuro da depuração de agentes conosco
Esse recurso experimental está disponível no Chrome DevTools para agentes a partir da versão 0.25.0. Para ativá-lo, use a flag de linha de comando --categoryExperimentalThirdParty.
Se você mantém um framework, uma biblioteca ou uma ferramenta e quer melhorar a experiência de depuração para agentes de codificação, gostaríamos de colaborar:
- Confira os documentos: guia técnico no GitHub.
- Entre em contato:estamos procurando parceiros para iterar essas APIs e ajudar a definir o futuro da depuração da Web com tecnologia de IA. Você pode criar um problema no repositório do GitHub para entrar em contato.
Participe da criação do futuro do desenvolvimento da Web de agentes!