Chrome DevTools
An MCP Server for Chrome DevTools, following the Chrome DevTools Protocol. Integrates with Claude Desktop and Claude Code.
What is Chrome DevTools?
Chrome DevTools is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to mcp server for chrome devtools, following the chrome devtools protocol. integrates with claude desktop and claude code.
An MCP Server for Chrome DevTools, following the Chrome DevTools Protocol. Integrates with Claude Desktop and Claude Code.
This server falls under the Browser Automation and Developer Tools categories on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- An MCP Server for Chrome DevTools, following the Chrome DevT
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx chrome-devtoolsConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Chrome DevTools
The Chrome DevTools MCP server connects Claude to a live Chrome browser session via the Chrome DevTools Protocol (CDP), giving the AI full access to network traffic, console output, DOM structure, performance metrics, cookies, and JavaScript execution. Claude can launch Chrome, navigate to URLs, monitor failed network requests, inspect console errors, query DOM elements by CSS selector, and run arbitrary JavaScript — all in response to natural-language debugging requests. This makes it a powerful tool for diagnosing React apps, API integration bugs, and frontend performance issues without leaving your conversation.
Prerequisites
- Python 3.10+ and the uv package manager installed
- Google Chrome or Chromium installed on the same machine
- Claude Desktop or Claude Code CLI as your MCP client
- Git to clone the repository (no PyPI package — install from source)
Clone the repository
Clone the chrome-devtools-mcp repository to a local directory. You'll reference the absolute path to server.py in your client config.
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
uv syncNote the absolute paths needed for configuration
Record the full path to server.py and the virtual environment's Python binary — you'll need both in the next step.
echo "Server: $(pwd)/server.py"
echo "Python: $(pwd)/.venv/bin/python"Add the server to Claude Desktop config
Edit claude_desktop_config.json to add the chrome-devtools server. Use absolute paths and set CHROME_DEBUG_PORT to 9222 (the default CDP port).
Add via Claude Code CLI (alternative)
If using Claude Code CLI, add the server with the mcp add command using absolute paths to the venv Python and server.py.
claude mcp add chrome-devtools "$(pwd)/.venv/bin/python" "$(pwd)/server.py" -e CHROME_DEBUG_PORT=9222Start a debugging session
Ask Claude to launch Chrome and connect to your app. The start_chrome_and_connect tool opens Chrome and attaches the CDP session in one step.
Chrome DevTools Examples
Client configuration
Add this block to claude_desktop_config.json, replacing /absolute/path/to with the actual paths from step 2.
{
"mcpServers": {
"chrome-devtools": {
"command": "/absolute/path/to/chrome-devtools-mcp/.venv/bin/python",
"args": ["/absolute/path/to/chrome-devtools-mcp/server.py"],
"env": {
"CHROME_DEBUG_PORT": "9222"
}
}
}
}Prompts to try
Use these prompts in Claude to invoke the Chrome DevTools MCP capabilities.
- "Open Chrome, navigate to localhost:3000, and show me all network requests that returned a 500 status"
- "Check the browser console for JavaScript errors on the current page and explain what's causing them"
- "Monitor the console output for the next 10 seconds while I trigger the login flow"
- "Inspect the computed CSS styles of the main navigation element"
- "Get the page performance metrics for https://example.com and identify bottlenecks"Troubleshooting Chrome DevTools
Chrome DevTools MCP server shows as disabled in Claude Desktop
Check MCP logs at ~/Library/Logs/Claude/mcp*.log. The most common cause is a relative path in the config — always use absolute paths for both the Python binary and server.py.
start_chrome_and_connect fails with 'connection refused'
The server launches Chrome with remote debugging enabled on port 9222. Ensure no other Chrome instance is running (Chrome can only have one CDP session at a time). Kill existing Chrome processes before calling start_chrome_and_connect.
Module not found error when the server starts
The config must point to the .venv/bin/python inside the cloned repo, not the system Python. Dependencies are installed only in the venv by 'uv sync'. Using the wrong Python binary will cause import errors.
Frequently Asked Questions about Chrome DevTools
What is Chrome DevTools?
Chrome DevTools is a Model Context Protocol (MCP) server that mcp server for chrome devtools, following the chrome devtools protocol. integrates with claude desktop and claude code. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Chrome DevTools?
Follow the installation instructions on the Chrome DevTools GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Chrome DevTools?
Chrome DevTools works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Chrome DevTools free to use?
Yes, Chrome DevTools is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
Chrome DevTools Alternatives — Similar Browser Automation Servers
Looking for alternatives to Chrome DevTools? Here are other popular browser automation servers you can use with Claude, Cursor, and VS Code.
Chrome DevTools MCP
★ 40.6kAI-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
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.
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 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?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.