Publicado em: 23 de setembro de 2025
Estamos lançando hoje uma prévia pública do novo servidor MCP (Protocolo de Contexto de Modelo) do Chrome DevTools Model, que traz o poder do Chrome DevTools para assistentes de programação de IA.
Os agentes de programação enfrentam um problema fundamental: eles não conseguem ver o que o código gerado realmente faz quando é executado no navegador. Eles estão programando com uma venda nos olhos.
O servidor MCP do Chrome DevTools muda isso. Os assistentes de programação de IA podem depurar páginas da Web diretamente no Chrome e aproveitar os recursos de depuração e insights de desempenho do DevTools. Isso melhora a precisão ao identificar e corrigir problemas.
Confira como funciona:
O que é o Protocolo de Contexto de Modelo (MCP)?
O Protocolo de Contexto de Modelo (MCP) é um padrão de código aberto para conectar modelos de linguagem grandes (LLMs) a ferramentas e fontes de dados externas. O servidor MCP do Chrome DevTools adiciona recursos de depuração ao seu agente de IA.
Por exemplo, o servidor MCP do Chrome DevTools fornece uma ferramenta chamada performance_start_trace. Quando solicitado a investigar a performance do seu site, um LLM pode usar essa ferramenta para iniciar o Chrome, abrir seu site e usar o Chrome DevTools para gravar um rastreamento de performance. Em seguida, o LLM pode analisar o rastreamento de performance para sugerir possíveis melhorias. Usando o protocolo MCP, o servidor MCP do Chrome DevTools pode trazer novos recursos de depuração para seu agente de programação, tornando-o melhor na criação de sites.
Se você quiser saber mais sobre como o MCP funciona, consulte a documentação do MCP.
Para que você pode usar?
A seguir, confira alguns exemplos de comandos que você pode testar no assistente de IA de sua escolha, como a CLI do Gemini.
Verificar mudanças de código em tempo real
Gere uma correção com seu agente de IA e, em seguida, verifique automaticamente se a solução funciona como esperado com o MCP do Chrome DevTools.
Comando para testar:
Verify in the browser that your change works as expected.
Diagnosticar erros de rede e console
Capacite seu agente a analisar solicitações de rede para descobrir problemas de CORS ou inspecionar registros do console para entender por que um recurso não está funcionando como esperado.
Comando para testar:
A few images on localhost:8080 are not loading. What's happening?
Simular o comportamento do usuário
Navegue, preencha formulários e clique em botões para reproduzir bugs e testar fluxos de usuários complexos, tudo isso enquanto inspeciona o ambiente de execução.
Comando para testar:
Why does submitting the form fail after entering an email address?
Depurar problemas de estilo e layout ao vivo
Peça ao seu agente de IA para se conectar a uma página ativa, inspecionar o DOM e o CSS e receber sugestões concretas para corrigir problemas de layout complexos, como elementos transbordantes com base em dados ativos do navegador.
Comando para testar:
The page on localhost:8080 looks strange and off. Check what's happening there.
Automatizar auditorias de performance
Instrua seu agente de IA a executar um rastreamento de performance, analisar os resultados e investigar problemas de performance específicos, como números altos de LCP.
Comando para testar:
Localhost:8080 is loading slowly. Make it load faster.
Consulte a documentação de referência da ferramenta para uma lista de todas as ferramentas disponíveis.
Primeiros passos
Para testar, adicione a seguinte entrada de configuração ao cliente MCP:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Para verificar se ele funciona, execute o seguinte comando no seu agente de programação:
Please check the LCP of web.dev.
Para mais detalhes, consulte a documentação do MCP do Chrome DevTools no GitHub.
Participe
Estamos criando o MCP do Chrome DevTools de forma incremental, começando com a versão de prévia pública que estamos lançando hoje. Estamos buscando ativamente feedback de você e da comunidade sobre quais recursos devemos adicionar em seguida. Se você é um desenvolvedor que usa assistentes de programação de IA ou um fornecedor que cria a próxima geração de ferramentas de desenvolvimento de IA, seus insights serão inestimáveis. Se algo estiver faltando ou não estiver funcionando, registre um problema no GitHub.