chrome-devtools-mcp

# 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](https://github.com/benjaminr/chrome-devtools-mcp/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):** ```bash 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](https://github.com/modelcontextprotocol/python-sdk). Install it with `pip install mcp` if not already available. **All Installation Options:** ```bash # 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** ```bash git clone https://github.com/benjaminr/chrome-devtools-mcp.git cd chrome-devtools-mcp ``` 2. **Install dependencies with UV (creates venv)** ```bash 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:** ```bash # 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):** ```bash # Only if you've installed dependencies globally claude mcp add chrome-devtools python "$(pwd)/server.py" -e CHROME_DEBUG_PORT=9222 ``` **With custom scope:** ```bash # 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** ```bash # 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 serve