Make Claude Code See Your Browser DevTools with Playwright MCP

Fazm Team··3 min read

Make Claude Code See Your Browser DevTools with Playwright MCP

Claude Code is powerful for editing files and running terminal commands. But it cannot see what is happening in your browser. It cannot read console errors, inspect network requests, or see what your UI actually looks like. The Playwright MCP server fixes this.

What Playwright MCP Gives You

The Playwright MCP server connects Claude Code to a real browser instance. Once connected, Claude Code can:

  • Take screenshots - See exactly what the rendered page looks like
  • Read console logs - Access console.log output, warnings, and errors
  • Monitor network requests - See API calls, responses, and failures
  • Click and interact - Navigate the UI, fill forms, and test flows
  • Read the DOM - Inspect element structure and accessibility tree snapshots

This turns Claude Code from a code-only tool into a full-stack debugging assistant.

Setting It Up

Add the Playwright MCP server to your Claude Code configuration. The server launches a Chromium browser that Claude Code controls through the MCP protocol. You can configure it to use your existing Chrome profile so it has access to your logged-in sessions.

The key settings are the browser type, whether to run headless or visible, and the viewport size. For debugging, run it visible so you can watch what the agent does.

The Debugging Workflow

The workflow changes significantly once Claude Code can see your browser:

  1. You describe a bug - "the form submits but nothing happens"
  2. Claude Code navigates to the page and takes a screenshot
  3. It fills out the form and submits it
  4. It reads the console for errors and checks network requests
  5. It identifies the failing API call or JavaScript error
  6. It goes back to the code and fixes the issue
  7. It refreshes and verifies the fix

No more copying and pasting error messages. No more describing what you see on screen. The agent sees it directly.

When This Matters Most

Frontend debugging is where this shines. CSS issues that only appear at certain viewport sizes. API errors that happen only with specific form inputs. Race conditions between component renders. These are all problems that require seeing the browser to diagnose, and Playwright MCP makes that possible from within Claude Code.

Fazm is an open source macOS AI agent. Open source on GitHub.

More on This Topic

Related Posts