Chrome DevTools MCP — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Chromium real — renderiza a página exatamente como seu navegador
Rastreamentos de desempenho com análises (LCP, CLS, recursos de bloqueio de renderização)
Acesso completo à aba de rede — corpos de requisição/resposta, timing, redirecionamentos
Snapshots de DOM, screenshots e ações de clique/digitação/rolagem
Captura de log do console e avaliação de JS ao vivo no contexto da página
Mantido pelo time do Chrome DevTools no Google

Demo ao vivo

Como fica na prática

chrome-devtools.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

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

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

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

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "chrome-devtools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "chrome-devtools-mcp"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Chrome DevTools

Diagnostique por que uma página é lenta com um rastreamento estilo Lighthouse

👤 Engenheiros de frontend e desempenho ⏱ ~20 min intermediate

Quando usar: Uma página se sente lenta e você quer que Claude execute um rastreamento e aponte o gargalo real em vez de adivinhar.

Pré-requisitos

URL de destino carrega sem login (ou você trata a autenticação primeiro) — Use navigate_page com uma URL; para páginas protegidas por autenticação, primeiro faça login via ferramentas click/type do chrome-devtools

Fluxo

Execute um rastreamento de desempenho

Abra https://example.com/product/123. Execute um rastreamento de desempenho com throttling de CPU 4x e perfil de rede slow-3G. Diga-me o LCP, CLS e TBT.✓ Copiado

→ Três números de métricas mais um resumo de rastreamento
Encontre o principal culpado

Qual ativo ou script único contribui mais para o atraso de LCP? Mostre o timing da requisição.✓ Copiado

→ URL específica identificada, com divisão de timing (DNS/connect/TTFB/download)
Proponha uma correção concreta

Qual é a correção mais barata que moveria o LCP para menos de 2,5s? Proponha uma mudança (preconnect, preload, defer, lazy ou bundle-split) com linhas específicas a adicionar.✓ Copiado

→ Diff HTML/JS acionável, não uma lista genérica

Resultado: Uma regressão de desempenho com uma causa nomeada e uma correção específica, verificável re-executando o rastreamento após sua aplicação.

Armadilhas

O rastreamento varia de execução para execução — números únicos enganam — Execute o rastreamento 3x e pegue a mediana antes de concluir nada
As compilações local/dev diferem da produção — Rastreie em relação a uma URL de produção ou visualização servida por CDN, não localhost sem compressão

Combine com: filesystem · github

Verifique se o recurso que Claude acabou de codificar realmente funciona em um navegador

👤 Desenvolvedores assistidos por IA fechando o loop de seu agente ⏱ ~10 min beginner

Quando usar: Claude acabou de editar algum código frontend. Antes de dizer 'pronto', você quer que ele abra a página, clique no botão e confirme que funciona.

Pré-requisitos

Servidor de desenvolvimento em execução — npm run dev em outro terminal; anote a URL

Fluxo

Abra o recurso e tire uma captura de tela

Abra http://localhost:3000/new-feature. Tire uma captura de tela. Descreva o que você vê — isso corresponde à intenção?✓ Copiado

→ Captura de tela mais descrição honesta (pode sinalizar 'botão renderizado fora da tela')
Exercite a interação

Clique no botão 'Submit' com dados de teste: {email: '[email protected]'}. Capture a requisição de rede que sai e a resposta.✓ Copiado

→ Entrada de rede com resposta 200 e payload correspondente
Verifique se há erros no console

Existem erros ou avisos do console durante esse fluxo? Inclua avisos de hidratação do React ou avisos de chave ausente.✓ Copiado

→ Console limpo ou uma correção específica para qualquer aviso encontrado

Resultado: Um recurso auto-testado com captura de tela + rastreamento de rede como evidência. Fecha a lacuna 'IA escreveu código que não funciona realmente'.

Armadilhas

A captura de tela parece boa, mas a interação está quebrada — Sempre exercite o fluxo do usuário (click/type), não apenas inspecione visualmente
HMR tem uma corrida com a captura de tela de Claude — Após navegar, aguarde networkidle antes de fazer qualquer asserção

