E1 · Find the 404
5 minRun the first block. Open kit/site/index.html and find the line that asks for the missing file.
Done when: node devtools.mjs → erros no console: 2 · requisições: 3 · com falha: 1 and saída: 1.
Lesson 3 · 15 min
Chrome DevTools MCP: see what the agent did (console, network)
When the agent says "I couldn't do it," the answer is usually in the console or the network: a file that returned 404, a JavaScript error. Chrome DevTools MCP gives the agent the same tabs you open with F12. In this lesson you list the console and the network of the kit page, find the planted error, and bring it to zero.
Start the lesson
In this lesson you will
- 1list_console_messages and list_network_requests
- 2The planted error: a promocoes.json that returns 404
- 3Telemetry is on by default, and how to turn it off
- 4pageId, sandbox, and the other gotchas in 1.10.1
Goal: use Chrome DevTools MCP to see the console and network of the page the agent opened, find the error, and bring it to zero in a fixed copy.
01The agent's F12
Click each block.
Click each block in the diagram to see what it does.
The page looks right. The console and the network show that a file is missing.
02Playwright MCP or DevTools MCP?
One acts, the other investigates.
1. To act
Fill in, click, and wait using the accessibility tree, with refs. Playwright MCP also lists console and network (browser_console_messages, browser_network_requests), but its strength is the task.
2. To investigate
Console with levels, every request with its status, performance traces, and Lighthouse. It's the server to ask "why did it fail?".
Both can stay connected to the same agent: lesson 2's configurar.mjs already wrote both into .mcp.json.
3. Gotchas in 1.10.1
Telemetry: by default the server sends usage statistics to Google and sends performance trace URLs to the CrUX API. The kit turns this off with --no-usage-statistics and --no-performance-crux.
Every page tool needs a pageId (get it from list_pages). With Playwright's Chromium, pass --chromeArg=--no-sandbox, which is the Playwright default; without it the browser closes with "Target closed".
New version
Version 1.11.0 came out on 10/15/2026, according to the npm registry, and was not tested here. The server itself warns "Update available"; the kit stays on 1.10.1 until the next capture.
03Find the error and bring it to zero
devtools.mjs opens the kit's home page and lists the console and network. The fix runs on a copy, without touching the kit.
Terminal · console and network of the kit page
cd ~/projetos/formacao-webmcp-navegador-v72/kit node devtools.mjs; echo "saída: $?"
Terminal · fix in a copy and check
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: $?"Example from the repository
→ 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: 1Two console errors (the browser's 404 and the page's own message) and one failed request. On screen, the page only says "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: 0The SITE variable swaps the served folder for the copy in /tmp/kit3-aula3, which has the promocoes.json. Zero errors, zero failures, exit 0.
04Practice
The kit's error and your site. Each exercise has a "done when".
E2 · Bring it to zero on the copy
10 minRun the second block. Then change the text in the copy's promocoes.json and check that the page shows the new text.
Done when: the second block (SITE="$E" node devtools.mjs, with E=/tmp/kit3-aula3) → erros no console: 0 · requisições: 3 · com falha: 0 and saída: 0.
E3 · Your site's console
10 minRun devtools.mjs with the address of one of your sites. For each error, note whether an agent would lose anything because of it.
Done when: node devtools.mjs with your site's address → line erros no console: N · requisições: M · com falha: F, with N and F written down.
05Lesson quiz
Question 1 of 4
The page shows "Sem promoções no momento" and looks normal. Where does the agent find out something broke?skill
Correct
The error only shows up in list_console_messages and list_network_requests. The screen and the tree show the page's fallback text.Not that one
The error only shows up in list_console_messages and list_network_requests. The screen and the tree show the page's fallback text.Review: The agent's F12Question 2 of 4
Why does the kit pass --no-usage-statistics and --no-performance-crux to Chrome DevTools MCP?skill
Correct
Both options are on by default in 1.10.1, according to --help itself. In a local test, there is no reason to send data out.Not that one
Both options are on by default in 1.10.1, according to --help itself. In a local test, there is no reason to send data out.Review: Playwright MCP or DevTools MCP?Question 3 of 4
The server refused the console call, saying the pageId is missing. What do you do?
Correct
In 1.10.1, per-page routing is on by default: every page tool asks for the pageId, which comes from list_pages.Not that one
In 1.10.1, per-page routing is on by default: every page tool asks for the pageId, which comes from list_pages.Review: Playwright MCP or DevTools MCP?Question 4 of 4
Which server do you turn on so the agent can fill in and submit a form?
Correct
Playwright MCP is the strong one for acting; DevTools MCP for investigating. You can keep both on at the same time.Not that one
Playwright MCP is the strong one for acting; DevTools MCP for investigating. You can keep both on at the same time.Review: Playwright MCP or DevTools MCP?Quiz complete
You got {a} of {n} right. Get them all right and the lesson is marked as complete.Pick an option. The explanation appears after you answer.
06In three sentences
Console and networkWhat the screen hides, list_console_messages and list_network_requests show.
Telemetry offVersion 1.10.1 sends usage data to Google by default; the kit turns it off.
One acts, one investigatesPlaywright MCP for the task, DevTools MCP for the why.