Chrome DevTools MCP - Ferramenta de Controle de Navegador para Assistentes de Programação de IA

Visão Geral do Projeto

Chrome DevTools MCP é um servidor oficial do Model Context Protocol (MCP) que permite que assistentes de programação de IA (como Gemini, Claude, Cursor ou Copilot) controlem e inspecionem um navegador Chrome em execução em tempo real. Esta ferramenta oferece aos assistentes de codificação de IA a funcionalidade completa do Chrome DevTools para automação confiável, depuração profunda e análise de desempenho.

Endereço do GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp

Principais Recursos

1. Insights de Desempenho

• Registra rastreamentos de desempenho usando o Chrome DevTools
• Extrai recomendações acionáveis para otimização de desempenho
• Ajuda assistentes de IA a identificar gargalos de desempenho

2. Depuração Avançada do Navegador

• Analisa requisições de rede
• Captura capturas de tela
• Inspeciona a saída do console do navegador
• Detecta problemas de CORS e erros de console

3. Automação Confiável

• Implementa automação do navegador baseada em Puppeteer
• Aguarda automaticamente os resultados das operações
• Suporta preenchimento de formulários, navegação de página, interação com elementos

Categorias Principais de Funcionalidades

O servidor Chrome DevTools MCP oferece 26 ferramentas, divididas nas seguintes categorias:

Automação de Entrada (7 ferramentas)

• Cliques, preenchimento de formulários, entrada de texto
• Funções interativas como passar o mouse, operações de teclado

Automação de Navegação (7 ferramentas)

• Navegação de página, avançar/voltar
• Atualizar, aguardar o carregamento completo

Funções de Simulação (3 ferramentas)

• Simulação de dispositivo
• Simulação de geolocalização
• Simulação de condições de rede

Análise de Desempenho (3 ferramentas)

• Registro de rastreamento de desempenho
• Análise de métricas de desempenho
• Geração de sugestões de otimização

Monitoramento de Rede (2 ferramentas)

• Lista de requisições de rede
• Visualização de detalhes da requisição

Ferramentas de Depuração (4 ferramentas)

• Visualização de mensagens do console
• Execução de JavaScript
• Funcionalidade de captura de tela
• Inspeção do DOM

Requisitos do Sistema

• Node.js: Versão 20 ou LTS mais recente
• Chrome: Versão estável atual ou mais recente
• npm: Gerenciador de pacotes

Instalação e Configuração

Configuração Geral

Adicione o seguinte ao arquivo de configuração do seu cliente MCP:

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

Assistentes de Programação de IA Suportados

Claude Code

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cursor

Através da interface de configurações do Cursor: Settings -> MCP -> New MCP Server, use a configuração acima.

Gemini CLI

# Nível do projeto
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Instalação global
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

VS Code Copilot

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Cline

Siga o guia de configuração MCP do Cline para usar a configuração padrão.

Opções de Configuração

O Chrome DevTools MCP suporta os seguintes parâmetros de configuração:

Parâmetro	Tipo	Valor Padrão	Descrição
--headless	boolean	false	Executar em modo headless (sem UI)
--isolated	boolean	false	Cria um diretório de dados de usuário temporário, limpo automaticamente após o fechamento
--channel	string	stable	Canal da versão do Chrome (stable/canary/beta/dev)
--viewport	string	-	Tamanho inicial da viewport, como 1280x720
--executablePath / -e	string	-	Caminho personalizado para o executável do Chrome
--browserUrl / -u	string	-	Conectar a uma instância do Chrome em execução
--proxyServer	string	-	Configuração do servidor proxy
--acceptInsecureCerts	boolean	false	Ignorar erros de certificado autoassinado e expirado (usar com cautela)
--logFile	string	-	Caminho do arquivo de log de depuração

Exemplo de Configuração

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

Exemplos de Uso

Teste Básico

Após a instalação, insira o seguinte prompt no seu assistente de IA para testar:

Check the performance of https://developers.chrome.com

O assistente de IA irá automaticamente:

1. Abrir o navegador Chrome
2. Navegar para o site especificado
3. Registrar o rastreamento de desempenho
4. Analisar e fornecer sugestões de otimização de desempenho

Cenários de Uso Comuns

1. Análise de Desempenho

Analise o desempenho de carregamento de example.com e forneça sugestões de otimização

