|
| 1 | +# Chrome DevTools MCP Server |
| 2 | + |
| 3 | +[](https://npmjs.org/package/chrome-devtools-mcp) |
| 4 | + |
| 5 | +`chrome-devtools-mcp` lets your coding agent control and inspect a live Chrome browser. It acts as a Model Context Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis. |
| 6 | + |
| 7 | +## Key Features |
| 8 | + |
| 9 | +- **Performance insights**: Uses Chrome DevTools to record traces and extract actionable performance insights |
| 10 | +- **Advanced browser debugging**: Analyze network requests, take screenshots and check the browser console |
| 11 | +- **Reliable automation**: Uses Puppeteer to automate actions in Chrome and automatically wait for action results |
| 12 | + |
| 13 | +## Requirements |
| 14 | + |
| 15 | +- Node.js v20.19 or newer (latest maintenance LTS version) |
| 16 | +- Chrome current stable version or newer |
| 17 | +- npm |
| 18 | + |
| 19 | +## Configuration Options |
| 20 | + |
| 21 | +The server supports various configuration options that can be passed via the `args` property: |
| 22 | + |
| 23 | +### Browser Connection |
| 24 | + |
| 25 | +- `--browserUrl`, `-u`: Connect to a running Chrome instance using port forwarding |
| 26 | +- `--wsEndpoint`, `-w`: WebSocket endpoint to connect to a running Chrome instance |
| 27 | +- `--wsHeaders`: Custom headers for WebSocket connection in JSON format |
| 28 | + |
| 29 | +### Browser Options |
| 30 | + |
| 31 | +- `--headless`: Run in headless (no UI) mode (default: false) |
| 32 | +- `--executablePath`, `-e`: Path to custom Chrome executable |
| 33 | +- `--isolated`: Creates a temporary user-data-dir that is automatically cleaned up (default: false) |
| 34 | +- `--channel`: Specify Chrome channel: `stable`, `canary`, `beta`, or `dev` (default: stable) |
| 35 | +- `--viewport`: Initial viewport size (e.g., `1280x720`) |
| 36 | +- `--proxyServer`: Proxy server configuration for Chrome |
| 37 | +- `--acceptInsecureCerts`: Ignore errors for self-signed and expired certificates |
| 38 | +- `--chromeArg`: Additional arguments for Chrome |
| 39 | + |
| 40 | +### Tool Categories |
| 41 | + |
| 42 | +- `--categoryEmulation`: Enable/disable emulation tools (default: true) |
| 43 | +- `--categoryPerformance`: Enable/disable performance tools (default: true) |
| 44 | +- `--categoryNetwork`: Enable/disable network tools (default: true) |
| 45 | + |
| 46 | +### Debugging |
| 47 | + |
| 48 | +- `--logFile`: Path to a file to write debug logs to |
| 49 | + |
| 50 | +## Security Considerations |
| 51 | + |
| 52 | +⚠️ **Important Security Notes:** |
| 53 | + |
| 54 | +1. `chrome-devtools-mcp` exposes content of the browser instance to MCP clients, allowing them to inspect, debug, and modify any data in the browser or DevTools |
| 55 | +2. When using `--browser-url` to connect to a running Chrome instance, the remote debugging port allows any application on your machine to control the browser |
| 56 | +3. Chrome requires a non-default user data directory when enabling remote debugging to protect your regular browsing profile |
| 57 | +4. Avoid sharing sensitive or personal information that you don't want to share with MCP clients |
| 58 | + |
| 59 | +## User Data Directory |
| 60 | + |
| 61 | +The server starts Chrome using the following user data directory: |
| 62 | + |
| 63 | +- **Linux/macOS**: `$HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL` |
| 64 | +- **Windows**: `%HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL` |
| 65 | + |
| 66 | +The directory is shared across all instances. Use `--isolated=true` for a temporary directory that's cleaned up automatically. |
| 67 | + |
| 68 | +## Tools |
| 69 | + |
| 70 | +The server provides 26 tools organized into categories: |
| 71 | + |
| 72 | +### Input Automation (8 tools) |
| 73 | + |
| 74 | +- `click`, `drag`, `fill`, `fill_form`, `handle_dialog`, `hover`, `press_key`, `upload_file` |
| 75 | + |
| 76 | +### Navigation Automation (6 tools) |
| 77 | + |
| 78 | +- `close_page`, `list_pages`, `navigate_page`, `new_page`, `select_page`, `wait_for` |
| 79 | + |
| 80 | +### Emulation (2 tools) |
| 81 | + |
| 82 | +- `emulate`, `resize_page` |
| 83 | + |
| 84 | +### Performance (3 tools) |
| 85 | + |
| 86 | +- `performance_analyze_insight`, `performance_start_trace`, `performance_stop_trace` |
| 87 | + |
| 88 | +### Network (2 tools) |
| 89 | + |
| 90 | +- `get_network_request`, `list_network_requests` |
| 91 | + |
| 92 | +### Debugging (5 tools) |
| 93 | + |
| 94 | +- `evaluate_script`, `get_console_message`, `list_console_messages`, `take_screenshot`, `take_snapshot` |
| 95 | + |
| 96 | +## Known Limitations |
| 97 | + |
| 98 | +### Operating System Sandboxes |
| 99 | + |
| 100 | +Some MCP clients allow sandboxing the MCP server using macOS Seatbelt or Linux containers. If sandboxes are enabled, `chrome-devtools-mcp` cannot start Chrome (which requires permissions to create its own sandboxes). |
| 101 | + |
| 102 | +**Workarounds:** |
| 103 | + |
| 104 | +- Disable sandboxing for `chrome-devtools-mcp` in your MCP client |
| 105 | +- Use `--browser-url` to connect to a Chrome instance started manually outside the MCP client sandbox |
| 106 | + |
| 107 | +## Documentation |
| 108 | + |
| 109 | +- [Tool Reference](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md) |
| 110 | +- [Troubleshooting](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md) |
| 111 | +- [Changelog](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/CHANGELOG.md) |
| 112 | +- [Contributing](https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/CONTRIBUTING.md) |
| 113 | + |
| 114 | +## Repository |
| 115 | + |
| 116 | +[https://github.com/ChromeDevTools/chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) |
0 commit comments