home / mcp / chrome devtools mcp server

Chrome DevTools MCP Server

An MCP Server for Chrome DevTools, following the Chrome DevTools Protocol. Integrates with Claude Desktop and Claude Code.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "benjaminr-chrome-devtools-mcp": {
      "url": "https://mcp.example.com/mcp",
      "headers": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}

You can debug web applications by connecting Claude to Chrome’s debugging capabilities through a dedicated MCP server that runs inside Claude Desktop. This MCP bridge lets you inspect network traffic, console errors, performance, and browser state in real time, all via natural language interactions.

How to use

Once the MCP server is installed, you use an MCP client to start a debugging session. Start a Chrome session with remote debugging enabled, connect the MCP server to that browser, and then issue commands to inspect network activity, console logs, and page performance. You can navigate to your app, monitor live console output, and execute JavaScript in the browser context from your conversation.

How to install

Prerequisites: You need Python installed (3.10 or newer) and either the UV container tooling or pip for dependency management. You may also use Claude Desktop for a one-click extension option.

# Option 1: Claude Desktop Extension (Easiest)
# 1. Download the latest extension file (with .dxt extension)
# 2. Open Claude Desktop
# 3. Install the downloaded extension via Extensions
# 4. Configure Chrome path if needed in extension settings

If you prefer a CLI-based installation, use the MCP CLI to add the server locally. The following commands install the server in editable mode so you can develop against it directly.

# 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 .

All installation options shown include environment variable configuration and optional dependencies. You can also integrate with Claude Code or perform a manual Claude Desktop setup. The key is to point the MCP server to the Python script and expose the Chrome debugging port via CHROME_DEBUG_PORT.

# Full installation options (examples)
# Basic install with local dependencies
mcp install server.py --with-editable .

# Install with a custom server 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
cp .env.example .env
mcp install server.py -n "Chrome DevTools MCP" --with-editable . -f .env

Configuration and environment

Configure the MCP server to expose the Chrome remote debugging port. The main environment variable shown is CHROME_DEBUG_PORT, with a typical value of 9222. This port is used by Chrome when you start the browser with remote debugging enabled.

# Example environment file content (.env)
CHROME_DEBUG_PORT=9222

Security notes

Use this MCP server only in development environments. Do not connect to production Chrome instances. The server runs locally inside Claude Desktop and does not expose data publicly.

Troubleshooting

If the server appears disabled or fails to start, check logs and verify you are using absolute paths for any local server references. Ensure the Python environment contains all dependencies (mcp, websockets, aiohttp). If you run into module import errors, reinstall with the editable flag and re-check dependencies.

Common workflows and use cases

Start a debugging session by launching Chrome with remote debugging and connecting the MCP server, then run the available tools to inspect network requests, console messages, and page performance.

Notes on usage patterns

- Start Chrome and connect to your app in one step when using a high-level helper call. - If Chrome isn’t found automatically, supply a custom path to Chrome. - Use network, console, and page analysis tools to identify and fix issues quickly.

What you can debug with the MCP server

You can inspect HTTP traffic, read browser console logs, execute JavaScript in the browser context, and retrieve DOM, performance, and storage data from the connected Chrome instance.

Available tools

start_chrome_and_connect

Start Chrome with remote debugging enabled and connect the MCP server to it in one step.

get_connection_status

Check whether the MCP server is connected to a Chrome instance.

get_network_requests

Retrieve captured network requests with optional filtering.

get_network_response

Fetch detailed data for a specific network request.

get_console_logs

Retrieve browser console logs for analysis.

get_console_error_summary

Provide an organized summary of console errors and warnings.

execute_javascript

Execute JavaScript code in the browser context.

monitor_console_live

Watch console output in real time for a given duration.

inspect_console_object

Deep inspect a JavaScript object from the browser context.

get_page_info

Get page metrics and performance-related data.

get_performance_metrics

Retrieve detailed timing data and resource performance.

get_cookies

Read browser cookies, with optional domain filtering.

get_storage_usage_and_quota

Query storage usage and quota per origin.

clear_storage_for_origin

Clear storage for a specific origin and storage types.