{"id":29095843,"url":"https://github.com/benjaminr/chrome-devtools-mcp","last_synced_at":"2026-04-05T21:02:49.139Z","repository":{"id":301583714,"uuid":"1009722989","full_name":"benjaminr/chrome-devtools-mcp","owner":"benjaminr","description":"An MCP Server for Chrome DevTools, following the Chrome DevTools Protocol. Integrates with Claude Desktop and Claude Code.","archived":false,"fork":false,"pushed_at":"2025-10-06T07:44:06.000Z","size":203,"stargazers_count":251,"open_issues_count":5,"forks_count":40,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-11-29T08:21:11.472Z","etag":null,"topics":["chrome","chromium","chromium-browser","claude-code","claude-desktop","debugging-tools","dev","dev-tools","frontend","mcp","mcp-server","monitoring-tool"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benjaminr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-27T15:47:13.000Z","updated_at":"2025-11-26T09:26:57.000Z","dependencies_parsed_at":"2025-06-27T16:44:49.342Z","dependency_job_id":"c0c9e9c9-9eff-46a9-8fad-db5818976953","html_url":"https://github.com/benjaminr/chrome-devtools-mcp","commit_stats":null,"previous_names":["benjaminr/chrome-devtools-mcp"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/benjaminr/chrome-devtools-mcp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjaminr%2Fchrome-devtools-mcp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjaminr%2Fchrome-devtools-mcp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjaminr%2Fchrome-devtools-mcp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjaminr%2Fchrome-devtools-mcp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benjaminr","download_url":"https://codeload.github.com/benjaminr/chrome-devtools-mcp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjaminr%2Fchrome-devtools-mcp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31449836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T15:22:31.103Z","status":"ssl_error","status_checked_at":"2026-04-05T15:22:00.205Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome","chromium","chromium-browser","claude-code","claude-desktop","debugging-tools","dev","dev-tools","frontend","mcp","mcp-server","monitoring-tool"],"created_at":"2025-06-28T11:36:53.991Z","updated_at":"2026-04-05T21:02:49.121Z","avatar_url":"https://github.com/benjaminr.png","language":"Python","readme":"# Chrome DevTools MCP\n\nA 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.\n\n**Available as a Claude Desktop Extension (.dxt)** for easy one-click installation!\n\n## What This Does\n\nThis MCP server acts as a bridge between Claude and Chrome's debugging capabilities. Once installed in Claude Desktop, you can:\n- Connect Claude to any web application running in Chrome\n- Debug network requests, console errors, and performance issues\n- Inspect JavaScript objects and execute code in the browser context\n- Monitor your application in real-time through natural conversation with Claude\n\n**Note**: This is an MCP server that runs within Claude Desktop - you don't need to run any separate servers or processes.\n\n## Features\n\n- **Network Monitoring**: Capture and analyse HTTP requests/responses with filtering options\n- **Console Integration**: Read browser console logs, analyse errors, and execute JavaScript\n- **Performance Metrics**: Timing data, resource loading, and memory utilisation\n- **Page Inspection**: DOM information, page metrics, and multi-frame support\n- **Storage Access**: Read cookies, localStorage, and sessionStorage\n- **Real-time Monitoring**: Live console output tracking\n- **Object Inspection**: Inspect JavaScript objects and variables\n\n## Installation\n\n### Option 1: Claude Desktop Extension (Easiest)\n\n**Download the pre-built extension:**\n1. Download the latest `.dxt` file from [Releases](https://github.com/benjaminr/chrome-devtools-mcp/releases)\n2. Open Claude Desktop\n3. Go to Extensions and install the downloaded `.dxt` file\n4. Configure Chrome path if needed in extension settings\n\nThe extension includes all dependencies and is ready to use immediately!\n\n### Option 2: MCP CLI (Advanced)\n\n**Quick Install (most common):**\n```bash\ngit clone https://github.com/benjaminr/chrome-devtools-mcp.git\ncd chrome-devtools-mcp\nmcp install server.py -n \"Chrome DevTools MCP\" --with-editable .\n```\n\n\u003e **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.\n\n**All Installation Options:**\n\n```bash\n# Clone the repository\ngit clone https://github.com/benjaminr/chrome-devtools-mcp.git\ncd chrome-devtools-mcp\n\n# The --with-editable flag uses pyproject.toml to install dependencies\n\n# Basic installation with local dependencies\nmcp install server.py --with-editable .\n\n# Install with custom name\nmcp install server.py -n \"Chrome DevTools MCP\" --with-editable .\n\n# Install with environment variables\nmcp install server.py -n \"Chrome DevTools MCP\" --with-editable . -v CHROME_DEBUG_PORT=9222\n\n# Install with additional packages if needed\nmcp install server.py -n \"Chrome DevTools MCP\" --with-editable . --with websockets --with aiohttp\n\n# Install with environment file (copy .env.example to .env first)\ncp .env.example .env\n# Edit .env with your settings\nmcp install server.py -n \"Chrome DevTools MCP\" --with-editable . -f .env\n```\n\n### Option 3: Claude Code Integration\n\n**For Claude Code CLI users:**\n\n1. **Clone this repository**\n```bash\ngit clone https://github.com/benjaminr/chrome-devtools-mcp.git\ncd chrome-devtools-mcp\n```\n\n2. **Install dependencies with UV (creates venv)**\n```bash\nuv sync  # Creates .venv and installs dependencies\n```\n\n3. **Add MCP server using Claude CLI with absolute paths**\n\n**IMPORTANT**: Claude Code needs absolute paths to both the Python interpreter and the server script to work correctly.\n\n**Recommended setup using absolute paths:**\n```bash\n# Get the absolute paths\nSERVER_PATH=\"$(pwd)/server.py\"\nPYTHON_PATH=\"$(pwd)/.venv/bin/python\"\n\n# Add the server with absolute paths\nclaude mcp add chrome-devtools \"$PYTHON_PATH\" \"$SERVER_PATH\" -e CHROME_DEBUG_PORT=9222\n```\n\n**Alternative: Using the system Python (if dependencies are installed globally):**\n```bash\n# Only if you've installed dependencies globally\nclaude mcp add chrome-devtools python \"$(pwd)/server.py\" -e CHROME_DEBUG_PORT=9222\n```\n\n**With custom scope:**\n```bash\n# Add to user scope (available across all projects)\nclaude mcp add chrome-devtools \"$(pwd)/.venv/bin/python\" \"$(pwd)/server.py\" -s user -e CHROME_DEBUG_PORT=9222\n\n# Add to project scope (only for this project)\nclaude mcp add chrome-devtools \"$(pwd)/.venv/bin/python\" \"$(pwd)/server.py\" -s project -e CHROME_DEBUG_PORT=9222\n```\n\n4. **Verify installation**\n```bash\n# List configured MCP servers\nclaude mcp list\n\n# Get details about the server (check that paths are absolute)\nclaude mcp get chrome-devtools\n\n# The output should show absolute paths like:\n# Command: /Users/you/chrome-devtools-mcp/.venv/bin/python\n# Args: [\"/Users/you/chrome-devtools-mcp/server.py\"]\n```\n\n**Common Path Issues and Solutions:**\n- **Problem**: \"python: command not found\" or \"server.py not found\"\n  - **Solution**: Use absolute paths as shown above\n- **Problem**: \"ModuleNotFoundError\" when server starts\n  - **Solution**: Use the venv Python interpreter that has dependencies installed\n- **Problem**: Server doesn't start or shows as disconnected\n  - **Solution**: Test the command manually: `/path/to/.venv/bin/python /path/to/server.py`\n\n### Option 4: Manual Claude Desktop Setup\n\n1. **Clone this repository**\n```bash\ngit clone https://github.com/benjaminr/chrome-devtools-mcp.git\ncd chrome-devtools-mcp\n```\n\n2. **Install dependencies**\n\n**With uv (recommended):**\n```bash\nuv sync\n```\n\n**With pip:**\n```bash\npip install -r requirements.txt\n```\n\n3. **Add to Claude Desktop configuration**\n\nEdit your Claude Desktop config file:\n- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`\n- **Windows**: `%APPDATA%/Claude/claude_desktop_config.json`\n\n```json\n{\n  \"mcpServers\": {\n    \"chrome-devtools\": {\n      \"command\": \"python\",\n      \"args\": [\"/absolute/path/to/chrome-devtools-mcp/server.py\"],\n      \"env\": {\n        \"CHROME_DEBUG_PORT\": \"9222\"\n      }\n    }\n  }\n}\n```\n\n4. **Restart Claude Desktop**\n\n### Verify Installation\n\nAfter installation (either method), verify the server is available:\n1. Open Claude Desktop\n2. Look for MCP tools in the conversation\n3. Try a simple command: `get_connection_status()`\n\n### Alternative MCP Clients\n\nFor other MCP clients, run the server directly:\n```bash\npython server.py\n```\n\n## Quick Start\n\nOnce installed in Claude Desktop, you can start debugging any web application:\n\n### Debug Your Web Application\n\n**One-step setup (recommended):**\n```\nstart_chrome_and_connect(\"localhost:3000\")\n```\n*Replace `localhost:3000` with your application's URL*\n\n**If Chrome isn't found automatically:**\n```\nstart_chrome_and_connect(\"localhost:3000\", chrome_path=\"/path/to/chrome\")\n```\n*Use the `chrome_path` parameter to specify a custom Chrome location*\n\nThis command will:\n- Start Chrome with debugging enabled\n- Navigate to your application\n- Connect the MCP server to Chrome\n\n**Manual setup (if you prefer step-by-step):**\n```\nstart_chrome()\nnavigate_to_url(\"localhost:3000\")\nconnect_to_browser()\n```\n\n### Start Debugging\n\nOnce connected, use these commands:\n- `get_network_requests()` - View HTTP traffic\n- `get_console_error_summary()` - Analyse JavaScript errors  \n- `inspect_console_object(\"window\")` - Inspect any JavaScript object\n\n## Available MCP Tools\n\n### Chrome Management\n- `start_chrome(port?, url?, headless?, chrome_path?, auto_connect?)` - Start Chrome with remote debugging and optional auto-connection\n- `start_chrome_and_connect(url, port?, headless?, chrome_path?)` - Start Chrome, connect, and navigate in one step\n- `connect_to_browser(port?)` - Connect to existing Chrome instance\n- `navigate_to_url(url)` - Navigate to a specific URL\n- `disconnect_from_browser()` - Disconnect from browser\n- `get_connection_status()` - Check connection status\n\n### Network Monitoring\n- `get_network_requests(filter_domain?, filter_status?, limit?)` - Get network requests with filtering\n- `get_network_response(request_id)` - Get detailed response data including body\n\n### Console Tools\n- `get_console_logs(level?, limit?)` - Get browser console logs\n- `get_console_error_summary()` - Get organized summary of errors and warnings\n- `execute_javascript(code)` - Execute JavaScript in browser context\n- `clear_console()` - Clear the browser console\n- `inspect_console_object(expression)` - Deep inspect any JavaScript object\n- `monitor_console_live(duration_seconds)` - Monitor console output in real-time\n\n### Page Analysis\n- `get_page_info()` - Get comprehensive page metrics and performance data\n- `evaluate_in_all_frames(code)` - Execute JavaScript in all frames/iframes\n- `get_performance_metrics()` - Get detailed performance metrics and resource timing\n\n### Storage \u0026 Data\n- `get_storage_usage_and_quota(origin)` - Get storage usage and quota information\n- `clear_storage_for_origin(origin, storage_types?)` - Clear storage by type and origin\n- `get_all_cookies()` - Get all browser cookies\n- `clear_all_cookies()` - Clear all browser cookies\n- `set_cookie(name, value, domain, path?, expires?, http_only?, secure?, same_site?)` - Set a cookie\n- `get_cookies(domain?)` - Get browser cookies with optional domain filtering\n- `get_storage_key_for_frame(frame_id)` - Get storage key for a specific frame\n- `track_cache_storage(origin, enable?)` - Enable/disable cache storage tracking\n- `track_indexeddb(origin, enable?)` - Enable/disable IndexedDB tracking\n- `override_storage_quota(origin, quota_size_mb?)` - Override storage quota\n\n## Use Cases\n\n### Debugging API Calls in Your Web Application\n\nWhen your web application makes API calls that fail or return unexpected data:\n\n**Easy setup:** Use the one-step command to start Chrome and navigate to your app:\n\n**Example workflow:**\n```\nYou: \"I need to debug my React app at localhost:3000\"\nClaude: I'll start Chrome with debugging enabled and navigate to your app.\n\nstart_chrome_and_connect(\"localhost:3000\")\n\nPerfect! Chrome is now running with debugging enabled and connected to your app. Let me check for any failed network requests:\n\nget_network_requests(filter_status=500)\n\nI can see there are 3 failed requests to your API. Let me get the details of the first one:\n\nget_network_response(\"request-123\")\n```\n\n**Manual setup (if you prefer):**\n1. **Start Chrome**: Use `start_chrome()` \n2. **Navigate to your app**: Use `navigate_to_url(\"localhost:3000\")`\n3. **Connect**: Use `connect_to_browser()`\n4. **Monitor network traffic**: Use `get_network_requests()` to see all API calls\n\n### Checking JavaScript Console Errors\n\nWhen your web application has JavaScript errors or unexpected behaviour:\n\n1. **Navigate to your application** in the connected Chrome instance\n2. **Check for console errors**: Use `get_console_error_summary()` to see all errors\n3. **Monitor live errors**: Use `monitor_console_live(10)` to watch for new errors as you interact\n4. **Inspect variables**: Use `inspect_console_object(\"myVariable\")` to examine application state\n\n**Example workflow:**\n```\nYou: \"My React component isn't updating properly\"\nClaude: Let me check the JavaScript console for any errors.\n\nget_console_error_summary()\n\nI can see there are 2 JavaScript errors. Let me also monitor the console while you interact with the component:\n\nmonitor_console_live(15)\n\nNow try clicking the component that isn't working. I'll watch for any new errors or warnings.\n```\n\n### Performance Debugging\n\nWhen your web application loads slowly or uses too much memory:\n\n1. **Load your application** in the connected browser\n2. **Check page metrics**: Use `get_page_info()` to see load times and resource counts\n3. **Analyse performance**: Use `get_performance_metrics()` to see detailed timing data\n4. **Monitor memory usage**: Check the memory information in the performance metrics\n\n**Example workflow:**\n```\nYou: \"My application takes too long to load\"\nClaude: Let me analyse the performance of your application.\n\nget_page_info()\n\nI can see your page has 47 scripts and took 3.2 seconds to load. Let me get more detailed performance data:\n\nget_performance_metrics()\n\nThe main bottleneck is the initial JavaScript bundle which is 2.1MB. The DOM processing also takes 800ms.\n```\n\n### Debugging Authentication Issues\n\nWhen login or session management isn't working:\n\n1. **Navigate to your login page**\n2. **Check cookies**: Use `get_cookies()` to see authentication cookies\n3. **Monitor network during login**: Use `monitor_console_live()` and `get_network_requests()` during the login process\n4. **Examine stored data**: Use JavaScript execution to check localStorage/sessionStorage\n\n**Example workflow:**\n```\nYou: \"Users can't stay logged in\"\nClaude: Let me check the authentication setup.\n\nget_cookies()\n\nI can see the auth cookie is present. Let me check what happens during login by monitoring the network:\n\nget_network_requests(filter_domain=\"your-api.com\")\n\nI notice the login request returns a 200 but no Set-Cookie header. Let me also check localStorage:\n\nexecute_javascript(\"Object.keys(localStorage)\")\n```\n\n### DOM Element Inspection\n- `get_document(depth?, pierce?)` - Retrieve DOM document structure\n- `query_selector(node_id, selector)` - Find single element by CSS selector\n- `query_selector_all(node_id, selector)` - Find multiple elements by CSS selector\n- `get_element_attributes(node_id)` - Get all attributes of an element\n- `get_element_outer_html(node_id)` - Get outer HTML of an element\n- `get_element_box_model(node_id)` - Get layout information\n- `describe_element(node_id, depth?)` - Get detailed element description\n- `get_element_at_position(x, y)` - Get element at screen position\n- `search_elements(query)` - Search DOM elements by text/attributes\n- `focus_element(node_id)` - Focus a DOM element\n\n### CSS Style Analysis\n- `get_computed_styles(node_id)` - Get computed CSS styles\n- `get_inline_styles(node_id)` - Get inline styles\n- `get_matched_styles(node_id)` - Get all CSS rules matching an element\n- `get_stylesheet_text(stylesheet_id)` - Get stylesheet content\n- `get_background_colors(node_id)` - Get background colors and fonts\n- `get_platform_fonts(node_id)` - Get platform font information\n- `get_media_queries()` - Get all media queries\n- `collect_css_class_names(stylesheet_id)` - Collect CSS class names\n- `start_css_coverage_tracking()` - Start CSS coverage tracking\n- `stop_css_coverage_tracking()` - Stop and get CSS coverage results\n\n## Common Commands\n\n| Task | Command |\n|------|---------|\n| Start Chrome and connect to app | `start_chrome_and_connect(\"localhost:3000\")` |\n| Start Chrome (manual setup) | `start_chrome()` |\n| Navigate to page | `navigate_to_url(\"localhost:3000\")` |\n| Connect to browser | `connect_to_browser()` |\n| See all network requests | `get_network_requests()` |\n| Find failed API calls | `get_network_requests(filter_status=404)` |\n| Check for JavaScript errors | `get_console_error_summary()` |\n| Watch console in real-time | `monitor_console_live(10)` |\n| Check page load performance | `get_page_info()` |\n| Examine a variable | `inspect_console_object(\"window.myApp\")` |\n| View cookies | `get_cookies()` |\n| Run JavaScript | `execute_javascript(\"document.title\")` |\n\n## Configuration\n\n### Environment Variables\n- `CHROME_DEBUG_PORT` - Chrome remote debugging port (default: 9222)\n\n### MCP Compatibility\n- **MCP Protocol Version**: 2024-11-05\n- **Minimum Python Version**: 3.10+\n- **Supported MCP Clients**: Claude Desktop, any MCP-compatible client\n- **Package Manager**: uv (recommended) or pip\n\n## Usage Workflow\n\n### Prerequisites (Your Development Environment)\n- Have your web application running (e.g., `npm run dev`, `python -m http.server`, etc.)\n- Note the URL where your application is accessible\n\n### Debugging Session\n1. **Connect to your application** via Claude Desktop:\n   ```\n   start_chrome_and_connect(\"localhost:3000\")\n   ```\n   *Replace with your application's URL*\n\n2. **Debug your application** using the MCP tools:\n   - Monitor network requests\n   - Check console errors\n   - Inspect JavaScript objects\n   - Analyse performance\n\n3. **Make changes to your code** in your editor\n4. **Refresh or interact** with your application\n5. **Continue debugging** with real-time data\n\n### Manual Connection (Alternative)\nIf you prefer step-by-step control:\n1. `start_chrome()` - Launch Chrome with debugging\n2. `navigate_to_url(\"your-app-url\")` - Navigate to your application\n3. `connect_to_browser()` - Connect the MCP server\n4. Use debugging tools as needed\n\n## Security Notes\n\n- Only use with development environments\n- Never connect to production Chrome instances\n- The server is designed for localhost debugging only\n- No data is stored permanently - all data is session-based\n\n## Troubleshooting\n\n### Server Shows as \"Disabled\" in Claude Desktop\n\nIf the server appears in Claude but shows as \"disabled\", try these steps:\n\n1. **Check Claude Desktop logs**:\n   - **macOS**: `~/Library/Logs/Claude/mcp*.log`\n   - **Windows**: `%APPDATA%/Claude/logs/mcp*.log`\n\n2. **Common fixes**:\n   ```bash\n   # Reinstall with verbose output\n   mcp remove \"Chrome DevTools MCP\"\n   mcp install server.py -n \"Chrome DevTools MCP\" --with-editable . -v CHROME_DEBUG_PORT=9222\n   \n   # Check installation status\n   mcp list\n   \n   # Test the server manually\n   python3 server.py\n   ```\n\n3. **Check dependencies**:\n   ```bash\n   # Ensure all dependencies are available\n   pip install mcp websockets aiohttp\n   \n   # Test imports\n   python3 -c \"from server import mcp; print('OK')\"\n   ```\n\n4. **Restart Claude Desktop** completely (quit and reopen)\n\n### Installation Issues\n- **MCP CLI not found**: Install MCP CLI from the [Python MCP SDK](https://github.com/modelcontextprotocol/python-sdk) with `pip install mcp`\n- **Server not appearing in Claude**: \n  - For MCP CLI: Run `mcp list` to verify the server is installed\n  - For manual setup: Check Claude Desktop configuration file path and JSON syntax\n- **Import errors**: \n  - For MCP CLI: Use `--with-editable .` to install local dependencies\n  - For manual setup: Run `pip install -r requirements.txt`\n- **Permission errors**: Use absolute paths in configuration\n- **Environment variables not working**: Verify `.env` file format or `-v` flag syntax\n- **Module not found**: Ensure you're using `--with-editable .` flag for local package installation\n\n### Debugging Steps\n\n**Step 1: Check MCP CLI Status**\n```bash\n# List all installed servers\nmcp list\n\n# Check specific server status\nmcp status \"Chrome DevTools MCP\"\n```\n\n**Step 2: Test Server Manually**\n```bash\n# Test if server starts without errors\npython3 server.py\n\n# Test imports\npython3 -c \"from server import mcp; print(f'Server: {mcp.name}')\"\n```\n\n**Step 3: Check Configuration**\n\n**For Claude Desktop:**\n```bash\n# View current configuration (macOS)\ncat \"~/Library/Application Support/Claude/claude_desktop_config.json\"\n\n# View current configuration (Windows)\ntype \"%APPDATA%/Claude/claude_desktop_config.json\"\n```\n\n**For Claude Code:**\n```bash\n# List configured MCP servers\nclaude mcp list\n\n# Get details about a specific server\nclaude mcp get chrome-devtools\n\n# IMPORTANT: Verify paths are absolute, not relative\n# Good example output:\n#   Command: /Users/you/chrome-devtools-mcp/.venv/bin/python\n#   Args: [\"/Users/you/chrome-devtools-mcp/server.py\"]\n# Bad example output:\n#   Command: python\n#   Args: [\"server.py\"]\n\n# Test the exact command Claude Code will use\n/path/to/.venv/bin/python /path/to/server.py\n\n# Check if server is working\nclaude mcp serve --help\n```\n\n**Step 3.5: Fix Path Issues (Claude Code specific)**\n```bash\n# If paths are relative, remove and re-add with absolute paths\nclaude mcp remove chrome-devtools\n\n# Re-add with absolute paths\nSERVER_PATH=\"$(pwd)/server.py\"\nPYTHON_PATH=\"$(pwd)/.venv/bin/python\"\nclaude mcp add chrome-devtools \"$PYTHON_PATH\" \"$SERVER_PATH\" -e CHROME_DEBUG_PORT=9222\n```\n\n**Step 4: Reinstall if Needed**\n\n**For MCP CLI:**\n```bash\n# Clean reinstall\nmcp remove \"Chrome DevTools MCP\"\nmcp install server.py -n \"Chrome DevTools MCP\" --with-editable .\n\n# Restart Claude Desktop completely\n```\n\n**For Claude Code:**\n```bash\n# Remove and re-add the server\nclaude mcp remove chrome-devtools\nclaude mcp add chrome-devtools python server.py -e CHROME_DEBUG_PORT=9222\n\n# Or update with different scope\nclaude mcp add chrome-devtools python server.py -s user -e CHROME_DEBUG_PORT=9222\n```\n\n### Common Error Messages\n\n| Error | Solution |\n|-------|----------|\n| \"Module not found\" | Use `--with-editable .` flag |\n| \"No server object found\" | Server should export `mcp` object (already fixed) |\n| \"Import error\" | Check `pip install mcp websockets aiohttp` |\n| \"Permission denied\" | Use absolute paths in config |\n| \"Server disabled\" | Check Claude Desktop logs, restart Claude |\n| \"python: command not found\" (Claude Code) | Use absolute path to venv Python: `/path/to/.venv/bin/python` |\n| \"server.py: No such file\" (Claude Code) | Use absolute path to server: `/path/to/server.py` |\n| \"ModuleNotFoundError\" (Claude Code) | Use venv Python that has dependencies installed |\n\n### Manual Configuration Fallback\n\n**For Claude Desktop:**\nIf MCP CLI isn't working, add this to Claude Desktop config manually:\n\n```json\n{\n  \"mcpServers\": {\n    \"chrome-devtools\": {\n      \"command\": \"python3\",\n      \"args\": [\"/absolute/path/to/chrome-devtools-mcp/server.py\"],\n      \"env\": {\n        \"CHROME_DEBUG_PORT\": \"9222\"\n      }\n    }\n  }\n}\n```\n\n**For Claude Code:**\nIf the `claude mcp add` command isn't working, you can use the JSON format with absolute paths:\n\n```bash\n# Get absolute paths first\nSERVER_PATH=\"$(pwd)/server.py\"\nPYTHON_PATH=\"$(pwd)/.venv/bin/python\"\n\n# Add server using JSON configuration with absolute paths\nclaude mcp add-json chrome-devtools \"{\n  \\\"command\\\": \\\"$PYTHON_PATH\\\",\n  \\\"args\\\": [\\\"$SERVER_PATH\\\"],\n  \\\"env\\\": {\n    \\\"CHROME_DEBUG_PORT\\\": \\\"9222\\\"\n  }\n}\"\n\n# Or if you have it working in Claude Desktop, import from there\nclaude mcp add-from-claude-desktop\n```\n\n**Example of correct Claude Code configuration (with absolute paths):**\n```json\n{\n  \"command\": \"/Users/you/chrome-devtools-mcp/.venv/bin/python\",\n  \"args\": [\"/Users/you/chrome-devtools-mcp/server.py\"],\n  \"env\": {\n    \"CHROME_DEBUG_PORT\": \"9222\"\n  }\n}\n```\n\n### Connection Issues\n- **Chrome won't start**: The MCP server will start Chrome automatically when you use `start_chrome()`\n- **Can't connect**: Try `get_connection_status()` to check the connection\n- **Tools not working**: Ensure you've called `connect_to_browser()` or used `start_chrome_and_connect()`\n\n### Common Misconceptions\n- **This is not a web server**: The MCP server runs inside Claude Desktop, not as a separate web service\n- **No separate installation needed**: Once configured in Claude Desktop, the server starts automatically\n- **Your app runs separately**: This tool connects to your existing web application, it doesn't run it\n\n## Development \u0026 Testing\n\n*This section is for developers who want to test or modify the MCP server itself.*\n\n### Development Setup\n\n**With uv (recommended):**\n```bash\ngit clone https://github.com/benjaminr/chrome-devtools-mcp.git\ncd chrome-devtools-mcp\nuv sync\n```\n\n**With pip:**\n```bash\ngit clone https://github.com/benjaminr/chrome-devtools-mcp.git\ncd chrome-devtools-mcp\npip install -e \".[dev]\"\n```\n\n### Code Quality Tools\n\n```bash\n# Format code\nuv run ruff format .\n\n# Lint code  \nuv run ruff check .\n\n# Type checking\nuv run mypy src/\n```\n\n### Building the Extension\n\n**Install DXT packaging tools:**\n```bash\nnpm install -g @anthropic-ai/dxt\n```\n\n**Build the extension:**\n```bash\n# Quick build\nmake package\n\n# Or manually\nnpx @anthropic-ai/dxt pack\n```\n\n**Using Makefile for development:**\n```bash\nmake help           # Show all commands\nmake install        # Install dependencies\nmake dev            # Setup development environment + pre-commit\nmake check          # Run all checks (lint + type + test)\nmake pre-commit     # Run pre-commit hooks manually\nmake package        # Build .dxt extension\nmake release        # Full release build\n```\n\n### Pre-commit Hooks\n\nThis project uses pre-commit hooks to ensure code quality:\n\n- **ruff**: Linting and formatting\n- **mypy**: Type checking  \n- **pytest**: Test validation\n- **MCP validation**: Server registration check\n\nPre-commit hooks run automatically on `git commit` and can be run manually with `make pre-commit`.\n\n## License\n\nMIT License","funding_links":[],"categories":["📚 Projects (1974 total)","HarmonyOS","MCP Servers"],"sub_categories":["MCP Servers","Windows Manager","Browser Automation"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjaminr%2Fchrome-devtools-mcp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjaminr%2Fchrome-devtools-mcp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjaminr%2Fchrome-devtools-mcp/lists"}