E1 · Achar o 404
5 minRode o primeiro bloco. Abra kit/site/index.html e ache a linha que pede o arquivo que falta.
Pronto quando: node devtools.mjs → erros no console: 2 · requisições: 3 · com falha: 1 e saída: 1.
Aula 3 · 15 min
Chrome DevTools MCP: ver o que o agente fez (console, rede)
Quando o agente diz "não consegui", a resposta costuma estar no console ou na rede: um arquivo que deu 404, um erro de JavaScript. O Chrome DevTools MCP dá ao agente as mesmas abas que você abre no F12. Nesta aula você lista o console e a rede da página do kit, acha o erro plantado e zera.
Começar a aula
Nesta aula você vai
- 1list_console_messages e list_network_requests
- 2O erro plantado: promocoes.json que dá 404
- 3Telemetria ligada por padrão e como desligar
- 4pageId, sandbox e as outras pegadinhas da 1.10.1
Objetivo: ver pelo Chrome DevTools MCP o console e a rede da página que o agente abriu, achar o erro e zerar numa cópia corrigida.
01O F12 do agente
Clique em cada bloco.
Clique em cada bloco do diagrama para ver o que ele faz.
A página parece certa. O console e a rede mostram que um arquivo sumiu.
02Playwright MCP ou DevTools MCP?
Um age, o outro investiga.
1. Para agir
Preencher, clicar e esperar pela árvore de acessibilidade, com refs. O Playwright MCP também lista console e rede (browser_console_messages, browser_network_requests), mas o forte dele é a tarefa.
2. Para investigar
Console com nível, cada requisição com status, rastro de desempenho e Lighthouse. É o servidor para perguntar "por que falhou?".
Os dois podem ficar ligados no mesmo agente: o configurar.mjs da aula 2 já escreveu os dois no .mcp.json.
3. Pegadinhas da 1.10.1
Telemetria: por padrão o servidor manda estatísticas de uso ao Google e envia URLs de rastros de desempenho à API do CrUX. O kit desliga com --no-usage-statistics e --no-performance-crux.
Toda ferramenta de página pede pageId (pegue em list_pages). Com o Chromium do Playwright, passe --chromeArg=--no-sandbox, que é o padrão do Playwright; sem isso o navegador fecha com "Target closed".
Versão nova
A 1.11.0 saiu em 15/10/2026, segundo o registro do npm, e não foi testada aqui. O próprio servidor avisa "Update available"; o kit fica na 1.10.1 até a próxima captura.
03Achar o erro e zerar
O devtools.mjs abre a página inicial do kit e lista console e rede. A correção roda numa cópia, sem mexer no kit.
Terminal · console e rede da página do kit
cd ~/projetos/formacao-webmcp-navegador-v72/kit node devtools.mjs; echo "saída: $?"
Terminal · corrigir numa cópia e conferir
cd ~/projetos/formacao-webmcp-navegador-v72/kit
E=${TMPDIR:-/tmp}/kit3-aula3; rm -rf "$E"; cp -r site "$E"
echo '{"texto": "Revisão básica com 10% de desconto em novembro."}' > "$E/promocoes.json"
SITE="$E" node devtools.mjs; echo "saída: $?"Exemplo do repositório
→ navigate_page {"url":"http://127.0.0.1:PORTA/","pageId":1}
→ list_console_messages {"pageId":1}
[error] Failed to load resource: the server responded with a status of 404 (Not Found)
[error] promoções: falha ao carregar promocoes.json (HTTP 404)
→ list_network_requests {"pageId":1}
GET http://127.0.0.1:PORTA/ [200]
GET http://127.0.0.1:PORTA/estilo.css [200]
GET http://127.0.0.1:PORTA/promocoes.json [404]
erros no console: 2 · requisições: 3 · com falha: 1
saída: 1Dois erros no console (o 404 do navegador e a mensagem da página) e uma requisição com falha. A página, na tela, só diz "Sem promoções no momento".
→ navigate_page {"url":"http://127.0.0.1:PORTA/","pageId":1}
→ list_console_messages {"pageId":1}
→ list_network_requests {"pageId":1}
GET http://127.0.0.1:PORTA/ [200]
GET http://127.0.0.1:PORTA/estilo.css [200]
GET http://127.0.0.1:PORTA/promocoes.json [200]
erros no console: 0 · requisições: 3 · com falha: 0
saída: 0A variável SITE troca a pasta servida pela cópia em /tmp/kit3-aula3, que tem o promocoes.json. Zero erros, zero falhas, saída 0.
04Prática
O erro do kit e o seu site. Cada exercício tem um "pronto quando".
E2 · Zerar na cópia
10 minRode o segundo bloco. Depois troque o texto do promocoes.json da cópia e confira que a página mostra o novo texto.
Pronto quando: o segundo bloco (SITE="$E" node devtools.mjs, com E=/tmp/kit3-aula3) → erros no console: 0 · requisições: 3 · com falha: 0 e saída: 0.
E3 · O console do seu site
10 minRode o devtools.mjs com o endereço de um site seu. Para cada erro, anote se o agente perderia alguma coisa por causa dele.
Pronto quando: node devtools.mjs com o endereço do seu site → linha erros no console: N · requisições: M · com falha: F, com N e F anotados.
05Teste da aula
Pergunta 1 de 4
A página mostra "Sem promoções no momento" e parece normal. Onde o agente descobre que algo quebrou?competência
Correto
O erro só aparece em list_console_messages e list_network_requests. A tela e a árvore mostram o texto de reserva da página.Não é essa
O erro só aparece em list_console_messages e list_network_requests. A tela e a árvore mostram o texto de reserva da página.Rever: O F12 do agentePergunta 2 de 4
Por que o kit passa --no-usage-statistics e --no-performance-crux ao Chrome DevTools MCP?competência
Correto
As duas opções vêm ligadas por padrão na 1.10.1, segundo o próprio --help. Num teste local, não há motivo para mandar dado para fora.Não é essa
As duas opções vêm ligadas por padrão na 1.10.1, segundo o próprio --help. Num teste local, não há motivo para mandar dado para fora.Rever: Playwright MCP ou DevTools MCP?Pergunta 3 de 4
O servidor recusou a chamada de console dizendo que falta o pageId. O que fazer?
Correto
Na 1.10.1 o roteamento por página vem ligado: toda ferramenta de página pede o pageId, que vem do list_pages.Não é essa
Na 1.10.1 o roteamento por página vem ligado: toda ferramenta de página pede o pageId, que vem do list_pages.Rever: Playwright MCP ou DevTools MCP?Pergunta 4 de 4
Qual servidor você liga para o agente preencher e enviar um formulário?
Correto
Playwright MCP é o forte para agir; DevTools MCP para investigar. Os dois podem ficar ligados juntos.Não é essa
Playwright MCP é o forte para agir; DevTools MCP para investigar. Os dois podem ficar ligados juntos.Rever: Playwright MCP ou DevTools MCP?Teste concluído
Você acertou {a} de {n}. Acertando todas, a aula é marcada como concluída.Escolha uma alternativa. A explicação aparece depois da sua tentativa.
06Em três frases
Console e redeO que a tela esconde, list_console_messages e list_network_requests mostram.
Telemetria desligadaA 1.10.1 manda uso ao Google por padrão; o kit desliga.
Um age, outro investigaPlaywright MCP para a tarefa, DevTools MCP para o porquê.