Chrome Devtools MCP Zed

Zed版Chrome DevTools MCP

Zed扩展集成了 Chrome 开发者工具 MCP 服务器，让您的AI助手访问Chrome的自动化、调试和性能分析功能。

特性

• 零配置 --Chrome会在需要时自动启动
• 完全访问DevTools --网络检查、控制台日志、屏幕截图、性能跟踪
• 浏览器自动化 --导航、单击、填写表单、处理对话框
• 所有上游工具 --从chrome devtools MCP直接访问26+MCP工具

先决条件

• 泽德 编辑
• v20或更新版本
• 谷歌浏览器 （稳定通道）

安装

来自Zed扩展（发布时）

1. 打开Zed→ 扩展
2. 搜索“Chrome DevTools MCP”
3. 单击安装

开发安装

1. 克隆此存储库
2. Zed：扩展→ 安装开发扩展
3. 选择 chrome-devtools-mcp-zed 目录

用法

无需配置。自动扩展：

1. 安装/更新 chrome-devtools-mcp npm包
2. 当工具需要时启动Chrome
3. 在以下位置管理持久浏览器配置文件 ~/.cache/chrome-devtools-mcp/chrome-profile

示例提示

Take a screenshot of https://example.com

Check the performance of https://zed.dev

List all network requests on the current page

配置（可选）

为高级用例向Zed配置添加设置：

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

连接选项

Chrome启动选项

其他选项

示例配置

连接到现有Chrome实例：

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

带自定义视口的无头Chrome浏览器：

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

临时隔离配置文件：

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

用户数据目录

默认情况下，Chrome在以下位置使用持久配置文件：

对于非稳定频道。， chrome-profile-canary).

集 isolated: true 使用自动清理的临时配置文件。

连接到正在运行的Chrome实例

要连接到现有的Chrome实例而不是启动新的实例，请执行以下操作：

1.通过远程调试启动Chrome：

# 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.配置扩展：

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

故障排除

Chrome无法启动

• 确保已安装Google Chrome浏览器
• 检查Node.js v20+是否可用
• 尝试设置 executable_path 到您的Chrome二进制文件位置

连接被拒绝

• 验证Chrome是否正在运行 --remote-debugging-port=9222
• 确保没有防火墙阻止本地主机连接

Linux:“找不到DevToolsActivePort”

使用时会发生这种情况 auto_connect 由于木偶师的错误 XDG_CONFIG_HOME.解决方案：

1. 设置XDG_CONFIG_HOME （添加到 ~/.bashrc):

   export XDG_CONFIG_HOME="$HOME/.config"

1. 或使用 browser_url 而不是 auto_connect

调试记录

启用详细日志：

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

许可证

Apache-2.0（与上游chrome开发工具mcp相同）