Combine com: filesystem · github

Depure por que uma chamada de API do seu frontend está falhando

👤 Devs full-stack perseguindo um 4xx/5xx que 'não acontece localmente' ⏱ ~15 min intermediate

Quando usar: O console do navegador mostra um fetch falhado e você não confia em sua própria memória sobre quais headers/body estão sendo enviados.

Fluxo

Acione a chamada que falha

Abra a página, execute a ação que falha. Capture a URL completa, método, headers e body da requisição que falha.✓ Copiado

→ Payload de requisição exato visível — sem adivinhas
Compare com o esperado

O backend espera header X-Client-Id e um corpo JSON com campo user_id. O que realmente está saindo? Diferencie.✓ Copiado

→ Campo específico faltante ou incorreto identificado
Corrija e re-verifique

Corrija o código-fonte para que a requisição corresponda. Em seguida, recarregue a página e confirme se a chamada agora retorna 200.✓ Copiado

→ Entrada de rede final mostra 200, não o erro original

Resultado: Uma chamada de API corrigida com prova de aba de rede de que agora funciona — sem mais 'funciona em minha máquina'.

Armadilhas

Cookies de sessão ou preflight CORS mascaram a requisição real — Não apenas olhe para a requisição que falha — verifique o preflight OPTIONS e o histórico de Set-Cookie

Combine com: filesystem · postgres

Detecte regressões visuais após uma refatoração de CSS

👤 Devs frontend fazendo migrações de design-system ⏱ ~20 min intermediate

Quando usar: Você refatorou CSS/tokens. Você quer detectar 'oh não o botão é agora rosa' antes de fazer merge.

Fluxo

Snapshot de páginas-chave no main

Em http://localhost:3000 (branch main), faça screenshot de /, /pricing, /dashboard. Salve em /tmp/visual/main/.✓ Copiado

→ 3 capturas de tela salvas
Snapshot das mesmas páginas em seu branch

Mude para branch 'css-refactor' e reinicie o servidor de desenvolvimento. Faça screenshot das mesmas 3 páginas para /tmp/visual/branch/.✓ Copiado

→ 3 capturas de tela com caminho correspondente salvas
Diferencie e descreva

Para cada par, compare-os visualmente e descreva qualquer mudança. Ignore anti-aliasing no nível de pixel; sinalize qualquer coisa que um designer notaria.✓ Copiado

→ Resumo de diff por página, não 'parece o mesmo'

Resultado: Um diff pronto para revisão que detecta mudanças visuais não intencionais.

Armadilhas

Conteúdo dinâmico (datas, saudações aleatórias) muda entre capturas — Stub time e congele RNG, ou corte essas regiões

Combine com: filesystem · github

Combinações

Combine com outros MCPs para 10× de alavancagem

chrome-devtools + filesystem

Edite fonte → recarregue página → verifique, em um loop apertado

Abra localhost:3000/checkout. O botão de envio do formulário tem cor errada. Encontre o CSS relevante em src/ e corrija-o, depois recarregue e faça screenshot para confirmar.✓ Copiado

chrome-devtools + github

Reproduza um bug de um issue, verifique correção, abra PR com screenshot

Issue #482 relata um bug de layout em /pricing com 375px de largura. Reproduza-o com chrome-devtools (screenshot em 375px), corrija o CSS, abra um PR incluindo os screenshots antes/depois.✓ Copiado

chrome-devtools + sentry

Reproduza um erro de usuário real encontrado no Sentry, em seu navegador local

