Skip to content

Commit 2b14588

Browse files
authored
feat: add chrome-devtools-mcp (#385)
1 parent 542ddc2 commit 2b14588

File tree

2 files changed

+183
-0
lines changed

2 files changed

+183
-0
lines changed
Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
# Chrome DevTools MCP Server
2+
3+
[![npm chrome-devtools-mcp package](https://img.shields.io/npm/v/chrome-devtools-mcp.svg)](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)
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# chrome-devtools-mcp MCP Server Registry Entry
2+
#
3+
# Repository: https://github.com/ChromeDevTools/chrome-devtools-mcp
4+
# Added: 2025-11-13
5+
# ---
6+
name: chrome-devtools-mcp
7+
description: Control and inspect live Chrome browser from AI coding agents with full DevTools access
8+
tier: Official
9+
status: Active
10+
transport: stdio
11+
repository_url: https://github.com/ChromeDevTools/chrome-devtools-mcp
12+
homepage: https://npmjs.org/package/chrome-devtools-mcp
13+
license: Apache-2.0
14+
author: Chrome DevTools Team
15+
tags:
16+
- chrome
17+
- devtools
18+
- browser
19+
- automation
20+
- debugging
21+
- performance
22+
- puppeteer
23+
- testing
24+
tools:
25+
- click
26+
- drag
27+
- fill
28+
- fill_form
29+
- handle_dialog
30+
- hover
31+
- press_key
32+
- upload_file
33+
- close_page
34+
- list_pages
35+
- navigate_page
36+
- new_page
37+
- select_page
38+
- wait_for
39+
- emulate
40+
- resize_page
41+
- performance_analyze_insight
42+
- performance_start_trace
43+
- performance_stop_trace
44+
- get_network_request
45+
- list_network_requests
46+
- evaluate_script
47+
- get_console_message
48+
- list_console_messages
49+
- take_screenshot
50+
- take_snapshot
51+
image: ghcr.io/stacklok/dockyard/npx/chrome-devtools-mcp:0.10.1
52+
permissions:
53+
network:
54+
outbound:
55+
insecure_allow_all: true
56+
allow_port:
57+
- 443
58+
- 80
59+
metadata:
60+
stars: 14453
61+
last_updated: 2025-11-12T00:00:00Z
62+
provenance:
63+
cert_issuer: https://token.actions.githubusercontent.com
64+
repository_uri: https://github.com/stacklok/dockyard
65+
runner_environment: github-hosted
66+
signer_identity: /.github/workflows/build-containers.yml
67+
sigstore_url: tuf-repo-cdn.sigstore.dev

0 commit comments

Comments
 (0)