How to Use Claude Chrome DevTools MCP Server (2026)

The Chrome DevTools MCP (Model Context Protocol) server bridges Claude with your Chrome browser, allowing the AI to inspect pages, read console logs, execute JavaScript, take screenshots, monitor network requests, and debug web applications in real time. This is one of the most powerful MCP integrations available for web developers, and this guide walks you through the complete setup and usage.

What Is the Chrome DevTools MCP Server?

MCP (Model Context Protocol) is an open standard created by Anthropic that enables AI assistants like Claude to interact with external tools and data sources. The Chrome DevTools MCP server specifically exposes Chrome's debugging protocol to Claude, giving the AI the ability to:

Inspect and read the DOM of any web page
Execute JavaScript in the browser console
Monitor and analyze network requests
Read console logs and errors
Take screenshots of the current page
Interact with page elements (click, type, navigate)
Analyze CSS styles and computed layouts

Why Use It?

Traditional Debugging	With Chrome DevTools MCP
Manually inspect elements	Ask Claude to find the problematic element
Read console errors yourself	Claude reads and explains errors automatically
Write debug scripts manually	Claude writes and executes debug scripts in real time
Screenshot and paste to AI	Claude takes its own screenshots and analyzes them
Context-switch between browser and AI	Claude has direct browser access in one workflow

Prerequisites

Before setting up the Chrome DevTools MCP server, ensure you have:

Google Chrome (version 120 or later)
Node.js (version 18 or later)
Claude Desktop app (latest version) or Claude Code CLI
Basic familiarity with the terminal

Verify your Node.js installation:

node --version
# Should output v18.x.x or higher

npm --version
# Should output 9.x.x or higher

Step-by-Step Setup

Step 1: Launch Chrome with Remote Debugging

Chrome must be started with the remote debugging port enabled. Close all Chrome instances first, then launch it from the terminal:

macOS:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-debug

Windows (PowerShell):

& "C:\Program Files\Google\Chrome\Application\chrome.exe" `
  --remote-debugging-port=9222 `
  --user-data-dir="$env:TEMP\chrome-debug"

Linux:

google-chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-debug

You can verify the debugging port is active by navigating to http://localhost:9222/json in another browser or tab. You should see a JSON array listing the open tabs.

Step 2: Configure Claude Desktop

Open your Claude Desktop MCP configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

Add the Chrome DevTools MCP server to the configuration:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic-ai/chrome-devtools-mcp-server"
      ],
      "env": {
        "CHROME_DEBUGGING_URL": "http://localhost:9222"
      }
    }
  }
}

Save the file and restart Claude Desktop.

Step 3: Configure for Claude Code (Alternative)

If you are using Claude Code (CLI) instead of Claude Desktop, add the MCP server to your project's .mcp.json file:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic-ai/chrome-devtools-mcp-server"
      ],
      "env": {
        "CHROME_DEBUGGING_URL": "http://localhost:9222"
      }
    }
  }
}

Or add it globally via the CLI:

claude mcp add chrome-devtools \
  --command "npx" \
  --args "-y" "@anthropic-ai/chrome-devtools-mcp-server" \
  --env CHROME_DEBUGGING_URL=http://localhost:9222

Step 4: Verify the Connection

In Claude Desktop or Claude Code, start a new conversation and ask:

Can you see my Chrome browser? List the currently open tabs.

If the setup is correct, Claude will use the MCP tools to query Chrome and return a list of your open tabs with their URLs and titles.

Available MCP Tools

Once connected, Claude has access to these Chrome DevTools tools:

Tool	Description	Example Use
`navigate`	Navigate to a URL	"Go to https://example.com"
`screenshot`	Capture current page screenshot	"Take a screenshot of the page"
`get_console_logs`	Read browser console output	"Show me any console errors"
`execute_javascript`	Run JS in the page context	"Get the value of the search input"
`get_page_content`	Read the DOM/HTML of the page	"What elements are on this page?"
`get_network_logs`	View network requests	"Show me all failed API requests"
`click_element`	Click a page element	"Click the submit button"
`type_text`	Type into an input field	"Type 'test@email.com' in the email field"
`get_styles`	Read CSS styles for an element	"What styles are applied to the header?"

Practical Use Cases

1. Debugging a Broken UI

Navigate to the page with the issue and ask Claude to investigate:

Navigate to http://localhost:3000/dashboard and take a screenshot.
The sidebar menu is not rendering correctly.
Check the console for errors and inspect the sidebar component's
CSS to find what is causing the layout issue.

Claude will take a screenshot, read console errors, inspect the DOM, and analyze CSS -- then explain the root cause and suggest a fix.

2. Monitoring API Calls

Go to http://localhost:3000/users and monitor the network requests.
I am seeing slow load times. Identify which API calls are taking
the longest and check if any are returning errors.

Claude will analyze the network waterfall and present findings in a structured format.

3. Automated Testing and Validation

Navigate to http://localhost:3000/signup and test the form validation:
1. Try submitting with empty fields
2. Try an invalid email format
3. Try a password under 8 characters
4. Take a screenshot after each attempt showing the error messages

4. Performance Auditing

Navigate to https://mysite.com and analyze the page performance:
- Check the total number of network requests
- Identify any requests larger than 1MB
- Look for render-blocking resources
- Check for JavaScript errors in the console

5. Extracting Page Data

Navigate to https://example.com/pricing and extract all pricing plan
information into a structured JSON format, including plan names,
prices, and feature lists.

Troubleshooting

Chrome DevTools connection fails

If Claude cannot connect to Chrome, check these common issues:

# Verify Chrome debugging port is active
curl http://localhost:9222/json/version

# Expected output (example):
# {
#   "Browser": "Chrome/122.0.6261.94",
#   "Protocol-Version": "1.3",
#   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/..."
# }

Common errors and solutions

Error	Cause	Solution
"Cannot connect to Chrome"	Chrome not running with debug flag	Restart Chrome with `--remote-debugging-port=9222`
"Connection refused on port 9222"	Port conflict or firewall	Check if another process uses port 9222; try a different port
"No tabs found"	Chrome launched but no tabs open	Open at least one tab in the debug Chrome instance
MCP server not appearing in Claude	Config file syntax error	Validate your JSON config; restart Claude Desktop
"Permission denied" on macOS	Node.js permissions issue	Run `chmod +x $(which npx)` or reinstall Node.js

Using a Different Port

If port 9222 is taken, use any available port:

# Launch Chrome on port 9333
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9333 \
  --user-data-dir=/tmp/chrome-debug

# Update your MCP config accordingly
"env": {
  "CHROME_DEBUGGING_URL": "http://localhost:9333"
}

Security Considerations

Never expose the debugging port to the network. The --remote-debugging-port flag should only be used on localhost. Anyone with access to this port has full control of your browser.
Use a separate Chrome profile. The --user-data-dir flag creates an isolated profile, keeping your debug sessions separate from your personal browsing data, cookies, and passwords.
Close the debug instance when done. Do not leave a debugging-enabled Chrome running when you are not actively using it with Claude.

Conclusion

The Chrome DevTools MCP server is a game-changer for web developers using Claude. Instead of manually copying error messages and describing visual bugs in text, you can give Claude direct access to see and interact with your browser. This dramatically speeds up debugging, testing, and front-end development workflows.

For teams that need AI-generated visual content to complement their web applications -- from product demo videos to AI-powered avatars for customer support -- Hypereal AI provides affordable API access to state-of-the-art video generation, talking avatar creation, and image synthesis that integrates seamlessly with modern development workflows.