by benjaminr
An MCP Server for Chrome DevTools, following the Chrome DevTools Protocol. Integrates with Claude Desktop and Claude Code.
# Add to your Claude Code skills
git clone https://github.com/benjaminr/chrome-devtools-mcpA 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!
This MCP server acts as a bridge between Claude and Chrome's debugging capabilities. Once installed in Claude Desktop, you can:
Note: This is an MCP server that runs within Claude Desktop - you don't need to run any separate servers or processes.
Download the pre-built extension:
No comments yet. Be the first to share your thoughts!
.dxt file from Releases.dxt fileThe extension includes all dependencies and is ready to use immediately!
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
mcpcommand is part of the Python MCP SDK. Install it withpip install mcpif 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
For Claude Code CLI users:
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
uv sync # Creates .venv and installs dependencies
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
# 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:
/path/to/.venv/bin/python /path/to/server.pygit clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
With uv (recommended):
uv sync
With pip:
pip install -r requirements.txt
Edit your Claude Desktop config file:
~/Library/Application Support/Claude/claude_desktop_config.json%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"
}
}
}
}
After installation (either method), verify the server is available:
get_connection_status()For other MCP clients, run the server directly:
python server.py
Once installed in Claude Desktop, you can start debugging any 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:
Manual setup (if you prefer step-by-step):
start_chrome()
navigate_to_url("localhost:3000")
connect_to_browser()
Once connected, use these commands:
get_network_requests() - View HTTP trafficget_console_error_summary() - Analyse JavaScript errorsinspect_console_object("window") - Inspect any JavaScript objectstart_chrome(port?, url?, headless?, chrome_path?, auto_connect?) - Start Chrome with remote debugging and optional auto-connectionstart_chrome_and_connect(url, port?, headless?, chrome_path?) - Start Chrome, connect, and navigate in one stepconnect_to_browser(port?) - Connect to existing Chrome instancenavigate_to_url(url) - Navigate to a specific URLdisconnect_from_browser() - Disconnect from browserget_connection_status() - Check connection statusget_network_requests(filter_domain?, filter_status?, limit?) - Get network requests with filteringget_network_response(request_id) - Get detailed response data including bodyget_console_logs(level?, limit?) - Get browser console logsget_console_error_summary() - Get organized summary of errors and warningsexecute_javascript(code) - Execute JavaScript in browser contextclear_console() - Clear the browser consoleinspect_console_object(expression) - Deep inspect any JavaScript objectmonitor_console_live(duration_seconds) - Monitor console output in real-timeget_page_info() - Get comprehensive page metrics and performance dataevaluate_in_all_frames(code) - Execute JavaScript in all frames/iframesget_performance_metrics() - Get detailed performance metrics and resource timingget_storage_usage_and_quota(origin) - Get storage usage and quota informationclear_storage_for_origin(origin, storage_types?) - Clear storage by type and originget_all_cookies() - Get all browser cookiesclear_all_cookies() - Clear all browser cookiesset_cookie(name, value, domain, path?, expires?, http_only?, secure?, same_site?) - Set a cookieget_cookies(domain?) - Get browser cookies with optional domain filteringget_storage_key_for_frame(frame_id) - Get storage key for a specific frametrack_cache_storage(origin, enable?) - Enable/disable cache storage trackingtrack_indexeddb(origin, enable?) - Enable/disable IndexedDB trackingoverride_storage_quota(origin, quota_size_mb?) - Override storage quotaWhen 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