3 Ways to Give Claude Access to Your Browser

Claude Code can write code, read files, and run commands. But until recently, it couldn’t see your browser. It couldn’t check if the UI you just shipped actually looks right. It couldn’t read the error in your console. It couldn’t fill out a form to test a workflow.

Now there are three tools that give Claude browser access. They all solve the same problem but in different ways.

1. Claude in Chrome

Claude in Chrome

Anthropic

Claude in Chrome is a Chrome extension from Anthropic. It takes screenshots of your browser, understands what it sees, and clicks where it needs to. It works in your real browser with your real login sessions — no setup, no fake accounts.

Claude Code v2.1.84
Opus 4.6 · ~/my-app
> fill out the support ticket form in Chrome with my info
●I'll navigate to the support page and fill out the form.
Navigate to support.company.com/tickets/new
Screenshot taken — I can see the ticket form
Filling in Name: Allie Jones
Filling in Email: allie@company.com
Click Submit
>
Opus 4.6 (1M context)|ctx:19%|~/my-app
▸▸ bypass permissions on (shift+tab to cycle)

When to use it:

Testing a UI change you just made — “does this look right?”
Filling out forms, clicking through workflows
Anything where you’d normally say “let me show you what I see”
When you need Claude to use your logged-in sessions (Salesforce, Jira, internal tools)

Good to know:

Works with any web app you’re already logged into
Can record GIFs of what it does
Requires a Claude Max plan
Higher token cost because of screenshots

1. Install the Claude in Chrome extension from the Chrome Web Store
 https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn

2. Restart Claude Code (close and reopen)

3. Inside Claude Code, run:
 /chrome

4. Select "Enabled by default" so you don't have to pass --chrome every session

5. Manage which sites Claude can access in the Chrome extension settings

Works with Google Chrome and Microsoft Edge. Not yet supported on Brave, Arc, or other Chromium browsers.

2. Playwright MCP

Playwright MCP

Microsoft

Playwright is Microsoft’s browser automation tool. The Playwright MCP server lets Claude control a browser programmatically. Instead of taking screenshots, it reads the page structure as text. It knows there’s a button called “Sign in” without needing to see it.

Claude Code v2.1.84
Opus 4.6 · ~/my-app
> go to localhost:3000 and test the login flow
●I'll use Playwright to test the login flow.
Navigate to localhost:3000
Snapshot: heading "Welcome back", textbox "Email", textbox "Password", button "Sign in"
Fill "Email" with test@example.com
Fill "Password" with ••••••••
Click "Sign in"
●Login successful. Redirected to /dashboard.
>
Opus 4.6 (1M context)|ctx:19%|~/my-app
▸▸ bypass permissions on (shift+tab to cycle)

When to use it:

Testing flows (login, checkout, form submission)
Scraping data from a page
Automating repetitive browser tasks
When you don’t need your logged-in sessions

Good to know:

Works with Chrome, Firefox, and WebKit
Opens a clean browser — no saved passwords, no cookies
Free and open source
Lower token cost than Claude in Chrome

1. Add the Playwright MCP server to Claude Code:
 claude mcp add playwright npx @playwright/mcp@latest

2. Verify it's registered:
 claude mcp list

3. Inside Claude Code, check it's connected:
 /mcp

4. When prompting, say "use Playwright MCP" in your first message.
 Claude sometimes defaults to running Playwright through Bash
 if you don't mention MCP by name.

Tip: Pin the version instead of using @latest to avoid
breaking changes. Requires Node.js 18+.

3. Chrome DevTools MCP

Chrome DevTools MCP

Google

Chrome DevTools MCP gives Claude access to the same developer tools panel that engineers use to debug websites. It can read error messages, check network requests, and find performance problems that you can’t see on the page itself.

Claude Code v2.1.84
Opus 4.6 · ~/my-app
> check the console logs on localhost:3000 for errors
●I'll connect to Chrome DevTools and check the console.
Console: Error — Failed to load /api/auth 500
Console: TypeError — Cannot read property 'token'
Network: bundle.js — 842 KB (consider splitting)
●Found 2 errors. The auth endpoint is returning 500, and there's an unhandled null token.
>
Opus 4.6 (1M context)|ctx:19%|~/my-app
▸▸ bypass permissions on (shift+tab to cycle)

When to use it:

Finding errors that don’t show up visually
Debugging slow page loads
Checking if API calls are failing
Performance optimization

Good to know:

Reads console errors, network requests, and performance data
Can simulate slow connections and throttled CPUs
Connects to your running Chrome — keeps your sessions
Lower token cost (text only, no images)

1. Add the DevTools MCP server to Claude Code:
 claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

2. Verify it's registered:
 claude mcp list

3. For basic use (headless, no login sessions):
 claude mcp add chrome-devtools npx chrome-devtools-mcp@latest --slim --headless

4. For sites that need your login sessions, launch Chrome
 with a debug port:
 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

 Then connect DevTools MCP to that port.

5. For persistent logins, use a separate Chrome profile:
 --user-data-dir=/tmp/chrome-debug-profile
 Chrome saves cookies and sessions in that directory.

Quick Comparison

Which One Should You Use?

Start with Claude in Chrome if you’re not sure. It’s the most intuitive — Claude sees what you see. If you’re testing a UI, checking a layout, or need Claude to interact with a logged-in app, this is the one.

Use Playwright when you want Claude to automate browser tasks or test flows without your login sessions. It’s faster, cheaper, and works across browsers.

Use DevTools when something is broken and you can’t see why. The page looks fine but the API is failing silently, or the page is slow and you need to know what’s causing it.

You can use all three in the same project. They solve different problems.