browser-devtools-mcp

通过 Chrome DevTools Protocol (CDP) 读取浏览器 DevTools 数据的 MCP Server。

支持 Chrome、Edge 及所有 Chromium 内核浏览器。

功能

• 列出浏览器所有标签页

• 读取控制台报错/警告

• 列出网络请求

• 读取网络请求的响应体（大响应存临时文件，提供摘要）

• 页面截图

• 读取 DOM 结构

• 读取计算后的 CSS 样式

• 在页面上下文执行 JavaScript

• 清理临时响应文件

Related MCP server: Chrome DevTools MCP

快速开始

1. 启动浏览器（带调试端口）

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

# Edge
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --remote-debugging-port=9222 --user-data-dir=/tmp/edge-debug

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

也可以使用项目自带的启动脚本（支持 Chrome 和 Edge）：

./launch-browser.sh chrome
./launch-browser.sh edge

2. 配置 MCP 客户端

在 kscc / Claude Code 的 ~/.claude/settings.json 或项目 .claude/settings.json 中添加：

{
  "mcpServers": {
    "browser-devtools": {
      "command": "npx",
      "args": ["-y", "browser-devtools-mcp"],
      "env": {
        "CDP_PORT": "9222"
      }
    }
  }
}

全局安装后可直接用：

{
  "mcpServers": {
    "browser-devtools": {
      "command": "browser-devtools-mcp",
      "env": {
        "CDP_PORT": "9222"
      }
    }
  }
}

3. 重启 MCP 客户端

配置项

工具列表

Chrome 扩展（可选）

扩展在 document_start 阶段捕获控制台错误，用于捕获 CDP 连接前就发生的报错。不装也能用所有核心功能。

安装方式：

1. 打开 chrome://extensions/

2. 开启开发者模式

3. 点击"加载已解压的扩展程序"

4. 选择本项目的 extension/ 目录

工作原理

所有数据实时从浏览器读取，不做任何缓存和存储：

• CDP HTTP 用于标签页列表（/json）

• CDP WebSocket 用于 Runtime 事件、Network 事件和命令调用

• Performance API（通过 Runtime.evaluate）用于获取 CDP 启动前的历史请求

• 临时文件 仅用于大响应——按需保存，用 clean_temp_files 清理

License

MIT