Agente do Chrome DevTools

Visão Geral

Uma habilidade especializada para controlar e inspecionar um navegador Chrome em tempo real. Esta habilidade utiliza o servidor MCP chrome-devtools para realizar uma ampla gama de tarefas relacionadas ao navegador, desde navegação simples até profiling de performance complexo.

Quando Usar

Use esta habilidade quando:

• Automação de Navegador: Navegar por páginas, clicar em elementos, preencher formulários e lidar com caixas de diálogo.
• Inspeção Visual: Capturar screenshots ou snapshots de texto de páginas da web.
• Depuração: Inspecionar mensagens do console, avaliar JavaScript no contexto da página e analisar requisições de rede.
• Análise de Performance: Gravar e analisar traces de performance para identificar gargalos e problemas de Core Web Vitals.
• Emulação: Redimensionar a viewport ou emular condições de rede/CPU.

Categorias de Ferramentas

1. Navegação e Gerenciamento de Página

• new_page: Abrir uma nova aba/página.
• navigate_page: Ir para uma URL específica, recarregar ou navegar pelo histórico.
• select_page: Alternar o contexto entre páginas abertas.
• list_pages: Ver todas as páginas abertas e seus IDs.
• close_page: Fechar uma página específica.
• wait_for: Esperar que um texto específico apareça na página.

2. Entrada e Interação

• click: Clicar em um elemento (use uid do snapshot).
• fill / fill_form: Digitar texto em campos de entrada ou preencher vários campos de uma vez.
• hover: Mover o mouse sobre um elemento.
• press_key: Enviar atalhos de teclado ou teclas especiais (por exemplo, "Enter", "Control+C").
• drag: Arrastar e soltar elementos.
• handle_dialog: Aceitar ou dispensar alertas/prompts do navegador.
• upload_file: Fazer upload de um arquivo através de um input de arquivo.

3. Depuração e Inspeção

• take_snapshot: Obter uma árvore de acessibilidade baseada em texto (melhor para identificar elementos).
• take_screenshot: Capturar uma representação visual da página ou de um elemento específico.
• list_console_messages / get_console_message: Inspecionar a saída do console da página.
• evaluate_script: Executar JavaScript personalizado no contexto da página.
• list_network_requests / get_network_request: Analisar o tráfego de rede e os detalhes das requisições.

4. Emulação e Performance

• resize_page: Alterar as dimensões da viewport.
• emulate: Limitar CPU/Rede ou emular geolocalização.
• performance_start_trace: Iniciar a gravação de um perfil de performance.
• performance_stop_trace: Parar a gravação e salvar o trace.
• performance_analyze_insight: Obter análise detalhada dos dados de performance gravados.

Padrões de Fluxo de Trabalho

Padrão A: Identificando Elementos (Primeiro Snapshot)

Sempre prefira take_snapshot em vez de take_screenshot para encontrar elementos. O snapshot fornece valores uid que são necessários para as ferramentas de interação.

1. `take_snapshot` to get the current page structure.
2. Find the `uid` of the target element.
3. Use `click(uid=...)` or `fill(uid=..., value=...)`.

Padrão B: Solucionando Erros

Quando uma página está falhando, verifique tanto os logs do console quanto as requisições de rede.

1. `list_console_messages` to check for JavaScript errors.
2. `list_network_requests` to identify failed (4xx/5xx) resources.
3. `evaluate_script` to check the value of specific DOM elements or global variables.

Padrão C: Profiling de Performance

Identifique por que uma página está lenta.

1. `performance_start_trace(reload=true, autoStop=true)`
2. Wait for the page to load/trace to finish.
3. `performance_analyze_insight` to find LCP issues or layout shifts.

Melhores Práticas

• Consciência de Contexto: Sempre execute list_pages e select_page se você não tiver certeza de qual aba está ativa no momento.
• Snapshots: Tire um novo snapshot após qualquer navegação importante ou alteração no DOM, pois os valores de uid podem mudar.
• Timeouts: Use timeouts razoáveis para wait_for para evitar que a execução fique travada em elementos de carregamento lento.
• Screenshots: Use take_screenshot com moderação para verificação visual, mas confie em take_snapshot para a lógica.