Chromium Debugging To MCP

DevTools MCP记录器

Chrome扩展+MCP服务器，捕获所有浏览器活动（网络请求、控制台输出、错误、DOM突变、性能指标）并将其暴露给 GitHub Copilot 通过模型上下文协议（MCP）。

运作原理

┌─────────────────┐     HTTP (localhost:9223)    ┌──────────────────┐     stdio     ┌───────────────┐
│  Chrome Browser  │ ──────────────────────────▶  │  MCP Server      │ ◀──────────▶  │  VS Code /    │
│  Extension       │   POST /events               │  (Node.js)       │   MCP proto   │  GitHub Copilot│
│  (debugger API)  │   POST /meta                 │  In-memory store │               │               │
│                  │   DELETE on page close        │                  │               │               │
└─────────────────┘                               └──────────────────┘               └───────────────┘

1. Chrome 扩展 用途 chrome.debugger API可连接到任何选项卡并捕获所有CDP（Chrome DevTools协议）事件
2. 事件已发送 通过HTTP连接到端口9223上运行的本地MCP服务器
3. MCP 服务器 将所有内容存储在内存中，并将其作为MCP工具/资源公开
4. GitHub Copilot （或任何MCP客户端）可以查询捕获的数据，以了解页面行为和调试问题
5. 自动清理：关闭受监视的页面时，所有会话数据都会自动清除

特性

Chrome 扩展

• 每个选项卡一键激活（单击扩展图标→ 激活
• 实时捕捉：

- 网络请求 （URL、方法、状态代码、标题、计时） - 控制台输出 （日志、警告、错误、带有堆栈跟踪的信息） - JavaScript错误 &例外情况 - DOM突变 （节点插入、删除、属性更改） - 性能指标 （页面加载、DOMContentLoaded等） - 脚本源 由浏览器解析

• 记录指示器 （红色“REC”徽章）在活动选项卡上
• 日志日志日志 窗口带有：

- 类别过滤（错误、网络、控制台、DOM、性能、源代码） - 在所有日志中进行文本搜索 - 全部复制为文本或JSON - 按条目复制按钮 - 自动滚动，手动超控

• 页面关闭或停用时自动清理

MCP 服务器

• 公开GitHub Copilot的工具：

- get_active_sessions -列出所有受监视的选项卡 - get_all_logs -获取所有捕获的数据 - get_session_logs -使用类别筛选器获取特定选项卡的日志 - get_errors -仅获取错误/异常 - get_network_requests -获取网络活动 - get_console_output -获取控制台消息 - clear_session / clear_all_sessions -手动清理

• 公开资源：

- chrome-devtools://overview -会话概述 - chrome-devtools://logs -所有日志 - chrome-devtools://errors -所有错误

安装

1.安装MCP服务器

cd mcp-server
npm install

2.在VS代码中注册MCP服务器

MCP服务器已在中配置 ~/.config/Code/User/mcp.json。如果需要手动添加：

{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/ChromiumDebuggingToMCP/mcp-server/server.js"]
    }
  }
}

3.加载Chrome扩展程序

1. 打开Chrome浏览器并导航到 chrome://extensions
2. 启用“开发人员模式”（在右上角切换）
3. 点击“加载解包”
4. 选择 chrome-extension/ 此项目中的文件夹

4.快速启动（替代）

./launch.sh

这将启动MCP服务器，并启动预装了扩展程序的Chrome。

用法

1. 启动MCP服务器：当GitHub Copilot通过VS Code连接到它时，它会自动启动
2. 导航到任何页面 在Chrome浏览器中
3. 单击扩展图标 在工具栏中
4. 点击“激活” 开始录制
5. 与页面交互 -所有活动都被捕获
6. 在VS代码中，打开GitHub Copilot Chat并从添加上下文 chrome-devtools 主控程序
7. 询问副驾驶 关于错误、网络问题或页面行为-它有完整的上下文！
8. 点击“停用” 或关闭选项卡以停止并清理

与GitHub Copilot一起使用

在VS Code聊天中，您现在可以问以下问题：

• “我的页面上发生了什么错误？”（Copilot使用 get_errors 工具）
• “显示失败的网络请求”（Copilot使用 get_network_requests)
• “控制台输出是什么？”（Copilot使用 get_console_output)

许可证

麻省理工学院