Chrome DevTools MCP

Chrome DevTools MCP for Zed

A Zed extension that integrates the Chrome DevTools MCP server, giving your AI assistant access to Chrome's automation, debugging, and performance analysis capabilities.

Features

• Zero configuration — Chrome launches automatically when needed
• Full DevTools access — Network inspection, console logs, screenshots, performance traces
• Browser automation — Navigate, click, fill forms, handle dialogs
• All upstream tools — Direct access to 26+ MCP tools from chrome-devtools-mcp

Prerequisites

• Zed editor
• Node.js v20 or newer
• Google Chrome (stable channel)

Installation

From Zed Extensions (when published)

1. Open Zed → Extensions
2. Search for "Chrome DevTools MCP"
3. Click Install

Development Installation

1. Clone this repository
2. In Zed: Extensions → Install Dev Extension
3. Select the chrome-devtools-mcp-zed directory

Usage

No configuration required. The extension automatically:

1. Installs/updates the chrome-devtools-mcp npm package
2. Launches Chrome when a tool requires it
3. Manages a persistent browser profile at ~/.cache/chrome-devtools-mcp/chrome-profile

Example Prompts

Take a screenshot of https://example.com

Check the performance of https://zed.dev

List all network requests on the current page

Configuration (Optional)

Add settings to your Zed configuration for advanced use cases:

{
  "context_servers": {
    "chrome-devtools-mcp-zed": {
      "settings": {
        // Your settings here
      }
    }
  }
}

Connection Options

Chrome Launch Options

Other Options

Example Configurations

Connect to existing Chrome instance:

{
  "context_servers": {
    "chrome-devtools-mcp-zed": {
      "settings": {
        "browser_url": "http://127.0.0.1:9222"
      }
    }
  }
}

Headless Chrome with custom viewport:

{
  "context_servers": {
    "chrome-devtools-mcp-zed": {
      "settings": {
        "headless": true,
        "viewport": "1920x1080"
      }
    }
  }
}

Temporary isolated profile:

{
  "context_servers": {
    "chrome-devtools-mcp-zed": {
      "settings": {
        "isolated": true
      }
    }
  }
}

User Data Directory

By default, Chrome uses a persistent profile at:

For non-stable channels, the directory includes the channel name (e.g., chrome-profile-canary).

Set isolated: true to use a temporary profile that's automatically cleaned up.

Connecting to a Running Chrome Instance

To connect to an existing Chrome instance instead of launching a new one:

1. Start Chrome with remote debugging:

# Linux
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

# Windows
chrome.exe --remote-debugging-port=9222 --user-data-dir=%TEMP%\chrome-debug

2. Configure the extension:

{
  "context_servers": {
    "chrome-devtools-mcp-zed": {
      "settings": {
        "browser_url": "http://127.0.0.1:9222"
      }
    }
  }
}

Troubleshooting

Chrome doesn't launch

• Ensure Google Chrome is installed
• Check that Node.js v20+ is available
• Try setting executable_path to your Chrome binary location

Connection refused

• Verify Chrome is running with --remote-debugging-port=9222
• Ensure no firewall is blocking localhost connections

Linux: "Could not find DevToolsActivePort"

This occurs when using auto_connect due to a puppeteer bug with XDG_CONFIG_HOME. Solutions:

1. Set XDG_CONFIG_HOME (add to ~/.bashrc):

   export XDG_CONFIG_HOME="$HOME/.config"
   

2. Or use browser_url instead of auto_connect

Debug logging

Enable detailed logs:

{
  "context_servers": {
    "chrome-devtools-mcp-zed": {
      "settings": {
        "log_file": "/tmp/chrome-devtools-mcp.log"
      }
    }
  }
}

License

Apache-2.0 (same as upstream chrome-devtools-mcp)