Chrome DevTools para agentes de AI (MCP)

• Com o lançamento da prévia pública do servidor Chrome DevTools MCP, agentes de codificação com AI agora podem usar os recursos de depuração e desempenho do Chrome DevTools
• Antes, os agentes não conseguiam verificar os resultados da execução do código, mas agora podem usar dados reais de runtime como rede, console, DOM e rastreamento de desempenho
• Com o servidor DevTools MCP, tornam-se possíveis várias automações, como validação de código em tempo real, análise de erros de rede e console, simulação de ações do usuário, depuração de estilo e layout e auditoria automática de desempenho
• Os desenvolvedores podem começar a usar imediatamente adicionando o servidor à configuração do cliente MCP, e podem executar verificações como confirmar o LCP ou diagnosticar erros de envio de formulário com prompts de exemplo
• O Google planeja expandir os recursos do MCP com base no feedback da comunidade

---

Visão geral

• O Google lançou a prévia pública de um novo servidor Chrome DevTools Model Context Protocol (MCP)
• Com isso, assistentes de codificação com AI passam a ter um ambiente em que podem usar diretamente, no navegador, os recursos de depuração e medição de desempenho do Chrome DevTools
• Em outras palavras, isso pode ajudar a resolver a dificuldade causada pelo fato de agentes de codificação não conseguirem verificar o comportamento real do código executado no navegador

Introdução ao Model Context Protocol (MCP)

• O Model Context Protocol (MCP) é um padrão open source para conectar grandes modelos de linguagem (LLMs) a ferramentas externas e fontes de dados
• O servidor Chrome DevTools MCP usa esse padrão para se integrar a agentes de AI, permitindo o uso de várias ferramentas, como depuração web e rastreamento de desempenho
• Por exemplo, com a ferramenta performance_start_trace, o LLM pode iniciar o navegador, coletar e analisar informações de desempenho e sugerir melhorias
• Por meio do protocolo MCP, agentes de codificação passam a ter um suporte mais poderoso para desenvolvimento e resolução de problemas em websites
• Mais detalhes sobre o funcionamento do MCP podem ser encontrados na documentação oficial do MCP

Principais casos de uso

• Validação em tempo real de alterações no código

  • Depois que a AI modifica o código, ela pode verificar imediatamente o comportamento no navegador com o Chrome DevTools MCP
  • Exemplo de prompt:

    Verify in the browser that your change works as expected.  
    

• Diagnóstico de erros de rede e console

  • Suporte a diagnóstico automático como análise de requisições de rede, detecção de problemas de CORS e inspeção de logs do console
  • Exemplo de prompt:

    A few images on localhost:8080 are not loading. What's happening?  
    

• Simulação do comportamento do usuário

  • Ajuda em testes automatizados de fluxos reais de uso e na reprodução de bugs, como navegação no navegador, preenchimento de formulários e cliques em botões
  • Exemplo de prompt:

    Why does submitting the form fail after entering an email address?  
    

• Depuração em tempo real de problemas de estilo e layout

  • Fornece automaticamente sugestões detalhadas sobre inspeção de DOM e CSS e problemas de layout como overflow
  • Exemplo de prompt:

    The page on localhost:8080 looks strange and off. Check what's happening there.  
    

• Automação de auditoria de desempenho

  • Automação do rastreamento de desempenho no navegador e sua análise
  • Exemplo de prompt:

    Localhost:8080 is loading slowly. Make it load faster.  
    

• A lista de ferramentas MCP disponíveis pode ser consultada na documentação oficial de referência das ferramentas

Como começar

• É possível integrar o servidor Chrome DevTools MCP adicionando a seguinte configuração ao cliente MCP

  {  
    "mcpServers": {  
      "chrome-devtools": {  
        "command": "npx",  
        "args": ["chrome-devtools-mcp@latest"]  
      }  
    }  
  }  
  

• Você pode verificar o funcionamento com um prompt de exemplo

  Please check the LCP of web.dev.  
  

• Informações detalhadas e documentação estão disponíveis no Chrome DevTools MCP no GitHub

Participação e plano de expansão

• O Google pretende evoluir gradualmente o Chrome DevTools MCP a partir deste lançamento em prévia pública
• A empresa planeja decidir os próximos recursos com base no feedback da comunidade
• Comentários e participação são muito bem-vindos, tanto de usuários de ferramentas de apoio à codificação com AI quanto de fornecedores de ferramentas de desenvolvimento de AI de próxima geração
• Solicitações de melhoria ou problemas encontrados podem ser reportados por meio das issues do GitHub

[shakespeares]

Fico em dúvida se há casos de uso em que ele seja melhor do que o Playwright.
Vendo de forma mais direta, parece um pouco decepcionante.