DEV Community

Emad Omar
Emad Omar

Posted on

Give Claude Your Browser Console — It Debugs Like a Real Developer

#mcp #claude #playwright #javascript

Give Claude Your Browser Console — It Debugs Like a Real Developer

You know that moment when something breaks in your web app and you open DevTools, check the console, scan the network tab, find the failing API call, read the JSON response — and finally figure out what went wrong?

That's exactly what mare-browser-mcp gives Claude.

Not a screenshot. Not a DOM dump. The actual console errors, the actual network requests, the actual JSON responses from your API. Claude reads them the same way you do.

The Problem With Other Browser MCP Tools

Most browser MCP servers give the LLM one move: take a screenshot.

Screenshots are pixels. Claude has to guess what's happening from an image. It can't see a 401 response. It can't read a JS stack trace. It can't tell if an API returned { error: "session expired" }.

That's not debugging. That's guessing.

What mare-browser-mcp Does Differently

One tool does the heavy lifting: browser_debug

Call it after anything goes wrong and you get back:

  • Current URL and page title
  • All console logs (errors, warnings, everything)
  • All network requests with status codes and full JSON response bodies 
{
  "current_url": "https://myapp.com/dashboard",
  "title": "Dashboard",
  "console": [
    { "type": "error", "text": "Uncaught TypeError: Cannot read properties of undefined (reading 'user')" }
  ],
  "network": [
    { "url": "/api/session", "method": "POST", "status": 401, "body": { "error": "token expired" } }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Claude reads that and knows exactly what happened — token expired, session failed, JS crashed because user was undefined. Same conclusion you'd reach in 30 seconds of DevTools.

The Full Toolkit

8 tools, each with a clear job:

  • browser_navigate — go to a URL, optionally clear logs before starting
  • browser_act — click, fill, keypress, scroll — batch multiple steps in one call
  • browser_debug — start here when something breaks
  • browser_query — read DOM elements without a screenshot
  • browser_eval — run any JavaScript in the page
  • browser_scroll — scroll by pixels or to a specific element
  • browser_wait_for_network — wait for a specific API call to complete
  • browser_screenshot — last resort only

Real Debugging Session 

1. browser_navigate("https://myapp.com", clear_logs: true)

2. browser_act([
     { action: "fill", selector: "#email", value: "user@example.com" },
     { action: "fill", selector: "#password", value: "secret" },
     { action: "click", selector: "button[type=submit]" }
   ])

3. browser_wait_for_network({ url_pattern: "/api/session", method: "POST" })

4. browser_debug({ console_types: ["error"] })
   → sees 401 + "token expired" in the response body

5. Figures out the fix. No back and forth. No screenshots.
Enter fullscreen mode Exit fullscreen mode

This is the workflow. Claude acts, waits for the network, reads the debug output, understands what happened.

Install in 5 Commands 

git clone https://github.com/emadklenka/mare_browser_mcp
cd mare_browser_mcp
pnpm install
npx playwright install chromium
pnpm run setup
Enter fullscreen mode Exit fullscreen mode

pnpm run setup registers the MCP with Claude Code automatically — no manual path config.

It's Free

MIT license. Use it however you want.

If it saves you debugging time → https://buymeacoffee.com/emadomar

GitHub → https://github.com/emadklenka/mare_browser_mcp

Built this because I was tired of Claude guessing from screenshots. Now it debugs the way I do.

Top comments (0)