Chrome DevTools MCP

A Model Context Protocol (MCP) server that provides Chrome DevTools Protocol integration through MCP. This allows you to debug web applications by connecting to Chrome's developer tools.

Available as a Claude Desktop Extension (.dxt) for easy one-click installation!

What This Does

This MCP server acts as a bridge between Claude and Chrome's debugging capabilities. Once installed in Claude Desktop, you can:

• Connect Claude to any web application running in Chrome
• Debug network requests, console errors, and performance issues
• Inspect JavaScript objects and execute code in the browser context
• Monitor your application in real-time through natural conversation with Claude

Note: This is an MCP server that runs within Claude Desktop - you don't need to run any separate servers or processes.

Features

• Network Monitoring: Capture and analyse HTTP requests/responses with filtering options
• Console Integration: Read browser console logs, analyse errors, and execute JavaScript
• Performance Metrics: Timing data, resource loading, and memory utilisation
• Page Inspection: DOM information, page metrics, and multi-frame support
• Storage Access: Read cookies, localStorage, and sessionStorage
• Real-time Monitoring: Live console output tracking
• Object Inspection: Inspect JavaScript objects and variables

Installation

Option 1: Claude Desktop Extension (Easiest)

Download the pre-built extension:

1. Download the latest .dxt file from Releases
2. Open Claude Desktop
3. Go to Extensions and install the downloaded .dxt file
4. Configure Chrome path if needed in extension settings

The extension includes all dependencies and is ready to use immediately!

Option 2: MCP CLI (Advanced)

Quick Install (most common):

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

Note: The mcp command is part of the Python MCP SDK. Install it with pip install mcp if not already available.

All Installation Options:

# Clone the repository
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp

# The --with-editable flag uses pyproject.toml to install dependencies

# Basic installation with local dependencies
mcp install server.py --with-editable .

# Install with custom name
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

# Install with environment variables
mcp install server.py -n "Chrome DevTools MCP" --with-editable . -v CHROME_DEBUG_PORT=9222

# Install with additional packages if needed
mcp install server.py -n "Chrome DevTools MCP" --with-editable . --with websockets --with aiohttp

# Install with environment file (copy .env.example to .env first)
cp .env.example .env
# Edit .env with your settings
mcp install server.py -n "Chrome DevTools MCP" --with-editable . -f .env

Option 3: Claude Code Integration

For Claude Code CLI users:

1. Clone this repository

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp

2. Install dependencies with UV (creates venv)

uv sync  # Creates .venv and installs dependencies

3. Add MCP server using Claude CLI with absolute paths

IMPORTANT: Claude Code needs absolute paths to both the Python interpreter and the server script to work correctly.

Recommended setup using absolute paths:

# Get the absolute paths
SERVER_PATH="$(pwd)/server.py"
PYTHON_PATH="$(pwd)/.venv/bin/python"

# Add the server with absolute paths
claude mcp add chrome-devtools "$PYTHON_PATH" "$SERVER_PATH" -e CHROME_DEBUG_PORT=9222

Alternative: Using the system Python (if dependencies are installed globally):

# Only if you've installed dependencies globally
claude mcp add chrome-devtools python "$(pwd)/server.py" -e CHROME_DEBUG_PORT=9222

With custom scope:

# Add to user scope (available across all projects)
claude mcp add chrome-devtools "$(pwd)/.venv/bin/python" "$(pwd)/server.py" -s user -e CHROME_DEBUG_PORT=9222

# Add to project scope (only for this project)
claude mcp add chrome-devtools "$(pwd)/.venv/bin/python" "$(pwd)/server.py" -s project -e CHROME_DEBUG_PORT=9222

4. Verify installation

# List configured MCP servers
claude mcp list

# Get details about the server (check that paths are absolute)
claude mcp get chrome-devtools

# The output should show absolute paths like:
# Command: /Users/you/chrome-devtools-mcp/.venv/bin/python
# Args: ["/Users/you/chrome-devtools-mcp/server.py"]

Common Path Issues and Solutions:

• Problem: "python: command not found" or "server.py not found"
  • Solution: Use absolute paths as shown above
