AI导哈

Chrome开发工具集成扩展

一个集成Chrome DevTools MCP服务器的Zed扩展，为AI助手提供Chrome的自动化、调试和性能分析能力。

  • by gohryt
  • Rust
  • 本地部署
  • 26 星标
  • 更新于
在 GitHub 查看 gohryt/chrome-devtools-mcp-zed

使用说明

Zed版Chrome DevTools MCP

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

特性

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

先决条件

安装

来自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
      }
    }
  }
}

连接选项

设置 类型 描述
browser_url string 通过HTTP连接到正在运行的Chrome（例如。， "http://127.0.0.1:9222")
ws_endpoint string 通过WebSocket连接
ws_headers object WebSocket连接的自定义标头
auto_connect boolean 启用远程调试后自动连接到Chrome 145+

Chrome启动选项

设置 类型 描述
channel string Chrome频道： "stable", "beta", "dev", "canary"
headless boolean 在没有UI的情况下运行Chrome
isolated boolean 使用临时配置文件（关闭时已清理）
user_data_dir string 自定义配置文件目录路径
viewport string 初始视口大小（例如。， "1920x1080")
executable_path string 自定义Chrome可执行文件的路径
chrome_arg string[] 其他Chrome启动参数

其他选项

设置 类型 描述
proxy_server string 代理服务器配置
accept_insecure_certs boolean 忽略证书错误
log_file string 调试日志的路径
category_emulation boolean 启用/禁用仿真工具
category_performance boolean 启用/禁用性能工具
category_network boolean 启用/禁用网络工具
extra_args string[] 上游的其他CLI参数

示例配置

连接到现有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在以下位置使用持久配置文件：

平台 路径
Linux/macOS ~/.cache/chrome-devtools-mcp/chrome-profile
窗户 %USERPROFILE%\.cache\chrome-devtools-mcp\chrome-profile

对于非稳定频道。， 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"

  2. 或使用 browser_url 而不是 auto_connect

调试记录

启用详细日志：

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

许可证

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

相关 MCP