Chrome DevTools MCP - Browser Control Tool for AI Programming Assistants

Project Overview

Chrome DevTools MCP is an official Model Context Protocol (MCP) server that enables AI programming assistants (such as Gemini, Claude, Cursor, or Copilot) to control and inspect a live running Chrome browser. This tool provides AI coding assistants with the full capabilities of Chrome DevTools for reliable automation, deep debugging, and performance analysis.

GitHub Address: https://github.com/ChromeDevTools/chrome-devtools-mcp

Core Features

1. Performance Insights

• Record performance traces using Chrome DevTools
• Extract actionable performance optimization suggestions
• Help AI assistants identify performance bottlenecks

2. Advanced Browser Debugging

• Analyze network requests
• Capture screenshots
• Inspect browser console output
• Detect CORS issues and console errors

3. Reliable Automation

• Browser automation based on Puppeteer
• Automatically wait for operation results
• Supports form filling, page navigation, element interaction

Main Feature Categories

The Chrome DevTools MCP server provides 26 tools, categorized as follows:

Input Automation (7 tools)

• Click, fill forms, type text
• Hover, keyboard operations, and other interactive functions

Navigation Automation (7 tools)

• Page navigation, forward/backward
• Refresh, wait for loading completion

Emulation Features (3 tools)

• Device emulation
• Geolocation emulation
• Network condition emulation

Performance Analysis (3 tools)

• Performance trace recording
• Performance metric analysis
• Optimization suggestion generation

Network Monitoring (2 tools)

• Network request listing
• Request details viewing

Debugging Tools (4 tools)

• Console message viewing
• JavaScript execution
• Screenshot functionality
• DOM inspection

System Requirements

• Node.js: 20 or newer LTS version
• Chrome: Current stable version or newer
• npm: Package manager

Installation and Configuration

General Configuration

Add the following to your MCP client configuration file:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Supported AI Programming Assistants

Claude Code

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cursor

Via Cursor settings interface: Settings -> MCP -> New MCP Server, use the configuration above.

Gemini CLI

# Project level
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Global installation
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

VS Code Copilot

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Cline

Follow Cline's MCP configuration guide using standard configuration.

Configuration Options

Chrome DevTools MCP supports the following configuration parameters:

Parameter	Type	Default Value	Description
--headless	boolean	false	Whether to run in headless mode (no UI)
--isolated	boolean	false	Create a temporary user data directory, automatically cleaned up after closing
--channel	string	stable	Chrome version channel (stable/canary/beta/dev)
--viewport	string	-	Initial viewport size, e.g., 1280x720
--executablePath / -e	string	-	Custom Chrome executable path
--browserUrl / -u	string	-	Connect to a running Chrome instance
--proxyServer	string	-	Proxy server configuration
--acceptInsecureCerts	boolean	false	Ignore self-signed and expired certificate errors (use with caution)
--logFile	string	-	Debug log file path

Configuration Example

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

Usage Examples

Basic Test

After installation, enter the following prompt in your AI assistant to test:

Check the performance of https://developers.chrome.com

The AI assistant will automatically:

1. Open the Chrome browser
2. Navigate to the specified website
3. Record a performance trace
4. Analyze and provide performance optimization suggestions

Common Use Cases

1. Performance Analysis

Analyze the loading performance of example.com and provide optimization suggestions.

2. Debugging Network Issues

Check if my-website.com has CORS errors.

3. Automation Testing

Navigate to demo.realworld.io, fill out the login form, and take a screenshot.

4. Form Filling

On the login page, fill in the email test@example.com and password testpass123.

5. Console Inspection

View the current page's console error messages.

How It Works

Chrome DevTools MCP operates based on the Model Context Protocol (MCP) standard:

1. MCP Protocol: An open-source standard for connecting large language models with external tools and data sources.
2. Tool Exposure: Chrome DevTools functionalities are exposed as tools via the MCP protocol.
3. AI Invocation: The AI assistant calls the appropriate tool based on user requests.
4. Automated Execution: Puppeteer is used to execute operations within Chrome.
5. Result Return: Execution results are fed back to the AI assistant.

Example Flow

When you ask the AI assistant to "check website performance":

User: Check my website's performance
  ↓
AI Assistant: Uses the performance_start_trace tool
  ↓
MCP Server: Launches Chrome, opens the website, records a performance trace
  ↓
AI Assistant: Analyzes performance data
  ↓
User: Receives a performance analysis report and optimization suggestions

Data Directory

Chrome DevTools MCP uses the following user data directories:

• Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

The data directory is not cleared between runs unless the --isolated option is used.

Security Considerations

⚠️ Important Note:

Chrome DevTools MCP exposes the content of the browser instance to MCP clients, allowing them to inspect, debug, and modify any data within the browser or DevTools.

Please avoid sharing sensitive or personal information that you do not wish to share with MCP clients.

Troubleshooting

If you encounter issues, please refer to the official troubleshooting guide.

Common Issues

1. Browser not launching automatically: The MCP server only launches the browser when the client uses a tool that requires it.
2. Sandbox permission issues: If the MCP client has sandboxing enabled, it may need to be disabled, or you might need to use --connect-url to connect to a manually launched Chrome instance.
3. Startup timeout: On Windows, you might need to increase the startup_timeout_ms configuration.

Tech Stack

• Core: Node.js
• Browser Automation: Puppeteer
• Protocol: Chrome DevTools Protocol (CDP)
• Standard: Model Context Protocol (MCP)

Project Features

1. Official Support: Officially developed and maintained by the Chrome DevTools team.
2. Broad Compatibility: Supports various mainstream AI programming assistants.
3. Comprehensive Functionality: Provides 26 tools covering automation, debugging, and performance analysis.
4. Easy Integration: No local installation required with npx, simple configuration.
5. Active Development: Continuously updated and improved features.

Applicable Scenarios

• Web Development Debugging: AI assistants help identify and fix bugs.
• Performance Optimization: Automated performance analysis and optimization suggestions.
• Automation Testing: Write and execute browser automation tests.
• Website Monitoring: Check website functionality and performance.
• Development Verification: Verify the actual effect of code changes in the browser.

Feedback and Contributions

This project is in public preview, and the Chrome DevTools team is actively seeking community feedback:

• If you have feature requests or find issues, please submit them on GitHub Issues.
• Whether you are a developer using AI programming assistants or a vendor building next-generation AI development tools, your insights are invaluable.