Chrome DevTools

The chrome-devtools-mcp is Google’s official MCP server that connects your AI coding assistant directly to a live Chrome browser.

This means your AI agents can generate code, and then immediately check if it works in a real browser.

It can record a performance trace, inspect the DOM, analyze network requests, and read console logs to figure out what’s wrong and suggest accurate fixes.

Features

• 🚀 Performance trace recording and analysis: Capture detailed performance metrics and receive AI-generated optimization recommendations.
• 🔧 Complete browser automation: Control navigation, form interactions, and user input through Puppeteer integration.
• 📸 Visual debugging capabilities: Take screenshots and DOM snapshots for comprehensive page analysis.
• 🌐 Network request monitoring: Inspect HTTP traffic, analyze CORS issues, and debug API communication problems.
• 💻 JavaScript console access: Monitor runtime errors, warnings, and custom log messages directly.
• 📱 Device and network emulation: Test responsive designs and simulate various connection conditions.
• 🔍 Advanced DOM inspection: Evaluate scripts and examine page structure in real-time.

Use Cases

• Automated Performance Audits. You can ask your AI assistant to check a page’s performance. It will open the site, run a performance trace using DevTools, analyze the results for issues like a high LCP, and suggest specific improvements.
• Debugging Live Layout and Style Issues. If a page looks broken, you can have your AI connect to it. It will inspect the live DOM and CSS to identify the root cause of problems—like overflowing elements—and give you concrete suggestions based on what it finds in the browser.
• Diagnosing Network and Console Errors. When images fail to load or a feature isn’t working, your AI can investigate. It can look at network requests to spot CORS issues or check console logs for JavaScript errors that are breaking the functionality.
• Verifying Code Changes Instantly. After your AI generates a fix for a bug, it can automatically open the browser and verify the solution works as intended. This creates a much tighter feedback loop than manual testing.

How to Use It

1. Make sure you first have Node.js (version 22.12.0 or newer), a current version of Google Chrome, and npm installed.

2. Add the server to your MCP client’s configuration. This tells your AI assistant how to launch and communicate with the chrome-devtools-mcp server.

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

3. Configure your MCP clients:

Claude Code

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

Cline

For Cline, you will need to manually edit the cline_mcp_settings.json file. You can access this by clicking the MCP Servers icon in the Cline extension, selecting the “Installed” tab, and then clicking “Configure MCP Servers”. Add the following JSON object to your list of servers:

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

Codex

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

Copilot / VS Code

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

Cursor

To install manually, go to Cursor Settings -> Tools & Integrations (or MCP) and click New MCP Server. Then, enter the configuration details from the JSON snippet below.

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

Gemini CLI

For the Gemini CLI, you need to manually edit your settings.json file. You can find this file in your user profile at ~/.gemini/settings.json or in a project-specific folder at .gemini/settings.json. Add the chrome-devtools entry to the mcpServers object:

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

Gemini Code Assist

Similar to the Gemini CLI, you will need to manually edit the ~/.gemini/settings.json file in your home directory to configure MCP servers for Gemini Code Assist. Add the following configuration:

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

4. Try this prompt in your AI agent to test if everything is OK. The MCP server should automatically start a Chrome browser instance and begin recording a performance trace.

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

5. Customize the MCP server’s behavior with these arguments in your JSON config:

• --headless: Runs Chrome without a user interface. Set to true or false.
• --isolated: Creates a temporary user data directory that gets deleted when the browser closes. Good for clean test runs.
• --channel: Specifies which Chrome channel to use (stable, canary, beta, dev).
• --browserUrl: Connects to an already running Chrome instance.
• --executablePath: Points to a custom Chrome executable file.

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

6. All possible tools:

• click: Clicks on a specified element on the page.
• drag: Drags an element from a starting point to a destination.
• fill: Enters text into an input field.
• fill_form: Fills out an entire form based on provided data.
• handle_dialog: Interacts with browser dialogs like alert, confirm, or prompt.
• hover: Moves the mouse cursor over an element.
• upload_file: Uploads a file to a file input element.
• close_page: Closes the current or a specified browser tab.
• list_pages: Lists all currently open tabs.
• navigate_page: Navigates the current tab to a new URL.
• navigate_page_history: Moves backward or forward in the browser’s history.
• new_page: Opens a new, blank browser tab.
• select_page: Switches focus to a different open tab.
• wait_for: Pauses execution until a specific element appears or a condition is met.
• emulate_cpu: Throttles the CPU to simulate slower devices.
• emulate_network: Simulates different network conditions, like “Slow 3G”.
• resize_page: Changes the size of the browser’s viewport.
• performance_analyze_insight: Analyzes a recorded trace to find performance issues.
• performance_start_trace: Begins recording a performance trace with Chrome DevTools.
• performance_stop_trace: Stops the performance trace recording.
• get_network_request: Fetches the details of a single network request.
• list_network_requests: Lists all network requests that the page has made.
• evaluate_script: Executes a piece of JavaScript within the page’s context.
• list_console_messages: Retrieves all messages logged to the browser console.
• take_screenshot: Captures a screenshot of the current viewport.
• take_snapshot: Takes a snapshot of the page’s DOM structure.

FAQs

Q: Is my data safe when using this server?
A: The chrome-devtools-mcp server exposes the content of the browser instance to your MCP client. This includes the ability to inspect, debug, and change data. You should avoid using it with sensitive or personal information you don’t want the client to access.

Q: How does the MCP server handle multiple concurrent browser sessions?
A: The server manages a single Chrome instance per configuration but supports multiple tabs and pages within that instance. Use the list_pages and select_page tools to manage multiple concurrent debugging sessions across different web pages.

Q: Can I connect to an existing Chrome browser instead of starting a new one?
A: Yes, use the --browserUrl configuration option to connect to a Chrome instance you’ve started manually with remote debugging enabled. Start Chrome with --remote-debugging-port=9222 and configure the MCP server with --browserUrl=http://localhost:9222.

Q: What happens to browser data between MCP server restarts?
A: By default, the server maintains persistent user data, including cookies, localStorage, and browser history. This persistence helps with debugging scenarios that require authenticated sessions. Use --isolated=true for temporary sessions that clear data automatically.

Q: How can I debug issues when the browser automation fails?
A: Remove the --headless flag to see the browser UI during automation. The server logs detailed information about tool execution, and you can use the take_screenshot tool to capture visual state before and after actions that aren’t working as expected.

Q: Does the server work with MCP clients that use sandboxing?
A: Sandboxed environments prevent Chrome from creating its own security sandboxes, causing startup failures. Either disable sandboxing for the Chrome DevTools MCP server in your client configuration or use the --browserUrl option to connect to a Chrome instance running outside the sandbox.

Q: Can I use this with headless Chrome in production environments?
A: Yes, the --headless=true option runs Chrome without UI, making it suitable for CI/CD pipelines and server environments. Combined with --isolated=true, this creates completely ephemeral browser sessions perfect for automated testing scenarios.