E1 · Encontrar el 404
5 minEjecuta el primer bloque. Abre kit/site/index.html y encuentra la línea que pide el archivo que falta.
Listo cuando: node devtools.mjs → erros no console: 2 · requisições: 3 · com falha: 1 y saída: 1.
Clase 3 · 15 min
Chrome DevTools MCP: ver lo que hizo el agente (consola, red)
Cuando el agente dice "no pude", la respuesta suele estar en la consola o en la red: un archivo que dio 404, un error de JavaScript. El Chrome DevTools MCP le da al agente las mismas pestañas que tú abres con F12. En esta clase listas la consola y la red de la página del kit, encuentras el error plantado y lo dejas en cero.
Comenzar la lección
En esta lección vas a
- 1list_console_messages y list_network_requests
- 2El error plantado: promocoes.json que da 404
- 3Telemetría activada por defecto y cómo desactivarla
- 4pageId, sandbox y las otras trampas de la 1.10.1
Objetivo: ver por el Chrome DevTools MCP la consola y la red de la página que abrió el agente, encontrar el error y dejarlo en cero en una copia corregida.
01El F12 del agente
Haz clic en cada bloque.
Haz clic en cada bloque del diagrama para ver lo que hace.
La página parece correcta. La consola y la red muestran que falta un archivo.
02¿Playwright MCP o DevTools MCP?
Uno actúa, el otro investiga.
1. Para actuar
Rellenar, hacer clic y esperar usando el árbol de accesibilidad, con refs. Playwright MCP también lista la consola y la red (browser_console_messages, browser_network_requests), pero su fuerte es la tarea.
2. Para investigar
Consola con nivel, cada solicitud con su estado, traza de rendimiento y Lighthouse. Es el servidor para preguntar "¿por qué falló?".
Los dos pueden quedar conectados al mismo agente: el configurar.mjs de la clase 2 ya escribió ambos en el .mcp.json.
3. Trampas de la 1.10.1
Telemetría: por defecto el servidor envía estadísticas de uso a Google y manda URLs de trazas de rendimiento a la API de CrUX. El kit lo desactiva con --no-usage-statistics y --no-performance-crux.
Toda herramienta de página pide pageId (tómalo de list_pages). Con el Chromium de Playwright, pasa --chromeArg=--no-sandbox, que es el valor por defecto de Playwright; sin eso el navegador se cierra con "Target closed".
Versión nueva
La 1.11.0 salió el 15/10/2026, según el registro de npm, y no fue probada aquí. El propio servidor avisa "Update available"; el kit se queda en la 1.10.1 hasta la próxima captura.
03Encontrar el error y dejarlo en cero
El devtools.mjs abre la página inicial del kit y lista consola y red. La corrección se ejecuta en una copia, sin tocar el kit.
Terminal · consola y red de la página del kit
cd ~/projetos/formacao-webmcp-navegador-v72/kit node devtools.mjs; echo "saída: $?"
Terminal · corregir en una copia y comprobar
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: $?"Ejemplo del repositorio
→ 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: 1Dos errores en la consola (el 404 del navegador y el mensaje de la página) y una solicitud fallida. La página, en pantalla, solo dice "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: 0La variable SITE cambia la carpeta servida por la copia en /tmp/kit3-aula3, que sí tiene el promocoes.json. Cero errores, cero fallas, salida 0.
04Práctica
El error del kit y tu sitio. Cada ejercicio tiene un "listo cuando".
E2 · Dejar en cero en la copia
10 minEjecuta el segundo bloque. Después cambia el texto del promocoes.json de la copia y comprueba que la página muestra el texto nuevo.
Listo cuando: el segundo bloque (SITE="$E" node devtools.mjs, con E=/tmp/kit3-aula3) → erros no console: 0 · requisições: 3 · com falha: 0 y saída: 0.
E3 · La consola de tu sitio
10 minEjecuta el devtools.mjs con la dirección de un sitio tuyo. Por cada error, anota si el agente perdería algo por culpa de él.
Listo cuando: node devtools.mjs con la dirección de tu sitio → línea erros no console: N · requisições: M · com falha: F, con N y F anotados.
05Prueba de la clase
Pregunta 1 de 4
La página muestra "Sem promoções no momento" y parece normal. ¿Dónde descubre el agente que algo se rompió?competencia
Correcto
El error solo aparece en list_console_messages y list_network_requests. La pantalla y el árbol muestran el texto de reserva de la página.No es esa
El error solo aparece en list_console_messages y list_network_requests. La pantalla y el árbol muestran el texto de reserva de la página.Repasar: El F12 del agentePregunta 2 de 4
¿Por qué el kit le pasa --no-usage-statistics y --no-performance-crux a Chrome DevTools MCP?competencia
Correcto
Las dos opciones vienen activadas por defecto en la 1.10.1, según el propio --help. En una prueba local, no hay motivo para enviar datos hacia afuera.No es esa
Las dos opciones vienen activadas por defecto en la 1.10.1, según el propio --help. En una prueba local, no hay motivo para enviar datos hacia afuera.Repasar: ¿Playwright MCP o DevTools MCP?Pregunta 3 de 4
El servidor rechazó la llamada de consola diciendo que falta el pageId. ¿Qué hacer?
Correcto
En la 1.10.1 el enrutamiento por página viene activado: toda herramienta de página pide el pageId, que viene de list_pages.No es esa
En la 1.10.1 el enrutamiento por página viene activado: toda herramienta de página pide el pageId, que viene de list_pages.Repasar: ¿Playwright MCP o DevTools MCP?Pregunta 4 de 4
¿Qué servidor conectas para que el agente rellene y envíe un formulario?
Correcto
Playwright MCP es el fuerte para actuar; DevTools MCP para investigar. Los dos pueden quedar conectados juntos.No es esa
Playwright MCP es el fuerte para actuar; DevTools MCP para investigar. Los dos pueden quedar conectados juntos.Repasar: ¿Playwright MCP o DevTools MCP?Prueba terminada
Acertaste {a} de {n}. Si aciertas todas, la clase se marca como completada.Elige una alternativa. La explicación aparece después de tu intento.
06En tres frases
Consola y redLo que la pantalla esconde, list_console_messages y list_network_requests lo muestran.
Telemetría desactivadaLa 1.10.1 envía datos de uso a Google por defecto; el kit lo desactiva.
Uno actúa, el otro investigaPlaywright MCP para la tarea, DevTools MCP para el porqué.