- Home
- MCP servers
- Chrome DevTools
Chrome DevTools
- typescript
3
GitHub Stars
typescript
Language
6 months ago
First Indexed
2 months ago
Catalog Refreshed
Documentation & install
Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.
Installation
Add the following to your MCP client configuration file.
Configuration
View docs{
"mcpServers": {
"ctrlshiftbryan-chrome-devtools-mcp": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest"
],
"env": {
"SystemRoot": "C:\\\\Windows",
"PROGRAMFILES": "C:\\\\Program Files"
}
}
}
}You can connect to a Chrome browser from your MCP client to automate actions, inspect DevTools, capture performance traces, and debug with full browser context. This MCP server lets your AI coding assistant run Chrome, record traces, analyze network activity, and take screenshots, all through a safe, configurable bridge between your client and a local Chrome instance or a running one.
How to use
With the Chrome DevTools MCP server, you drive a live Chrome instance from your MCP client. Start the server locally or connect to an already running Chrome via a WebSocket or browser URL. You can perform automated actions, navigate pages, inspect network requests, and gather performance data. Use it to automate debugging sessions, reproduce issues, or collect traces for performance analysis.
How to install
Prerequisites: Node.js v20.19 or newer (latest maintenance LTS preferred) and npm. Ensure you have Chrome current stable or newer installed.
# Quick install via npm/npx (works in most environments)
npx -y chrome-devtools-mcp@latest
# Or install via a package manager script if you prefer a more explicit flow
npm install -g chrome-devtools-mcp@latest
Configuration and running tips
You configure the MCP client to connect to the Chrome DevTools MCP server using a standard local (stdio) setup. The simplest form uses npx to run the server and connect directly from your MCP client.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
If you are on Windows 11 and need a Windows-specific startup configuration, you can use a local command that runs via cmd with explicit environment settings:
[mcp_servers.chrome-devtools]
command = "cmd"
args = [
"/c",
"npx",
"-y",
"chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
ststartup_timeout_ms = 20_000
Security and data handling
The Chrome DevTools MCP server exposes browser content to MCP clients for inspection, debugging, and modification. Do not share sensitive or personal information through MCP clients unless you are certain you control both ends and understand the data exposure.
Connecting to a running Chrome instance
You can connect to an existing Chrome instance by configuring your MCP client to point at the running browser through a browser URL or a WebSocket endpoint. When you start the browser with remote debugging enabled, the MCP server can attach to that session and operate within that profile.
If you prefer to connect via a WebSocket endpoint, pass the endpoint URL and optional headers in the MCP client configuration. This is useful when your Chrome instance runs in a separate process or in a restricted environment.
Available tools
click
Automate mouse click actions within the browser to interact with page elements.
drag
Drag an element from one coordinate to another to simulate user interactions.
fill
Fill a single form field with the specified value.
fill_form
Fill multiple fields in a form according to a provided mapping.
handle_dialog
Interact with modal or alert dialogs that appear in the page.
hover
Move the cursor over an element to trigger hover states.
press_key
Simulate keyboard input for a targeted element or region.
upload_file
Upload a file to a file input control.
close_page
Close the current page or tab in the browser.
list_pages
Retrieve a list of open and background pages.
navigate_page
Navigate the current page to a new URL.
new_page
Open a new browser page or tab.
select_page
Choose a specific page to interact with from available pages.
wait_for
Pause until a condition or event occurs in the browser.
emulate_cpu
Emulate different CPU conditions for performance testing.
emulate_network
Simulate network conditions to analyze performance under varied speeds.
resize_page
Change the viewport size to test responsive layouts.
performance_analyze_insight
Analyze performance data to extract actionable insights.
performance_start_trace
Begin recording a performance trace for later analysis.
performance_stop_trace
Stop the ongoing performance trace and export results.
get_network_request
Retrieve details for a specific network request.
list_network_requests
List all network requests captured during a session.
evaluate_script
Run arbitrary scripts in the page context and return results.
get_console_message
Fetch messages logged to the browser console.
list_console_messages
List all console messages captured during a session.
take_screenshot
Capture a screenshot of the current page state.
take_snapshot
Capture a DOM snapshot or visual state for debugging.