Give Your Agent a Browser

Our agents ship front-end changes all day.

The build passes, the types check, but nobody saw the page.

We gave the agent a browser and told it to look before committing.

The Manual Feedback Loop

An agent can implement a feature in minutes. But "implemented" and "works" are different things. The agent edits the right files, the types check, the build passes. None of that tells you whether the button actually appears where it should, whether the tree expands when you click it, or whether the page looks right after a refactor.

The manual feedback loop looks like this:

Every pink box is a developer context switch. The agent is idle, waiting for human eyes.

Chrome DevTools MCP

Direct browser access for coding agents.

Chrome DevTools MCP is an MCP server by Google that gives coding agents direct access to a live Chrome browser via the Chrome DevTools Protocol. It can navigate pages, take screenshots and accessibility snapshots, click elements, fill forms, read console output, inspect network requests, run Lighthouse audits, and record performance traces.

This turns the feedback loop from a back-and-forth conversation into something the agent handles on its own:

Every purple box is the agent working autonomously. The developer writes the prompt and reviews the result. Everything in between happens without switching windows.

Setup

Connect Claude Code to your running Chrome session.

The following setup reuses your existing Chrome instance, including cookies and login state. Useful for testing authenticated flows without extra configuration.

1. Open chrome://inspect/#remote-debugging in Chrome and toggle on "Allow remote debugging for this browser instance".

2. Install the MCP server globally in Claude Code:

claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest --autoConnect

3. Add to ~/.claude/settings.json to allow MCP tool calls without per-call approval prompts:

{
  "permissions": {
    "allow": ["mcp__chrome-devtools__*"]
  }
}

Chrome must be running before starting Claude Code. The --autoConnect flag connects to the existing instance but won't launch one.

What the Agent Can Do

The browser is now part of the agent's toolkit.

• Fix verifiable bugs: Generate a fix, then confirm via console output, network responses, or a screenshot. No human in the loop
• Debug layout issues: Inspect DOM and CSS in real-time, screenshot across viewports, identify what's breaking
• Performance audits: Record a trace, identify slow requests and rendering bottlenecks, suggest fixes, re-test to confirm
• Security audits: Scan for over-exposed form fields, unprotected routes, and secrets leaked in network responses or the DOM
• SEO optimization: Inspect rendered HTML, meta tags, heading structure, and LCP/CLS metrics to surface and fix issues
• Debug authenticated flows: Test behind login without extra setup. Cookies are already there from your Chrome session

Example Prompts

Debugging console errors on a live page:

"List all console error messages on this page. For each, read the stack trace and find the source file in this codebase. Then fix the bugs."

Performance profiling:

"Start a performance trace with reload on http://localhost:3000. Analyze the insights, check LCP breakdown and document latency. Suggest concrete code changes."

Testing responsive design while logged in:

"I'm logged into the admin dashboard. Screenshot the current viewport. Emulate iPhone 12 (390x844, 3x, touch). Screenshot again. Compare what breaks."