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!

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.

Option 1: Claude Desktop Extension (Easiest)

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: Themcpcommand is part of thePython MCP SDK. Install it withpip install mcpif not already available.

# 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

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

uv sync # Creates .venv and installs dependencies

# 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

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

# 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"]

- Problem: "python: command not found" or "server.py not found"

- Solution: Use absolute paths as shown above

- Solution: Use the venv Python interpreter that has dependencies installed

- Solution: Test the command manually:/path/to/.venv/bin/python /path/to/server.py

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

- 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" } } } }

After installation (either method), verify the server is available:
- Open Claude Desktop
- Look for MCP tools in the conversation
- Try a simple command:get_connection_status()

For other MCP clients, run the server directly:

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

start_chrome_and_connect("localhost:3000")

Replacelocalhost:3000with your application's URL

If Chrome isn't found automatically:

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

Use thechrome_pathparameter to specify a custom Chrome location

- 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()

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

- 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

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

- 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

- 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

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:

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 your app. Let me check for any failed network requests: get_network_requests(filter_status=500) I can see there are 3 failed requests to your API. Let me get the details of the first one: get_network_response("request-123")

- Start Chrome: Usestart_chrome()
- Navigate to your app: Usenavigate_to_url("localhost:3000")
- Connect: Useconnect_to_browser()
- Monitor network traffic: Useget_network_requests()to see all API calls

When your web application has JavaScript errors or unexpected behaviour:
- Navigate to your applicationin the connected Chrome instance
- Check for console errors: Useget_console_error_summary()to see all errors
- Monitor live errors: Usemonitor_console_live(10)to watch for new errors as you interact
- Inspect variables: Useinspect_console_object("myVariable")to examine application state

You: "My React component isn't updating properly" Claude: Let me check the JavaScript console for any errors. get_console_error_summary() I can see there are 2 JavaScript errors. Let me also monitor the console while you interact with the component: monitor_console_live(15) Now try clicking the component that isn't working. I'll watch for any new errors or warnings.

When your web application loads slowly or uses too much memory:
- Load your applicationin the connected browser
- Check page metrics: Useget_page_info()to see load times and resource counts
- Analyse performance: Useget_performance_metrics()to see detailed timing data
- Monitor memory usage: Check the memory information in the performance metrics

You: "My application takes too long to load" Claude: Let me analyse the performance of your application. get_page_info() I can see your page has 47 scripts and took 3.2 seconds to load. Let me get more detailed performance data: get_performance_metrics() The main bottleneck is the initial JavaScript bundle which is 2.1MB. The DOM processing also takes 800ms.

When login or session management isn't working:

- get_document(depth?, pierce?)- Retrieve DOM document structure
- query_selector(node_id, selector)- Find single element by CSS selector
- query_selector_all(node_id, selector)- Find multiple elements by CSS selector
- get_element_attributes(node_id)- Get all attributes of an element
- get_element_outer_html(node_id)- Get outer HTML of an element
- get_element_box_model(node_id)- Get layout information
- describe_element(node_id, depth?)- Get detailed element description
- get_element_at_position(x, y)- Get element at screen position
- search_elements(query)- Search DOM elements by text/attributes
- focus_element(node_id)- Focus a DOM element

- get_computed_styles(node_id)- Get computed CSS styles
- get_inline_styles(node_id)- Get inline styles
- get_matched_styles(node_id)- Get all CSS rules matching an element
- get_stylesheet_text(stylesheet_id)- Get stylesheet content
- get_background_colors(node_id)- Get background colors and fonts
- get_platform_fonts(node_id)- Get platform font information
- get_media_queries()- Get all media queries
- collect_css_class_names(stylesheet_id)- Collect CSS class names
- start_css_coverage_tracking()- Start CSS coverage tracking
- stop_css_coverage_tracking()- Stop and get CSS coverage results

- CHROME_DEBUG_PORT- Chrome remote debugging port (default: 9222)

- MCP Protocol Version: 2024-11-05
- Minimum Python Version: 3.10+
- Supported MCP Clients: Claude Desktop, any MCP-compatible client
- Package Manager: uv (recommended) or pip

Prerequisites (Your Development Environment)

- Have your web application running (e.g.,npm run dev,python -m http.server, etc.)
- Note the URL where your application is accessible
-

Connect to your applicationvia Claude Desktop:

start_chrome_and_connect("localhost:3000")

Replace with your application's URL

Debug your applicationusing the MCP tools:

- Monitor network requests
- Check console errors
- Inspect JavaScript objects
- Analyse performance

Make changes to your codein your editor

Refresh or interactwith your application
- start_chrome()- Launch Chrome with debugging
- navigate_to_url("your-app-url")- Navigate to your application
- connect_to_browser()- Connect the MCP server
- Use debugging tools as needed

- Only use with development environments
- Never connect to production Chrome instances
- The server is designed for localhost debugging only
- No data is stored permanently - all data is session-based

Server Shows as "Disabled" in Claude Desktop

If the server appears in Claude but shows as "disabled", try these steps:

- macOS:~/Library/Logs/Claude/mcp.log
- Windows:%APPDATA%/Claude/logs/mcp.log

# Reinstall with verbose output mcp remove "Chrome DevTools MCP" mcp install server.py -n "Chrome DevTools MCP" --with-editable . -v CHROME_DEBUG_PORT=9222 # Check installation status mcp list # Test the server manually python3 server.py

# Ensure all dependencies are available pip install mcp websockets aiohttp # Test imports python3 -c "from server import mcp; print('OK')"

Restart Claude Desktopcompletely (quit and reopen)

- MCP CLI not found: Install MCP CLI from thePython MCP SDKwithpip install mcp
- Server not appearing in Claude:

- For MCP CLI: Use--with-editable .to install local dependencies
- For manual setup: Runpip install -r requirements.txt