home / mcp / chrome devtools mcp server
Provides programmatic access to Chrome DevTools for performance tracing, debugging, and automated browser actions via MCP.
Configuration
View docs{
"mcpServers": {
"anirbandz-chrome_mcp_devtool": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest"
]
}
}
}You can control and inspect a live Chrome browser with this MCP server, unlocking automated debugging, performance analysis, and reliable browser actions for your AI coding assistants. It connects your agent to Chrome DevTools, letting you record traces, analyze network activity, take screenshots, and automate tasks with built-in waiting for action results.
Use this MCP server with your preferred MCP client to start a Chrome session and perform automated actions driven by your AI assistant. You can run performance traces, inspect network requests, capture screenshots, and evaluate console output. The server can either start its own Chrome instance or connect to an existing one, depending on how you configure it. Your prompts will drive browser actions such as navigation, clicking, filling forms, and more, with results returned to your client for interpretation.
Prerequisites you need before installation: Node.js v20.19 or newer (latest maintenance LTS recommended), Chrome current stable or newer, and npm.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}To ensure you always use the latest server version, install with the latest tag in your MCP client using the provided configuration snippet. You can also install via various MCP clients using their dedicated commands. The server supports connecting to a running Chrome instance or starting Chrome itself, depending on your needs.
The server exposes a range of configuration options to connect to Chrome and control how the browser is launched. You can specify the browser URL or a WebSocket endpoint, choose headless vs headed mode, set an executable path, and adjust timeouts and viewport size. You can also constrain or expand the feature set by enabling or disabling categories such as emulation, performance, and network.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--channel=canary",
"--headless=true",
"--isolated=true"
]
}
}
}Ask the MCP client to check a page’s performance to verify that the browser opens and a performance trace is recorded. For example, prompt your client to check the performance of a Chrome developer page.
The MCP server exposes the browser contents to MCP clients. Be mindful of sharing sensitive or personal data through this channel. Use isolated user data directories when possible to avoid mixing with your regular browsing data.
If you use sandboxed MCP clients, Chrome’s ability to start its own browser process might be restricted. In such cases, prefer connecting to a separately started Chrome instance via a browser URL or WebSocket endpoint instead of starting a new one from within the sandbox.
If you encounter issues with VM-to-host port forwarding or remote debugging, check your environment’s networking settings and refer to Chrome DevTools remote debugging guidance for proper port exposure and security configurations.
The server provides tools for input automation (click, drag, fill, fill_form, handle_dialog, hover, press_key, upload_file), navigation automation (close_page, list_pages, navigate_page, new_page, select_page, wait_for), emulation (emulate, resize_page), performance (performance_analyze_insight, performance_start_trace, performance_stop_trace), network (get_network_request, list_network_requests), and debugging (evaluate_script, get_console_message, list_console_messages, take_screenshot, take_snapshot). Use these to drive your Chrome session and gather insights.
If you want to connect to an existing Chrome instance, configure the client to pass a browser URL or a WebSocket endpoint. This allows you to use your current Chrome profile or a browser started outside the MCP client. The browser can be started with a remote debugging port and a separate user data directory for safety.
Code examples and commands are provided in JavaScript/JSON style. The server configuration uses Node.js tooling, typically with npm and npx. The primary language for integrating and scripting is JavaScript.
Simulate a mouse click at a specified element or coordinate within the page.
Drag an element from a start point to an end point to simulate user drag-and-drop interactions.
Enter text into a focused input field or element.
Populate all fields in a form according to provided values.
Interact with modal dialogs, alerts, or prompts by accepting, dismissing, or providing input.
Move the cursor over a target element to trigger hover states.
Simulate keyboard key presses or shortcuts.
Attach a file to a file input control in a form.
Close the current browser tab or page.
Enumerate all open pages or tabs in the current browser context.
Navigate to a specified URL within the current tab.
Open a new browser tab or window.
Switch focus to a different open page.
Wait for a specific condition or event to occur in the page.
Emulate device characteristics such as viewport, user agent, or network conditions.
Change the viewport size to emulate different screen dimensions.
Analyze collected performance traces to extract actionable insights.
Begin recording a performance trace for the current page.
Stop recording and save the collected performance trace.
Retrieve details about a specific network request.
List all network requests captured during the session.
Run JavaScript in the page context and return the result.
Fetch messages logged to the browser console.
List all console messages collected during the session.
Capture a screenshot of the current page.
Capture a DOM snapshot of the current page state.