Test your local web app in a real browser and fix console errors in one loop
Give a coding agent a browser tool, such as Playwright MCP, Chrome DevTools MCP, Claude Code's Chrome integration or Cursor's built-in browser. The agent opens your local dev server, clicks through the pages you name, reads console errors and failed network requests, fixes the code, and reloads to prove each fix. Keep the pages small and the list of routes short, because browser snapshots fill the context fast. Review every fix before you commit, because agents sometimes silence an error instead of fixing it.
You get a table of the console errors and failed requests on each route you named, a small fix for each one, and proof from a reload that the error is gone.
- Difficulty
- Intermediate
- Time
- 30-90 minutes
- Sources
- 4 · 4 independent
- Updated
- 2026-10-13
- Cost:
- Included in your coding agent plan. Playwright MCP and Chrome DevTools MCP are free and open source.
The prompt
Fill the blanks here, or leave them for your agent to ask. Pick the tab for your agent. The hand-off button gives any agent this page as markdown.
You have a browser tool. Use it to test my local app and fix front-end errors. App: [http://localhost:3000], started with [npm run dev]. If it is not running, start it. Routes to test: [/, /login, /dashboard, /settings]. Test account: [test@example.com / password from .env.local]. Never use a real customer account. Loop for each route: 1. Open the route. Wait for the page to load. Click the main controls once: [open the modal, submit the form with empty fields, switch tabs]. 2. Read the console messages and the network requests. Keep only errors, warnings and requests with status 400 or higher. Do not paste the full page snapshot back to me. 3. For each error, find the source file and line. Explain the root cause in one sentence. 4. Make the smallest fix. Do not wrap code in try/catch, add !important, or suppress a warning just to make the console quiet. If the only fix is to hide the error, stop and ask me. 5. Reload the route and check the console again. Report the before and after. Rules: - Do not change tests, lint rules or TypeScript config to make an error go away. - Do not touch [src/payments/, the database schema]. - Do not commit, push or deploy. Stop when the table is done. At the end, give me a table: route, error, root cause, file changed, fixed (yes/no), evidence from the reload.
Human checkpoints: the agent stops and asks you
- Approve the list of routes and the test account before the agent opens the browser.
- Review the diff for each fix before it is committed.
The browser tool shows page content, console output and form data to the model. Point it at a local or staging app with test data, not a logged-in production session.
What you need
- A coding agent that can use MCP or a built-in browserapp
Free. Install with one command for Claude Code or Codex.
Free alternative from the Chrome team. Gives console, network and performance tools.
- A local or staging copy of your app with test datadata
- Node.jsapp
Both browser MCP servers run through npx.
Steps
Pick one browser tool and connect it
Choose Playwright MCP for repeatable clicks and forms, Chrome DevTools MCP for console, network and performance detail, Claude Code's `--chrome` flag to use your own Chrome window, or Cursor's built-in browser. Install it and check that the agent lists its tools (in Claude Code run /mcp, in Gemini CLI run /mcp).
Check: The agent lists browser tools such as browser_console_messages or list_console_messages.
Start the dev server and choose a small set of routes
Start the app yourself or let the agent start it. Write down three to six routes and the clicks that matter on each. Use a test account. If a page is very large, make a trimmed test page, because one tester hit the tool's token limit on a full page.
Check: The app loads at the local URL and you have a short list of routes.
Ask for a console and network audit first
Run the prompt but stop after step 2 of the loop the first time. Ask only for errors, warnings and failed requests. Do not ask for full logs or full page snapshots.
Check: You see a short table of errors per route, with file and line where the stack trace gives one.
Let the agent fix one error at a time
The agent edits the code, reloads the route and reads the console again. For layout bugs, ask it to measure elements with a script in the page or take a screenshot, instead of guessing CSS.
Check: Each fix comes with a before and after console reading from a fresh reload.
Review the diff for hidden errors
Search the diff for new try/catch blocks, empty catch handlers, console overrides, !important rules and disabled lint rules. These make the console quiet without fixing the cause.
Check: Every change fixes a cause you can name. Nothing only hides a message.
Run your normal checks, then commit yourself
Run the test suite, type checker and linter. Commit the fixes yourself. If you want this loop to keep working, add the routes and the debugging instructions to CLAUDE.md or AGENTS.md.
Check: Tests, types and lint pass, and the console is clean on every route in your list.
What goes wrong
The browser tool returns more tokens than the agent can take, and the session stops.
Fix: Test smaller pages, ask for console and network output only, and avoid full snapshots. The Playwright MCP README says the Playwright CLI with skills uses less context than MCP for coding agents.
The agent makes several CSS fixes in a row without ever looking at the rendered page.
Fix: Make it open the page, take a screenshot and measure the element sizes with a script before it edits again. One developer reports five failed commits that ended once the agent could measure the DOM.
The fix silences the symptom, for example many !important rules or a try/catch around the failing call.
Fix: Ban those patterns in the prompt and check the diff for them. Ask a human who knows the front end to review style fixes.
Some browser actions fail or time out, such as resizing the page or typing into a field.
Fix: Ask the agent to report the tool error instead of retrying forever, and test that part by hand. A LogRocket walkthrough reports that resize_page kept failing and typing timed out.
Claude Code's browser tools stop working in a long session.
Fix: Run /chrome and pick Reconnect extension. Anthropic's docs say the extension's service worker can go idle. A JavaScript alert on the page can also block it, so dismiss it by hand.
Evidence
Two or more public accounts from different people or sites describe the same job. We summarise each source in our own words. Open the original before you rely on it.
- Blog· ClaudeHow CyberAgent achieved fully automated runtime error fixing using Chrome DevTools MCP
The team says Claude with Chrome DevTools MCP checked 32 components and 236 Storybook stories in about an hour and fixed one runtime error and two warnings. They note that the advanced tool features need some user knowledge.
Kazunari Hara and others (CyberAgent and Chrome) · developer.chrome.com - Blog2025-07-22· Claude CodeDebugging CSS with Claude Code
The author added Playwright MCP and fixed a widget's styling in about 30 minutes. A full page overflowed the 25,000 token tool limit, so he trimmed the test page. The fix used many !important rules, which he planned to have reviewed.
Goutham Veeramachaneni · gouthamve.dev - Blog2026-04-02· Claude CodeLetting Claude Code see the page with Playwright MCP
The author says Claude Code made five commits that did not fix a modal overflow. With Playwright MCP it measured the DOM, found a height rule as the cause, fixed it, and confirmed the fix by measuring again.
Vincent Qiao · blog.vincentqiao.com - Blog2025-10-21· Gemini CLIDebugging with Chrome DevTools MCP
Gemini CLI read a "React is not defined" console error on a blank page, fixed it and confirmed the page rendered. The resize tool kept failing and typing into a search bar timed out.
Emmanuel John · blog.logrocket.com
- Use Claude Code with Chromechecked 2026-10-13
- Playwright MCP READMEchecked 2026-10-13
- Chrome DevTools MCP READMEchecked 2026-10-13
- Cursor browser toolchecked 2026-10-13
- Best practices for Claude Code (give Claude a way to verify its work)checked 2026-10-13
Report how it went
Every report makes this page better for the next person and the next agent. Reports are reviewed before they count. Agents can report with the report_run tool.
Loading reports…