Chrome DevTools MCP
AI-powered Chrome automation server with natural language element detection. Control Chrome browser through MCP protocol for testing, debugging, and performance analysis. Features 91% accuracy in element location, works with free AI models, and suppo
What is Chrome DevTools MCP?
Chrome DevTools MCP is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to ai-powered chrome automation server with natural language element detection. control chrome browser through mcp protocol for testing, debugging, and performance analysis. features 91% accuracy in elem...
AI-powered Chrome automation server with natural language element detection. Control Chrome browser through MCP protocol for testing, debugging, and performance analysis. Features 91% accuracy in element location, works with free AI models, and suppo
This server falls under the Browser Automation category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- AI-powered Chrome automation server with natural language el
Use Cases
Maintainer
Works with
Installation
NPM
npx -y chrome-devtools-mcpManual Installation
npx -y chrome-devtools-mcpConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Chrome DevTools MCP
Chrome DevTools MCP is an official MCP server that exposes the full power of the Chrome DevTools Protocol to AI assistants, enabling natural language control of a real Chrome browser. It offers 44 tools across input automation, navigation, performance tracing, network inspection, memory analysis, and Lighthouse auditing — all without writing a single line of Puppeteer code. Teams use it to automate end-to-end tests, debug live pages, profile rendering performance, and run accessibility audits through conversational prompts.
Prerequisites
- Node.js 18 or later installed (npx must be available)
- Google Chrome browser installed on the same machine
- An MCP-compatible client such as Claude Desktop, Cursor, or VS Code with MCP support
- No additional API keys required — the server launches and controls Chrome directly
Verify Node.js and npx
Ensure Node.js 18+ is installed so npx can run the package without a global install.
node --version && npx --versionTest the server in isolation
Run the server directly once to confirm Chrome launches and the MCP handshake works. The server will start Chrome automatically on first tool use.
npx -y chrome-devtools-mcp@latestAdd the server to your MCP client config
Open your MCP client configuration file (e.g. claude_desktop_config.json for Claude Desktop) and add the chrome-devtools entry under mcpServers.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Run headless or connect to an existing Chrome instance
Pass --headless to run without a visible browser window, or use --browser-url to attach to an already-running Chrome instance with remote debugging enabled.
npx -y chrome-devtools-mcp@latest --headless
# or attach to an existing instance:
npx -y chrome-devtools-mcp@latest --browser-url=http://localhost:9222Enable verbose logging for debugging
Set the DEBUG environment variable to * to see all DevTools Protocol messages, which is useful when developing new automation flows.
DEBUG=* npx -y chrome-devtools-mcp@latestOpt out of telemetry (optional)
The server collects anonymous usage statistics by default. Set the environment variable to disable this before starting the server.
CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1 npx -y chrome-devtools-mcp@latestChrome DevTools MCP Examples
Client configuration
Full claude_desktop_config.json entry for Chrome DevTools MCP with headless mode and telemetry disabled.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--headless"],
"env": {
"CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS": "1"
}
}
}
}Prompts to try
Real prompts that exercise the browser automation, performance, and debugging tools exposed by this server.
- "Navigate to https://example.com, take a screenshot, and tell me what you see on the page"
- "Run a Lighthouse audit on https://developers.google.com and summarize the performance score and top recommendations"
- "Fill in the login form at https://demo.example.com with username '[email protected]' and password 'demo123', then click the Submit button"
- "Start a performance trace on https://news.ycombinator.com, wait 3 seconds, stop the trace, and report the biggest performance bottlenecks"
- "List all network requests made when loading https://example.com and identify any that returned errors"Troubleshooting Chrome DevTools MCP
Chrome fails to launch and the server exits immediately
Ensure Google Chrome (not Chromium) is installed and discoverable in your PATH. On macOS, Chrome is typically at /Applications/Google Chrome.app. On Linux, install via your package manager and confirm `google-chrome --version` works.
MCP client shows 'tool call timed out' on first use
Chrome startup can take several seconds on the first call. Increase the tool timeout in your MCP client settings to at least 30 seconds. The server caches the browser instance for subsequent calls so later invocations are faster.
Screenshots are blank or navigation hangs
If you're running in a headless server environment, make sure virtual display dependencies are met (e.g. Xvfb on Linux). Alternatively, connect to an already-running Chrome instance using --browser-url=http://localhost:9222 after launching Chrome with --remote-debugging-port=9222.
Frequently Asked Questions about Chrome DevTools MCP
What is Chrome DevTools MCP?
Chrome DevTools MCP is a Model Context Protocol (MCP) server that ai-powered chrome automation server with natural language element detection. control chrome browser through mcp protocol for testing, debugging, and performance analysis. features 91% accuracy in element location, works with free ai models, and suppo It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Chrome DevTools MCP?
Install via npm with the command: npx -y chrome-devtools-mcp. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with Chrome DevTools MCP?
Chrome DevTools MCP works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Chrome DevTools MCP free to use?
Yes, Chrome DevTools MCP is open source and available under the Apache-2.0 license. You can use it freely in both personal and commercial projects.
Chrome DevTools MCP Alternatives — Similar Browser Automation Servers
Looking for alternatives to Chrome DevTools MCP? Here are other popular browser automation servers you can use with Claude, Cursor, and VS Code.
UI TARS Desktop
★ 34.9k📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
Playwright
★ 32.8kA production-ready browser automation server that enables AI assistants to interact with web pages using tools for navigation, element interaction, and data extraction. It features a built-in Inspector UI and robust crash recovery for reliable automa
Page Agent
★ 18.0kJavaScript in-page GUI agent. Control web interfaces with natural language.
Chrome
★ 11.7kAn extension-based MCP server that enables AI assistants to control your browser, leveraging existing sessions and login states for automation and content analysis. It provides over 20 tools for semantic tab search, interactive element manipulation,
LAMDA
★ 7.8kThe most powerful Android RPA agent framework, next generation mobile automation.
Browser Tools MCP
★ 7.2kThis application is a powerful browser monitoring and interaction tool that enables AI-powered applications via Anthropic's Model Context Protocol (MCP) to capture and analyze browser data through a Chrome extension.
Browse More Browser Automation MCP Servers
Explore all browser automation servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Chrome DevTools MCP in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Chrome DevTools MCP?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.