内容
# DevTools MCP 日志记录器
Chrome 扩展程序 + MCP 服务器，捕获浏览器活动（网络请求、控制台输出、错误、DOM 变化、性能指标），**导出网络流量为 HAR**，并可选地通过模型上下文协议（MCP）将其公开给 AI 助手。
## 工作原理
```
┌─────────────────┐ HTTP (localhost:9223) ┌──────────────────┐ 标准输入/输出 ┌───────────────┐
│ Chrome 浏览器 │ ──────────────────────────▶ │ MCP 服务器 │ ◀──────────▶ │ VS Code / │
│ 扩展程序 │ POST /events │ （Node.js） │ MCP 协议 │ GitHub Copilot│
│ （调试器 API） │ POST /meta │ 内存存储 │ │ │
│ │ 删除页面关闭时 │ │ │ │
└─────────────────┘ └──────────────────┘ └───────────────┘
```
1. **Chrome 扩展程序** 使用 `chrome.debugger` API 附加到任意选项卡并捕获所有 CDP（Chrome DevTools 协议）事件
2. **事件被发送** 通过 HTTP 到运行在 9223 端口的本地 MCP 服务器
3. **MCP 服务器** 将所有内容存储在内存中，并将其公开为 MCP 工具/资源
4. **GitHub Copilot** （或任何 MCP 客户端）可以查询捕获的数据以了解页面行为和调试问题
5. **自动清理**：当您关闭被监视的页面时，所有会话数据都会自动清除
## 功能
### Chrome 扩展程序（v1.3.0）
- **三种记录模式** 每选项卡：
- **日志** — 控制台、错误、DOM、性能、源代码
- **网络** — 仅 HTTP 流量（HAR 就绪）
- **两者** — 日志 + 网络
- **暂停 / 恢复 / 停止** 在附加时（暂停保持调试器附加）
- 实时捕获：
- **网络请求** （URL、方法、状态代码、头部、时间、最多 256KB 的正文）
- **控制台输出** （日志、警告、错误、信息，带有堆栈跟踪）
- **JavaScript 错误** 和异常
- **DOM 变化**，性能指标，脚本源代码
- **导出捕获** 为 **HAR**、**Markdown（.md）** 或 **文本（.txt）** （离线/停止后可用）
- **MCP 端点配置** （⚙ 在弹出窗口中）：
- 自定义 URL（本地或远程）
- 身份验证：无、Bearer 令牌、基本身份验证或自定义头部
- 为非本地端点请求主机权限
- **记录指示器** — 红色 `REC` 徽章，黄色 `PAUS` 在暂停时
- **日志日记** 窗口，带有过滤器、搜索、复制和多格式导出
- MCP 服务器是可选的 — 本地记录/导出在没有它的情况下工作
### 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 服务器
```bash
cd mcp-server
npm install
```
### 2. 在 VS Code 中注册 MCP 服务器
MCP 服务器已经在 `~/.config/Code/User/mcp.json` 中配置。如果您需要手动添加：
```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/` 文件夹
5. **重新加载** 在拉取更新后
### 4. 快速启动（替代）
```bash
./launch.sh
```
这启动 MCP 服务器并启动 Chrome，预加载扩展程序。
## 用法
1. 可选地启动 MCP 服务器（`node mcp-server/server.js`）或在 ⚙ 下配置远程端点
2. 打开任意页面 → 点击扩展程序图标
3. 选择 **日志**、**网络** 或 **两者**
4. 浏览/交互 — 使用 **暂停** 保持或 **停止** detachment
5. **导出** 为 HAR / Markdown / 文本（也可在日志记录中获得）
6. 在 VS Code 中，如果服务器正在运行，请查询 `chrome-devtools` MCP
## 与 GitHub Copilot 配合使用
在 VS Code 聊天中，您现在可以询问类似的问题：
- “我的页面上发生了什么错误？”（Copilot 使用 `get_errors` 工具）
- “显示给我网络请求失败的情况”（Copilot 使用 `get_network_requests` 工具）
- “控制台输出是什么？”（Copilot 使用 `get_console_output` 工具）
## 许可证
MIT