• Problem: "ModuleNotFoundError" when server starts
  • Solution: Use the venv Python interpreter that has dependencies installed
• Problem: Server doesn't start or shows as disconnected
  • Solution: Test the command manually: /path/to/.venv/bin/python /path/to/server.py

Option 4: Manual Claude Desktop Setup

1. Clone this repository

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp

2. Install dependencies

With uv (recommended):

uv sync

With pip:

pip install -r requirements.txt

3. Add to Claude Desktop configuration

Edit your Claude Desktop config file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "python",
      "args": ["/absolute/path/to/chrome-devtools-mcp/server.py"],
      "env": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}

4. Restart Claude Desktop

Verify Installation

After installation (either method), verify the server is available:

1. Open Claude Desktop
2. Look for MCP tools in the conversation
3. Try a simple command: get_connection_status()

Alternative MCP Clients

For other MCP clients, run the server directly:

python server.py

Quick Start

Once installed in Claude Desktop, you can start debugging any web application:

Debug Your Web Application

One-step setup (recommended):

start_chrome_and_connect("localhost:3000")

Replace localhost:3000 with your application's URL

If Chrome isn't found automatically:

start_chrome_and_connect("localhost:3000", chrome_path="/path/to/chrome")

Use the chrome_path parameter to specify a custom Chrome location

This command will:

• Start Chrome with debugging enabled
• Navigate to your application
• Connect the MCP server to Chrome

Manual setup (if you prefer step-by-step):

start_chrome()
navigate_to_url("localhost:3000")
connect_to_browser()

Start Debugging

Once connected, use these commands:

• get_network_requests() - View HTTP traffic
• get_console_error_summary() - Analyse JavaScript errors
• inspect_console_object("window") - Inspect any JavaScript object

Available MCP Tools

Chrome Management

• start_chrome(port?, url?, headless?, chrome_path?, auto_connect?) - Start Chrome with remote debugging and optional auto-connection
• start_chrome_and_connect(url, port?, headless?, chrome_path?) - Start Chrome, connect, and navigate in one step
• connect_to_browser(port?) - Connect to existing Chrome instance
• navigate_to_url(url) - Navigate to a specific URL
• disconnect_from_browser() - Disconnect from browser
• get_connection_status() - Check connection status

Network Monitoring

• get_network_requests(filter_domain?, filter_status?, limit?) - Get network requests with filtering
• get_network_response(request_id) - Get detailed response data including body

Console Tools

• get_console_logs(level?, limit?) - Get browser console logs
• get_console_error_summary() - Get organized summary of errors and warnings
• execute_javascript(code) - Execute JavaScript in browser context
• clear_console() - Clear the browser console
• inspect_console_object(expression) - Deep inspect any JavaScript object
• monitor_console_live(duration_seconds) - Monitor console output in real-time

Page Analysis

• get_page_info() - Get comprehensive page metrics and performance data
• evaluate_in_all_frames(code) - Execute JavaScript in all frames/iframes
• get_performance_metrics() - Get detailed performance metrics and resource timing

Storage & Data

• get_storage_usage_and_quota(origin) - Get storage usage and quota information
• clear_storage_for_origin(origin, storage_types?) - Clear storage by type and origin
• get_all_cookies() - Get all browser cookies
• clear_all_cookies() - Clear all browser cookies
• set_cookie(name, value, domain, path?, expires?, http_only?, secure?, same_site?) - Set a cookie
• get_cookies(domain?) - Get browser cookies with optional domain filtering
• get_storage_key_for_frame(frame_id) - Get storage key for a specific frame
• track_cache_storage(origin, enable?) - Enable/disable cache storage tracking
• track_indexeddb(origin, enable?) - Enable/disable IndexedDB tracking
• override_storage_quota(origin, quota_size_mb?) - Override storage quota

Use Cases

Debugging API Calls in Your Web Application

When your web application makes API calls that fail or return unexpected data:

Easy setup: Use the one-step command to start Chrome and navigate to your app:

Example workflow:

You: "I need to debug my React app at localhost:3000"
Claude: I'll start Chrome with debugging enabled and navigate to your app.

start_chrome_and_connect("localhost:3000")

Perfect! Chrome is now running with debugging enabled and connected to