Browse Source
- Added ref="userNameDialog" to UserNameDialog in AccountViewView.vue template - Patched onEditName() to check for dialog ref and open() method before calling - Improved error notification to use NotificationIface fields (group, type, title, text) - Prevents "Cannot read properties of undefined (reading 'open')" error if dialog is missingpull/142/head
Matthew Raymer
12 hours ago
9 changed files with 716 additions and 24 deletions
@ -0,0 +1,677 @@ |
|||||
|
# 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 . |
||||
|
``` |
||||
|
|
||||
|
**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** |
||||
|
```bash |
||||
|
uv sync # or pip install -r requirements.txt |
||||
|
``` |
||||
|
|
||||
|
3. **Add MCP server using Claude CLI** |
||||
|
|
||||
|
**Quick setup (recommended):** |
||||
|
```bash |
||||
|
# Add the server with environment variable |
||||
|
claude mcp add chrome-devtools python server.py -e CHROME_DEBUG_PORT=9222 |
||||
|
``` |
||||
|
|
||||
|
**With custom scope:** |
||||
|
```bash |
||||
|
# Add to user scope (available across all projects) |
||||
|
claude mcp add chrome-devtools python server.py -s user -e CHROME_DEBUG_PORT=9222 |
||||
|
|
||||
|
# Add to project scope (only for this project) |
||||
|
claude mcp add chrome-devtools python 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 |
||||
|
claude mcp get chrome-devtools |
||||
|
``` |
||||
|
|
||||
|
### Option 4: Manual Claude Desktop Setup |
||||
|
|
||||
|
1. **Clone this repository** |
||||
|
```bash |
||||
|
git clone https://github.com/benjaminr/chrome-devtools-mcp.git |
||||
|
cd chrome-devtools-mcp |
||||
|
``` |
||||
|
|
||||
|
2. **Install dependencies** |
||||
|
|
||||
|
**With uv (recommended):** |
||||
|
```bash |
||||
|
uv sync |
||||
|
``` |
||||
|
|
||||
|
**With pip:** |
||||
|
```bash |
||||
|
pip install -r requirements.txt |
||||
|
``` |
||||
|
|
||||
|
3. **Add to Claude Desktop configuration** |
||||
|
|
||||
|
Edit your Claude Desktop config file: |
||||
|
- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` |
||||
|
- **Windows**: `%APPDATA%/Claude/claude_desktop_config.json` |
||||
|
|
||||
|
```json |
||||
|
{ |
||||
|
"mcpServers": { |
||||
|
"chrome-devtools": { |
||||
|
"command": "python", |
||||
|
"args": ["/absolute/path/to/chrome-devtools-mcp/server.py"], |
||||
|
"env": { |
||||
|
"CHROME_DEBUG_PORT": "9222" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
4. **Restart Claude Desktop** |
||||
|
|
||||
|
### Verify Installation |
||||
|
|
||||
|
After installation (either method), verify the server is available: |
||||
|
1. Open Claude Desktop |
||||
|
2. Look for MCP tools in the conversation |
||||
|
3. Try a simple command: `get_connection_status()` |
||||
|
|
||||
|
### Alternative MCP Clients |
||||
|
|
||||
|
For other MCP clients, run the server directly: |
||||
|
```bash |
||||
|
python server.py |
||||
|
``` |
||||
|
|
||||
|
## Quick Start |
||||
|
|
||||
|
Once installed in Claude Desktop, you can start debugging any web application: |
||||
|
|
||||
|
### Debug Your 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: |
||||
|
- 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() |
||||
|
``` |
||||
|
|
||||
|
### Start Debugging |
||||
|
|
||||
|
Once connected, use these commands: |
||||
|
- `get_network_requests()` - View HTTP traffic |
||||
|
- `get_console_error_summary()` - Analyse JavaScript errors |
||||
|
- `inspect_console_object("window")` - Inspect any JavaScript object |
||||
|
|
||||
|
## Available MCP Tools |
||||
|
|
||||
|
### Chrome Management |
||||
|
- `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 |
||||
|
|
||||
|
### Network Monitoring |
||||
|
- `get_network_requests(filter_domain?, filter_status?, limit?)` - Get network requests with filtering |
||||
|
- `get_network_response(request_id)` - Get detailed response data including body |
||||
|
|
||||
|
### Console Tools |
||||
|
- `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 |
||||
|
|
||||
|
### Page Analysis |
||||
|
- `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 |
||||
|
|
||||
|
### Storage & Data |
||||
|
- `get_storage_usage_and_quota(origin)` - Get storage usage and quota information |
||||
|
- `clear_storage_for_origin(origin, storage_types?)` - Clear storage by type and origin |
||||
|
- `get_all_cookies()` - Get all browser cookies |
||||
|
- `clear_all_cookies()` - Clear all browser cookies |
||||
|
- `set_cookie(name, value, domain, path?, expires?, http_only?, secure?, same_site?)` - Set a cookie |
||||
|
- `get_cookies(domain?)` - Get browser cookies with optional domain filtering |
||||
|
- `get_storage_key_for_frame(frame_id)` - Get storage key for a specific frame |
||||
|
- `track_cache_storage(origin, enable?)` - Enable/disable cache storage tracking |
||||
|
- `track_indexeddb(origin, enable?)` - Enable/disable IndexedDB tracking |
||||
|
- `override_storage_quota(origin, quota_size_mb?)` - Override storage quota |
||||
|
|
||||
|
## Use Cases |
||||
|
|
||||
|
### 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: |
||||
|
|
||||
|
**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 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") |
||||
|
``` |
||||
|
|
||||
|
**Manual setup (if you prefer):** |
||||
|
1. **Start Chrome**: Use `start_chrome()` |
||||
|
2. **Navigate to your app**: Use `navigate_to_url("localhost:3000")` |
||||
|
3. **Connect**: Use `connect_to_browser()` |
||||
|
4. **Monitor network traffic**: Use `get_network_requests()` to see all API calls |
||||
|
|
||||
|
### Checking JavaScript Console Errors |
||||
|
|
||||
|
When your web application has JavaScript errors or unexpected behaviour: |
||||
|
|
||||
|
1. **Navigate to your application** in the connected Chrome instance |
||||
|
2. **Check for console errors**: Use `get_console_error_summary()` to see all errors |
||||
|
3. **Monitor live errors**: Use `monitor_console_live(10)` to watch for new errors as you interact |
||||
|
4. **Inspect variables**: Use `inspect_console_object("myVariable")` to examine application state |
||||
|
|
||||
|
**Example workflow:** |
||||
|
``` |
||||
|
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. |
||||
|
``` |
||||
|
|
||||
|
### Performance Debugging |
||||
|
|
||||
|
When your web application loads slowly or uses too much memory: |
||||
|
|
||||
|
1. **Load your application** in the connected browser |
||||
|
2. **Check page metrics**: Use `get_page_info()` to see load times and resource counts |
||||
|
3. **Analyse performance**: Use `get_performance_metrics()` to see detailed timing data |
||||
|
4. **Monitor memory usage**: Check the memory information in the performance metrics |
||||
|
|
||||
|
**Example workflow:** |
||||
|
``` |
||||
|
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. |
||||
|
``` |
||||
|
|
||||
|
### Debugging Authentication Issues |
||||
|
|
||||
|
When login or session management isn't working: |
||||
|
|
||||
|
1. **Navigate to your login page** |
||||
|
2. **Check cookies**: Use `get_cookies()` to see authentication cookies |
||||
|
3. **Monitor network during login**: Use `monitor_console_live()` and `get_network_requests()` during the login process |
||||
|
4. **Examine stored data**: Use JavaScript execution to check localStorage/sessionStorage |
||||
|
|
||||
|
**Example workflow:** |
||||
|
``` |
||||
|
You: "Users can't stay logged in" |
||||
|
Claude: Let me check the authentication setup. |
||||
|
|
||||
|
get_cookies() |
||||
|
|
||||
|
I can see the auth cookie is present. Let me check what happens during login by monitoring the network: |
||||
|
|
||||
|
get_network_requests(filter_domain="your-api.com") |
||||
|
|
||||
|
I notice the login request returns a 200 but no Set-Cookie header. Let me also check localStorage: |
||||
|
|
||||
|
execute_javascript("Object.keys(localStorage)") |
||||
|
``` |
||||
|
|
||||
|
### DOM Element Inspection |
||||
|
- `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 |
||||
|
|
||||
|
### CSS Style Analysis |
||||
|
- `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 |
||||
|
|
||||
|
## Common Commands |
||||
|
|
||||
|
| Task | Command | |
||||
|
|------|---------| |
||||
|
| Start Chrome and connect to app | `start_chrome_and_connect("localhost:3000")` | |
||||
|
| Start Chrome (manual setup) | `start_chrome()` | |
||||
|
| Navigate to page | `navigate_to_url("localhost:3000")` | |
||||
|
| Connect to browser | `connect_to_browser()` | |
||||
|
| See all network requests | `get_network_requests()` | |
||||
|
| Find failed API calls | `get_network_requests(filter_status=404)` | |
||||
|
| Check for JavaScript errors | `get_console_error_summary()` | |
||||
|
| Watch console in real-time | `monitor_console_live(10)` | |
||||
|
| Check page load performance | `get_page_info()` | |
||||
|
| Examine a variable | `inspect_console_object("window.myApp")` | |
||||
|
| View cookies | `get_cookies()` | |
||||
|
| Run JavaScript | `execute_javascript("document.title")` | |
||||
|
|
||||
|
## Configuration |
||||
|
|
||||
|
### Environment Variables |
||||
|
- `CHROME_DEBUG_PORT` - Chrome remote debugging port (default: 9222) |
||||
|
|
||||
|
### MCP Compatibility |
||||
|
- **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 |
||||
|
|
||||
|
## Usage Workflow |
||||
|
|
||||
|
### 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 |
||||
|
|
||||
|
### Debugging Session |
||||
|
1. **Connect to your application** via Claude Desktop: |
||||
|
``` |
||||
|
start_chrome_and_connect("localhost:3000") |
||||
|
``` |
||||
|
*Replace with your application's URL* |
||||
|
|
||||
|
2. **Debug your application** using the MCP tools: |
||||
|
- Monitor network requests |
||||
|
- Check console errors |
||||
|
- Inspect JavaScript objects |
||||
|
- Analyse performance |
||||
|
|
||||
|
3. **Make changes to your code** in your editor |
||||
|
4. **Refresh or interact** with your application |
||||
|
5. **Continue debugging** with real-time data |
||||
|
|
||||
|
### Manual Connection (Alternative) |
||||
|
If you prefer step-by-step control: |
||||
|
1. `start_chrome()` - Launch Chrome with debugging |
||||
|
2. `navigate_to_url("your-app-url")` - Navigate to your application |
||||
|
3. `connect_to_browser()` - Connect the MCP server |
||||
|
4. Use debugging tools as needed |
||||
|
|
||||
|
## Security Notes |
||||
|
|
||||
|
- 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 |
||||
|
|
||||
|
## Troubleshooting |
||||
|
|
||||
|
### Server Shows as "Disabled" in Claude Desktop |
||||
|
|
||||
|
If the server appears in Claude but shows as "disabled", try these steps: |
||||
|
|
||||
|
1. **Check Claude Desktop logs**: |
||||
|
- **macOS**: `~/Library/Logs/Claude/mcp*.log` |
||||
|
- **Windows**: `%APPDATA%/Claude/logs/mcp*.log` |
||||
|
|
||||
|
2. **Common fixes**: |
||||
|
```bash |
||||
|
# 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 |
||||
|
``` |
||||
|
|
||||
|
3. **Check dependencies**: |
||||
|
```bash |
||||
|
# Ensure all dependencies are available |
||||
|
pip install mcp websockets aiohttp |
||||
|
|
||||
|
# Test imports |
||||
|
python3 -c "from server import mcp; print('OK')" |
||||
|
``` |
||||
|
|
||||
|
4. **Restart Claude Desktop** completely (quit and reopen) |
||||
|
|
||||
|
### Installation Issues |
||||
|
- **MCP CLI not found**: Install MCP CLI with `pip install mcp` or `npm install -g @modelcontextprotocol/cli` |
||||
|
- **Server not appearing in Claude**: |
||||
|
- For MCP CLI: Run `mcp list` to verify the server is installed |
||||
|
- For manual setup: Check Claude Desktop configuration file path and JSON syntax |
||||
|
- **Import errors**: |
||||
|
- For MCP CLI: Use `--with-editable .` to install local dependencies |
||||
|
- For manual setup: Run `pip install -r requirements.txt` |
||||
|
- **Permission errors**: Use absolute paths in configuration |
||||
|
- **Environment variables not working**: Verify `.env` file format or `-v` flag syntax |
||||
|
- **Module not found**: Ensure you're using `--with-editable .` flag for local package installation |
||||
|
|
||||
|
### Debugging Steps |
||||
|
|
||||
|
**Step 1: Check MCP CLI Status** |
||||
|
```bash |
||||
|
# List all installed servers |
||||
|
mcp list |
||||
|
|
||||
|
# Check specific server status |
||||
|
mcp status "Chrome DevTools MCP" |
||||
|
``` |
||||
|
|
||||
|
**Step 2: Test Server Manually** |
||||
|
```bash |
||||
|
# Test if server starts without errors |
||||
|
python3 server.py |
||||
|
|
||||
|
# Test imports |
||||
|
python3 -c "from server import mcp; print(f'Server: {mcp.name}')" |
||||
|
``` |
||||
|
|
||||
|
**Step 3: Check Configuration** |
||||
|
|
||||
|
**For Claude Desktop:** |
||||
|
```bash |
||||
|
# View current configuration (macOS) |
||||
|
cat "~/Library/Application Support/Claude/claude_desktop_config.json" |
||||
|
|
||||
|
# View current configuration (Windows) |
||||
|
type "%APPDATA%/Claude/claude_desktop_config.json" |
||||
|
``` |
||||
|
|
||||
|
**For Claude Code:** |
||||
|
```bash |
||||
|
# List configured MCP servers |
||||
|
claude mcp list |
||||
|
|
||||
|
# Get details about a specific server |
||||
|
claude mcp get chrome-devtools |
||||
|
|
||||
|
# Check if server is working |
||||
|
claude mcp serve --help |
||||
|
``` |
||||
|
|
||||
|
**Step 4: Reinstall if Needed** |
||||
|
|
||||
|
**For MCP CLI:** |
||||
|
```bash |
||||
|
# Clean reinstall |
||||
|
mcp remove "Chrome DevTools MCP" |
||||
|
mcp install server.py -n "Chrome DevTools MCP" --with-editable . |
||||
|
|
||||
|
# Restart Claude Desktop completely |
||||
|
``` |
||||
|
|
||||
|
**For Claude Code:** |
||||
|
```bash |
||||
|
# Remove and re-add the server |
||||
|
claude mcp remove chrome-devtools |
||||
|
claude mcp add chrome-devtools python server.py -e CHROME_DEBUG_PORT=9222 |
||||
|
|
||||
|
# Or update with different scope |
||||
|
claude mcp add chrome-devtools python server.py -s user -e CHROME_DEBUG_PORT=9222 |
||||
|
``` |
||||
|
|
||||
|
### Common Error Messages |
||||
|
|
||||
|
| Error | Solution | |
||||
|
|-------|----------| |
||||
|
| "Module not found" | Use `--with-editable .` flag | |
||||
|
| "No server object found" | Server should export `mcp` object (already fixed) | |
||||
|
| "Import error" | Check `pip install mcp websockets aiohttp` | |
||||
|
| "Permission denied" | Use absolute paths in config | |
||||
|
| "Server disabled" | Check Claude Desktop logs, restart Claude | |
||||
|
|
||||
|
### Manual Configuration Fallback |
||||
|
|
||||
|
**For Claude Desktop:** |
||||
|
If MCP CLI isn't working, add this to Claude Desktop config manually: |
||||
|
|
||||
|
```json |
||||
|
{ |
||||
|
"mcpServers": { |
||||
|
"chrome-devtools": { |
||||
|
"command": "python3", |
||||
|
"args": ["/absolute/path/to/chrome-devtools-mcp/server.py"], |
||||
|
"env": { |
||||
|
"CHROME_DEBUG_PORT": "9222" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**For Claude Code:** |
||||
|
If the `claude mcp add` command isn't working, you can use the JSON format: |
||||
|
|
||||
|
```bash |
||||
|
# Add server using JSON configuration |
||||
|
claude mcp add-json chrome-devtools '{ |
||||
|
"command": "python3", |
||||
|
"args": ["'$(pwd)'/server.py"], |
||||
|
"env": { |
||||
|
"CHROME_DEBUG_PORT": "9222" |
||||
|
} |
||||
|
}' |
||||
|
|
||||
|
# Or import from Claude Desktop if you have it configured there |
||||
|
claude mcp add-from-claude-desktop |
||||
|
``` |
||||
|
|
||||
|
### Connection Issues |
||||
|
- **Chrome won't start**: The MCP server will start Chrome automatically when you use `start_chrome()` |
||||
|
- **Can't connect**: Try `get_connection_status()` to check the connection |
||||
|
- **Tools not working**: Ensure you've called `connect_to_browser()` or used `start_chrome_and_connect()` |
||||
|
|
||||
|
### Common Misconceptions |
||||
|
- **This is not a web server**: The MCP server runs inside Claude Desktop, not as a separate web service |
||||
|
- **No separate installation needed**: Once configured in Claude Desktop, the server starts automatically |
||||
|
- **Your app runs separately**: This tool connects to your existing web application, it doesn't run it |
||||
|
|
||||
|
## Development & Testing |
||||
|
|
||||
|
*This section is for developers who want to test or modify the MCP server itself.* |
||||
|
|
||||
|
### Development Setup |
||||
|
|
||||
|
**With uv (recommended):** |
||||
|
```bash |
||||
|
git clone https://github.com/benjaminr/chrome-devtools-mcp.git |
||||
|
cd chrome-devtools-mcp |
||||
|
uv sync |
||||
|
``` |
||||
|
|
||||
|
**With pip:** |
||||
|
```bash |
||||
|
git clone https://github.com/benjaminr/chrome-devtools-mcp.git |
||||
|
cd chrome-devtools-mcp |
||||
|
pip install -e ".[dev]" |
||||
|
``` |
||||
|
|
||||
|
### Code Quality Tools |
||||
|
|
||||
|
```bash |
||||
|
# Format code |
||||
|
uv run ruff format . |
||||
|
|
||||
|
# Lint code |
||||
|
uv run ruff check . |
||||
|
|
||||
|
# Type checking |
||||
|
uv run mypy src/ |
||||
|
``` |
||||
|
|
||||
|
### Building the Extension |
||||
|
|
||||
|
**Install DXT packaging tools:** |
||||
|
```bash |
||||
|
npm install -g @anthropic-ai/dxt |
||||
|
``` |
||||
|
|
||||
|
**Build the extension:** |
||||
|
```bash |
||||
|
# Quick build |
||||
|
make package |
||||
|
|
||||
|
# Or manually |
||||
|
npx @anthropic-ai/dxt pack |
||||
|
``` |
||||
|
|
||||
|
**Using Makefile for development:** |
||||
|
```bash |
||||
|
make help # Show all commands |
||||
|
make install # Install dependencies |
||||
|
make dev # Setup development environment + pre-commit |
||||
|
make check # Run all checks (lint + type + test) |
||||
|
make pre-commit # Run pre-commit hooks manually |
||||
|
make package # Build .dxt extension |
||||
|
make release # Full release build |
||||
|
``` |
||||
|
|
||||
|
### Pre-commit Hooks |
||||
|
|
||||
|
This project uses pre-commit hooks to ensure code quality: |
||||
|
|
||||
|
- **ruff**: Linting and formatting |
||||
|
- **mypy**: Type checking |
||||
|
- **pytest**: Test validation |
||||
|
- **MCP validation**: Server registration check |
||||
|
|
||||
|
Pre-commit hooks run automatically on `git commit` and can be run manually with `make pre-commit`. |
||||
|
|
||||
|
## License |
||||
|
|
||||
|
MIT License |
||||
Loading…
Reference in new issue