Para o issue do Sentry WEB-3a91, as breadcrumbs mostram que o usuário navegou para /cart e depois clicou em 'Checkout'. Reproduza isso no chrome-devtools e capture o que realmente quebra.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
navigate_page	url: str, wait_for?: 'load'\|'networkidle'	Inicie qualquer interação de página	gratuito
take_screenshot	fullPage?: bool, selector?: str	Confirmação visual após navegar ou interagir	gratuito
take_snapshot	nenhum	Conteúdo estruturado da página como texto — melhor que screenshots para Claude raciocinar	gratuito
click	selector: str \| uid: str	Clique em um elemento por seletor CSS ou UID de snapshot	gratuito
fill	selector: str, value: str	Digite em um campo de entrada	gratuito
evaluate_script	script: str	Execute JS arbitrário no contexto da página para inspeção	gratuito
list_console_messages	nenhum	Leia logs de console e erros da página	gratuito
list_network_requests	filter?: str	Inspecione todos XHR/fetch que aconteceram	gratuito
get_network_request	requestId: str	Obtenha headers e body completos de uma requisição	gratuito
performance_start_trace	reload?: bool, cpu_throttle?: number, network?: 'slow3g'\|'fast3g'	Comece uma gravação de desempenho	gratuito
performance_stop_trace	nenhum	Interrompa e analise um rastreamento de desempenho em execução	gratuito
emulate_cpu	rate: number	Simule dispositivos lentos (4x = celular de gama média)	gratuito
emulate_network	profile: 'slow3g'\|'fast3g'\|'offline'	Teste sob redes restritas	gratuito
new_page / close_page / select_page	vários	Gerencie múltiplas abas	gratuito

Custo e limites

O que custa rodar

Cota de API: Nenhuma — executa um navegador local
Tokens por chamada: Snapshots e despejo de rede podem ser grandes (5-30k tokens); take_snapshot é geralmente mais eficiente em tokens que screenshots completos mais despejo de DOM
Monetário: Gratuito
Dica: Prefira take_snapshot em relação a take_screenshot para Claude raciocinar sobre a estrutura — snapshots são compactos e baseados em texto. Salve screenshots para revisão humana.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Nenhum no nível do MCP; se você fizer login em um site durante uma sessão, cookies vivem no perfil do Chromium até você fechá-lo

Saída de dados: O Chromium navega na web aberta em seu nome — alvos recebem seu IP. Sem telemetria para Google além do que Chromium envia por padrão.

Nunca conceda: nunca aponte para seu perfil de navegador real contendo logins/senhas salvos

Se você pedir a Claude para 'fazer login no site X', ele armazenará um cookie de sessão no perfil do navegador. Isole esse perfil do seu pessoal.
Nunca evaluate_script código que você não compreende — ele é executado na origem da página com acesso total.

Solução de problemas

Erros comuns e correções

Chromium não vai iniciar — dependências ausentes no Linux

Instale as libs de sistema ausentes: sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libxkbcommon0 libasound2. O MCP agrupa Chromium mas não todas suas dependências de runtime.

Verificar: Execute `npx chrome-devtools-mcp --version` — erros nomeam a lib ausente

navigate_page atinge tempo limite em página lenta

Passe wait_for: 'load' em vez do networkidle padrão; ou aumente o tempo limite na configuração do MCP do cliente.

click falha: elemento não encontrado

O seletor está obsoleto ou oculto. Re-chame take_snapshot primeiro e use o UID fresco do snapshot.

Rastreamento de desempenho está vazio

Você precisa recarregar a página durante o rastreamento (reload: true) ou interagir com ela — uma aba ociosa não produz nenhuma linha do tempo.

Alternativas

Chrome DevTools vs. outros

Alternativa	Quando usar	Troca
Playwright MCP	Você precisa de testes cross-browser (Firefox, WebKit) ou prefere a superfície de API do Playwright	Poder semelhante; chrome-devtools tem rastreamento de perf mais profundo, playwright tem automação mais ampla
Puppeteer MCP	Você quer a API Puppeteer de nível inferior	Apenas Chrome, sobrepõe-se muito com MCP chrome-devtools
browser-tools MCP	Você quer se conectar ao seu Chrome existente via extensão do DevTools Protocol	Sem sandbox fresco — usa sua sessão de navegador real, com seu estado conectado

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills