Claude Code Browser MCP Setup — Documentation skill for Claude Code

Claude Code Browser MCP Setup

Documentation for using the Chrome DevTools MCP server with Claude Code to enable browser automation and web interaction capabilities.

Overview

This setup allows Claude Code to interact with Chrome browser through the Model Context Protocol (MCP). The Chrome DevTools MCP server provides tools for:

• Page navigation and management
• Taking snapshots and screenshots of web pages
• Clicking, filling forms, and interacting with page elements
• Network request monitoring
• Performance analysis
• JavaScript execution in browser context

Installation

1. Install the Chrome DevTools MCP Server

npm install -g @modelcontextprotocol/server-chrome-devtools

Or using npx (no installation required):

npx @modelcontextprotocol/server-chrome-devtools

2. Configure Claude Code

Add the MCP server to your Claude Code configuration file at `~/.config/claude/claude_desktop_config.json`:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-chrome-devtools"
      ]
    }
  }
}

If you installed globally, you can use:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "mcp-server-chrome-devtools"
    }
  }
}

3. Launch Chrome with Remote Debugging

The MCP server connects to Chrome via the Chrome DevTools Protocol. You need to launch Chrome with remote debugging enabled:

**macOS:**

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

**Linux:**

google-chrome --remote-debugging-port=9222

**Windows:**

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

4. Restart Claude Code

After configuration, restart Claude Code to load the MCP server.

Available Tools

The Chrome DevTools MCP provides the following tools (all prefixed with `mcp__chrome-devtools__`):

Page Management

• `l