2. Depuração de Problemas de Rede

Verifique se my-website.com tem erros de CORS

3. Teste de Automação

Navegue até demo.realworld.io, preencha o formulário de login e capture uma tela

4. Preenchimento de Formulários

Na página de login, preencha o e-mail test@example.com e a senha testpass123

5. Inspeção do Console

Visualize as mensagens de erro do console da página atual

Como Funciona

O Chrome DevTools MCP funciona com base no padrão Model Context Protocol (MCP):

1. Protocolo MCP: Padrão de código aberto para conectar grandes modelos de linguagem a ferramentas e fontes de dados externas
2. Exposição de Ferramentas: Expõe as funcionalidades do Chrome DevTools como ferramentas através do protocolo MCP
3. Chamada de IA: O assistente de IA invoca as ferramentas correspondentes com base nas necessidades do usuário
4. Execução Automatizada: Usa Puppeteer para executar operações no Chrome
5. Retorno de Resultados: Retorna os resultados da execução ao assistente de IA

Fluxo de Exemplo

Quando você pede ao assistente de IA para "verificar o desempenho do site":

Usuário: Verifique o desempenho do meu site
  ↓
Assistente de IA: Usa a ferramenta performance_start_trace
  ↓
Servidor MCP: Inicia o Chrome, abre o site, registra o rastreamento de desempenho
  ↓
Assistente de IA: Analisa os dados de desempenho
  ↓
Usuário: Recebe o relatório de análise de desempenho e sugestões de otimização

Diretório de Dados

O Chrome DevTools MCP usa os seguintes diretórios de dados do usuário:

• Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

O diretório de dados não é limpo entre as execuções, a menos que a opção --isolated seja usada.

Considerações de Segurança

⚠️ AVISO IMPORTANTE:

O Chrome DevTools MCP expõe o conteúdo da instância do navegador aos clientes MCP, permitindo que eles inspecionem, depurem e modifiquem quaisquer dados no navegador ou no DevTools.

Evite compartilhar informações sensíveis ou pessoais que você não deseja que sejam compartilhadas com os clientes MCP.

Solução de Problemas

Se você encontrar problemas, consulte o guia oficial de solução de problemas.

Problemas Comuns

1. Navegador não inicia automaticamente: O servidor MCP só inicia o navegador quando o cliente usa uma ferramenta que requer o navegador.
2. Problemas de permissão de sandbox: Se o cliente MCP tiver o sandbox ativado, pode ser necessário desativá-lo ou usar --connect-url para conectar a uma instância do Chrome iniciada manualmente.
3. Tempo limite de inicialização: No Windows, pode ser necessário aumentar a configuração startup_timeout_ms.

Pilha Tecnológica

• Núcleo: Node.js
• Automação de Navegador: Puppeteer
• Protocolo: Chrome DevTools Protocol (CDP)
• Padrão: Model Context Protocol (MCP)

Características do Projeto

1. Suporte Oficial: Desenvolvido e mantido oficialmente pela equipe do Chrome DevTools
2. Ampla Compatibilidade: Suporta vários assistentes de programação de IA populares
3. Funcionalidade Abrangente: Oferece 26 ferramentas cobrindo automação, depuração e análise de desempenho
4. Fácil Integração: Não requer instalação local com npx, configuração simples
5. Desenvolvimento Ativo: Atualizações e melhorias contínuas de funcionalidades

Cenários de Aplicação

• Depuração de Desenvolvimento Web: Assistentes de IA ajudam a identificar e corrigir bugs
• Otimização de Desempenho: Análise de desempenho automatizada e sugestões de otimização
• Teste de Automação: Escrever e executar testes de automação de navegador
• Monitoramento de Sites: Verificar a funcionalidade e o desempenho do site
• Validação de Desenvolvimento: Verificar o efeito real das alterações de código no navegador

Feedback e Contribuições

Este projeto está em fase de pré-visualização pública, e a equipe do Chrome DevTools está buscando ativamente feedback da comunidade:

• Se você tiver solicitações de recursos ou encontrar problemas, envie-os em GitHub Issues
• Suas percepções são inestimáveis, seja você um desenvolvedor usando assistentes de programação de IA ou um fornecedor construindo a próxima geração de ferramentas de desenvolvimento de IA.