Publicado em: 23 de setembro de 2025
Hoje, lançamos uma prévia pública do novo servidor do protocolo de contexto do modelo (MCP, na sigla em inglês) do Chrome DevTools, 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 faz quando é executado no navegador. É como programar 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 do DevTools e insights de desempenho. 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 das Ferramentas para desenvolvedores do Chrome 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.
Para saber mais sobre como o MCP funciona, consulte a documentação do MCP.
Para que você pode usar?
Confira alguns exemplos de comandos que você pode testar no assistente de IA da sua escolha, como a CLI do Gemini.
Verificar mudanças no código em tempo real
Gere uma correção com seu agente de IA e 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 do console
Permita que seu agente analise solicitações de rede para descobrir problemas de CORS ou inspecione 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 em tempo real
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 o agente de IA a executar um rastreamento de performance, analisar os resultados e investigar problemas específicos de performance, 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 ver uma lista de todas as ferramentas disponíveis.
Primeiros passos
Para testar, adicione a seguinte entrada de configuração ao cliente do 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, confira 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 feedback de você e da comunidade sobre quais recursos devemos adicionar em seguida. Seja 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, suas ideias serão muito valiosas. Se algo estiver faltando ou não estiver funcionando, abra um problema no GitHub.