浏览器控制台日志捕获 MCP
MCP 服务配置
复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用
{
"mcpServers": {
"console-logger-mcp": {
"args": [
"console-logger-mcp"
],
"command": "npx"
}
}
}
SSE 传输配置
{
"mcpServers": {
"console-logger-mcp": {
"type": "sse",
"url": "http://127.0.0.1:3456/sse"
}
}
}
可用工具 (4 个)
该服务在 MCP 协议中暴露的工具,AI 可按需调用
get_logs 5 个参数
Get captured browser console logs, optionally filtered by tab, level, or search keyword
该工具无需必填参数,直接调用即可
get_tabs
Get all tabs that have captured logs
该工具无需必填参数,直接调用即可
clear_logs 1 个参数
Clear captured logs for a tab or all tabs
该工具无需必填参数,直接调用即可
get_log_stats
Get global log statistics
该工具无需必填参数,直接调用即可
服务介绍
Console Log Capture — 完整使用文档
版本 v1.0.0 | 最后更新:2026-07-07
浏览器控制台日志捕获插件 + ** 本地 MCP 服务器 **,用于实时捕获网页控制台输出(console.log / warn / error / info / debug 及未处理异常),支持按级别过滤、全文搜索、一键下载,并可对接 IDE 让 AI 直接读取日志上下文。
注意:该 MCP 需要配合 console-logger-extension 浏览器插件使用。
插件获取地址:https://gitee.com/yshunr/console-logger-mcp
插件目录:plugin/console-logger-extension
目录
1. 项目概览
| 组件 | 说明 |
|---|---|
| 🔌 Chrome 扩展 | Manifest V3,兼容 Chrome / Edge / Chromium 浏览器 |
| 🖥️ 本地 MCP 服务 | 零外部依赖,Node.js 内置 http 模块,开箱即用 |
| 🤖 AI 集成 | Qoder IDE 通过 MCP 协议读取日志,辅助调试 |
| 📥 文件下载 | 支持 TXT / JSON 格式,可自定义目录和自动下载 |
2. 功能特性
日志捕获
| 级别 | 来源 | 说明 |
|---|---|---|
LOG |
console.log() |
普通日志 |
WARN |
console.warn() |
警告 |
ERROR |
console.error() |
错误 |
INFO |
console.info() |
信息 |
DEBUG |
console.debug() |
调试 |
ERROR |
window.onerror |
未捕获的同步异常 |
ERROR |
unhandledrejection |
未处理的 Promise 拒绝 |
查看与筛选
- 弹窗中实时显示日志,自动滚动到底部
- 按级别过滤:全部 / Log / Warn / Error / Info / Debug
- 全文搜索:同时匹配日志内容和堆栈信息
- 用户上滚时暂停自动滚动,回到底部后恢复
- 增量渲染:只追加新条目,避免列表闪烁
- 工具栏 Badge 显示当前标签页日志数量
下载与导出
- TXT 格式:纯文本,包含时间戳、级别、来源 URL、堆栈
- JSON 格式:结构化数据,便于程序处理
- 自定义下载子目录(相对于浏览器下载文件夹)
- 自动下载:日志达到阈值时自动触发
- 文件命名规则:
页面标题_YYYYMMDD_HHMMSS.格式
状态持久化
- 捕获状态持久化到
chrome.storage.local - Service Worker 被杀死后自动恢复捕获
- 页面刷新 / 新标签页后自动恢复
- 所有标签页通过
storage.onChanged实时同步
Qoder IDE 集成
- 通过本地 MCP 服务器将日志送入 AI 上下文
- 自动推送:每 2 秒或累积 20 条自动批量推送
- 手动推送:弹窗一键发送当前标签页全部日志
- 失败重试:指数退避,最多 3 次,日志不丢失
- 连接状态实时显示(弹窗底部指示器)
3. 文件结构
浏览器扩展
console-logger-extension/
├── manifest.json # 扩展配置 (Manifest V3)
├── background.js # Service Worker — 状态管理、下载、MCP 推送
├── content.js # 内容脚本 — 桥接页面与扩展
├── inject.js # 注入脚本 — Hook console 方法、捕获异常
├── popup.html # 弹窗 UI
├── popup.css # 弹窗样式
├── popup.js # 弹窗逻辑 — 渲染、过滤、搜索、交互
├── options.html # 设置页 UI
├── options.css # 设置页样式
├── options.js # 设置页逻辑 — 配置读写、MCP 测试
├── generate_icons.py # 图标生成脚本(Python + Pillow)
└── icons/
├── icon16.png # 16x16 工具栏图标
├── icon48.png # 48x48 管理页图标
└── icon128.png # 128x128 商店图标
MCP 服务器(console-logger-mcp)
console-logger-mcp/
├── bin/
│ └── cli.js # npx 入口(stdio 模式启动)
├── server.js # HTTP 服务器入口(SSE + stdio 双模式)
├── mcp-handler.js # MCP 协议处理器(JSON-RPC)
├── log-store.js # 内存日志存储(自动清理、容量限制)
├── config.js # 服务器配置(端口、容量上限)
├── start.bat # 手动启动(带控制台窗口,用于调试)
├── start.sh # macOS / Linux 启动脚本
├── start-silent.vbs # 静默启动脚本(无黑窗口)
├── install.bat # 一键安装开机自启(推荐)
├── uninstall.bat # 一键卸载开机自启
├── status.bat # 查看服务运行状态
├── package.json # NPM 包元数据(含 bin 字段)
└── README.md # MCP 服务器说明(ModelScope 格式)
4. 安装指南
4.1 环境要求
| 组件 | 最低版本 | 说明 |
|---|---|---|
| Chrome / Edge | 88+ | 需支持 Manifest V3 |
| Node.js(仅 MCP) | 18.0+ | 仅对接 Qoder IDE 时需要 |
| 操作系统 | 任意 | Windows / macOS / Linux 均可 |
4.2 安装浏览器扩展
- 打开扩展管理页 — 在浏览器地址栏输入
chrome://extensions/并回车 - 开启开发者模式 — 页面右上角有「开发者模式」开关,打开它
- 加载扩展 — 点击左上角「加载已解压的扩展程序」,选择
console-logger-extension/文件夹 - 固定到工具栏(推荐) — 点击浏览器工具栏的拼图图标,将「Console Log Capture」钉到工具栏方便随时打开
- 验证安装 — 工具栏出现插件图标,点击后弹出控制面板,说明安装成功
提示: 如果修改了扩展代码,需要在
chrome://extensions/页面点击插件卡片上的「刷新」按钮重新加载。
4.3 安装 MCP 服务器(可选)
如果你需要对接 Qoder IDE,才需要安装 MCP 服务器。仅需系统已安装 Node.js 18+。
- 选择启动方式:
- 开机自启(推荐):双击
install.bat,以后开机自动启动,无需手动操作 - 手动启动:双击
start.bat,控制台输出[MCP] console-logger-mcp server running at http://127.0.0.1:3456即成功 - npx 启动:
npx console-logger-mcp
- 开机自启(推荐):双击
- 验证启动 — 双击
status.bat或在浏览器中访问http://127.0.0.1:3456/health
零依赖: MCP 服务器仅使用 Node.js 内置
http模块,无需npm install,解压即用。
开机自启详情: 详见 第 9.4 节 — 开机自启配置
5. 快速上手
5.1 三十秒快速使用(仅捕获 + 下载)
- 打开目标网页 — 在浏览器中打开你要调试的网站
- 点击工具栏图标 — 弹出控制面板,右上角有捕获开关
- 打开捕获开关 — 开关变为激活状态,Badge 显示日志计数
- 操作页面 — 刷新页面或触发交互,控制台日志实时出现在弹窗中
- 下载日志 — 点击底部「下载日志」按钮,文件保存到
下载/console-logs/目录
5.2 对接 Qoder IDE(完整流程)
- 启动 MCP 服务器 — 双击
console-logger-mcp/start.bat,保持窗口开启 - 配置扩展 — 点击弹窗右下角齿轮 → 勾选「启用 MCP 服务」→ 勾选「自动推送日志」→ 保存
- 配置 Qoder IDE — Qoder → 设置 → MCP → 添加
console-logger-mcpSSE 服务器配置(详见第 9 节) - 开始捕获 — 打开浏览器扩展捕获开关,操作目标网页
- 在 Qoder 中提问 — 在 Qoder 的 Agent / Ask 模式中描述问题,AI 会自动调用
get_logs工具获取日志上下文
6. 弹窗面板
点击工具栏图标后弹出的控制面板,是日常使用的主要界面。
6.1 界面区域
| 区域 | 功能 | 说明 |
|---|---|---|
| 顶部标题栏 | 捕获开关 + MCP 操作 | 右侧:捕获开关;开关左侧为「预览 MCP」和「发送到 MCP」图标按钮(仅 MCP 启用时显示) |
| 统计栏 | 日志总数 + 当前标签 | 显示当前标签页的日志数量和页面标题 |
| 过滤工具栏 | 级别过滤按钮 | 全部 / Log / Warn / Error / Info / Debug 六个按钮 |
| 搜索框 | 全文搜索 | 输入关键词,匹配日志内容和堆栈信息 |
| 日志列表 | 日志显示区 | 实时显示日志条目,支持自动滚动 |
| 底部操作栏 | 功能按钮 | 清空 / 下载日志 / 设置 |
| MCP 状态栏 | 连接指示器 | 仅 MCP 启用时显示,绿点=已连接,灰点=未连接 |
6.2 日志条目格式
每条日志显示为:
[HH:MM:SS] [LEVEL] 日志内容
↳ Stack: 堆栈信息(如有)
6.3 交互行为
- 自动刷新:捕获开启时,每 1.5 秒自动刷新日志列表
- 增量追加:无过滤时,新日志只追加到列表底部,不重建已有条目
- 智能滚动:用户上滚后暂停自动滚动,滚回底部 50px 内时恢复
- 过滤+搜索:点击级别按钮即时过滤;搜索框输入 200ms 后触发
- 最大渲染:弹窗中最多渲染 300 条日志(超出时移除最早的)
6.4 顶部 MCP 按钮(仅 MCP 启用时显示)
捕获开关左侧有两个无框图标按钮,用于快速操作 MCP:
| 按钮 | 图标 | 功能 |
|---|---|---|
| 预览 MCP | 眼睛 | 打开 MCP 服务器缓存日志预览面板 |
| 发送到 MCP | 纸飞机 | 一键推送当前标签页全部日志到 MCP 服务器(替换模式) |
这两个按钮只在设置页开启「启用 MCP 服务」后才会显示。鼠标悬停 1 秒会显示功能提示。
6.5 底部按钮
| 按钮 | 功能 | 条件 |
|---|---|---|
| 清空 | 清除当前标签页的所有日志 | — |
| 下载日志 | 按当前过滤/搜索条件导出文件 | — |
| 设置(齿轮) | 打开设置页 | — |
7. 设置页详解
点击弹窗底部的齿轮图标进入设置页,包含四个配置区域。
7.1 下载配置
| 选项 | 默认值 | 说明 |
|---|---|---|
| 下载目录 | console-logs |
日志文件保存的子目录,相对于浏览器下载文件夹。支持多级:logs/2024/debug |
| 文件格式 | TXT | TXT:纯文本,人类可读;JSON:结构化,程序可解析 |
7.2 日志内容
| 选项 | 默认值 | 说明 |
|---|---|---|
| 包含时间戳 | 开启 | 每条日志前显示精确到毫秒的时间(HH:MM:SS.mmm) |
| 包含堆栈跟踪 | 开启 | 捕获并导出错误堆栈信息 |
| 包含页面 URL | 开启 | 记录日志来源页面的 URL |
7.3 自动下载
| 选项 | 默认值 | 说明 |
|---|---|---|
| 启用自动下载 | 关闭 | 当日志数量达到阈值时自动触发下载 |
| 自动下载阈值 | 100 条 | 可设置 10~10000 条,达到后自动下载 |
7.4 MCP 服务集成(Qoder IDE)
| 选项 | 默认值 | 说明 |
|---|---|---|
| 启用 MCP 服务 | 关闭 | 开启后扩展会将日志推送到本地 MCP 服务器 |
| MCP 服务器地址 | http://127.0.0.1:3456 |
本地 MCP 服务器的 HTTP 地址 |
| 自动推送日志 | 关闭 | 实时自动推送(每 2 秒或累积 20 条) |
| 推送间隔 | 2000ms | 可设置 500~10000ms,步进 500ms |
| 测试连接 | — | 手动检测 MCP 服务器是否在线 |
设置保存: 修改配置后必须点击页面底部的「保存设置」按钮。切换标签页或关闭弹窗不会自动保存。
8. 日志下载
8.1 文件命名规则
{页面标题}_{日期}_{时间}.{格式}
示例:
我的网站_20260706_174020.txt
测试页面_20260706_174020.json
页面标题会进行安全处理:特殊字符替换为 _,截断为 50 字符。
8.2 TXT 格式示例
========================================
Console Log Capture Export
========================================
Source URL: https://example.com/demo
Tab Title: Demo Page
Exported: 2026-07-06T09:40:20.123Z
Total Logs: 3
========================================
[17:40:15.230] [ERROR] Something went wrong
↳ URL: https://example.com/demo
↳ Stack:
Error: Something went wrong
at handleClick (app.js:42:15)
at HTMLButtonElement.onclick (index.html:10:58)
[17:40:16.500] [LOG ] User clicked button
[17:40:17.100] [WARN ] Deprecated API usage
========================================
End of Log (3 entries)
========================================
8.3 JSON 格式示例
{
"exportedAt": "2026-07-06T09:40:20.123Z",
"source": "https://example.com/demo",
"tabTitle": "Demo Page",
"totalLogs": 3,
"logs": [
{
"timestamp": 1783105215230,
"level": "error",
"message": "Something went wrong",
"args": ["Something went wrong"],
"source": "error",
"url": "https://example.com/demo",
"stack": "Error: Something went wrong\n at handleClick (app.js:42:15)"
},
{
"timestamp": 1783105216500,
"level": "log",
"message": "User clicked button",
"args": ["User clicked button"],
"source": "console"
}
]
}
8.4 下载时的过滤
在弹窗中点击「下载日志」时,会按当前的过滤和搜索条件导出:
- 如果选了级别过滤(如 Error),只下载 Error 级别的日志
- 如果输入了搜索关键词,只下载匹配的日志
- 选择「全部」且搜索框为空时,下载所有日志
9. Qoder IDE 对接
9.1 整体架构
浏览器扩展 ──HTTP POST──▶ 本地 MCP 服务器 ──SSE──▶ Qoder IDE AI
background.js → http://127.0.0.1:3456/logs → LogStore → /sse + /message → AI 上下文
9.2 数据流
- 扩展捕获日志:
inject.jsHookconsole方法 →content.js→background.js - 推送到 MCP:
background.js通过fetch()POST 到http://127.0.0.1:3456/logs - MCP 存储:
log-store.js按标签页分类存储在内存中 - Qoder 查询:Qoder 通过 SSE 连接 MCP 服务器,调用 JSON-RPC 工具获取日志
- AI 分析:Qoder AI 将日志作为上下文,辅助调试和问题定位
9.3 配置步骤
第一步:启动 MCP 服务器
方式一:开机自启(推荐,只需操作一次)
# 双击运行,一键安装开机自启
console-logger-mcp/install.bat
运行后 MCP 服务器会注册为 Windows 计划任务,开机自动静默启动(无黑窗口),崩溃 60 秒后自动恢复。详见 9.4 节。
方式二:手动启动(临时使用 / 调试)
# Windows — 双击或命令行运行,会弹出控制台窗口
console-logger-mcp/start.bat
# macOS / Linux
cd console-logger-mcp && ./start.sh
# 或直接用 node
cd console-logger-mcp && node server.js
启动后看到以下输出即成功:
[MCP] console-logger-mcp server running at http://127.0.0.1:3456
[MCP] SSE endpoint: http://127.0.0.1:3456/sse
[MCP] Logs POST endpoint: http://127.0.0.1:3456/logs
[MCP] Press Ctrl+C to stop
第二步:配置浏览器扩展
- 点击弹窗底部的齿轮图标进入设置页
- 找到「MCP 服务集成(Qoder IDE)」区域
- 勾选「启用 MCP 服务」
- 保持服务器地址为
http://127.0.0.1:3456 - 勾选「自动推送日志」(推荐)
- 点击「测试连接」验证 → 显示绿色「连接成功」
- 点击「保存设置」
第三步:配置 Qoder IDE
- 打开 Qoder IDE
- 进入 设置 → MCP
- 添加以下 JSON 配置:
// 需要先在本地运行 npm run start
{
"mcpServers": {
"console-logger-mcp": {
"type": "sse",
"url": "http://127.0.0.1:3456/sse"
}
}
}
// mcp
{
"mcpServers": {
"console-logger-mcp": {
"command": "npx",
"args": ["console-logger-mcp"]
}
}
}
- 保存配置,Qoder 会自动连接
- 连接成功后,Qoder 会显示
get_logs、get_tabs、clear_logs、get_log_stats等可用工具
第四步:开始使用
- 在浏览器中打开目标网站
- 打开扩展捕获开关
- 操作页面,触发控制台日志
- 在 Qoder 的 Agent / Ask 模式中描述你的问题,AI 会自动调用工具获取日志
手动推送与缓存预览
- 手动推送:点击弹窗顶部标题栏的「发送到 MCP」图标按钮(开关左侧),会立即把当前标签页全部日志推送到 MCP 服务器。该操作会先清空 MCP 服务器上的所有缓存日志,再写入新日志,避免新旧日志叠加。
- 缓存预览:点击顶部标题栏的「预览 MCP」图标按钮可打开预览面板,查看当前 MCP 服务器中缓存了哪些日志,方便确认 AI 能获取到的上下文。点击面板顶部的刷新按钮可重新拉取。
- 自动推送:如果开启了自动推送,日志会以追加模式写入 MCP 服务器,与手动推送的替换模式不同。
示例提问: 「帮我看看当前浏览器控制台有什么错误日志,分析一下可能的原因」—— AI 会自动调用
get_logs获取 error 级别日志并分析。
9.4 开机自启配置(推荐)
安装 install.bat 后,MCP 服务器会在开机时自动静默启动,无需每次手动运行。这是最省心的方式。
一键安装
- 双击
console-logger-mcp/install.bat - 脚本会自动完成以下操作:
- 检测
start-silent.vbs和node.exe路径 - 创建 Windows 计划任务(名称:
ConsoleLoggerMCP) - 立即启动服务并验证
- 检测
- 看到「安装完成」提示即可
安装后效果
| 特性 | 说明 |
|---|---|
| 开机自启 | 登录 Windows 后自动启动,无需手动操作 |
| 静默运行 | 通过 VBS 脚本启动,不弹黑窗口、不闪控制台 |
| 崩溃恢复 | 服务异常退出后 60 秒自动重启(最多 999 次) |
| 端口冲突保护 | 启动前检测端口 3456 是否已占用,已运行则跳过 |
| Node 路径自适应 | 自动探测 WorkBuddy / mise / 系统安装的 Node.js |
管理脚本
| 脚本 | 功能 |
|---|---|
status.bat |
检查服务运行状态(HTTP 健康检查 + 计划任务状态 + node 进程) |
uninstall.bat |
卸载开机自启(删除计划任务 + 停止服务) |
start.bat |
手动启动(带控制台窗口,用于调试) |
install.bat |
重新安装 / 更新配置(先卸载旧任务再创建新的) |
技术原理
Windows 登录
└─ 计划任务触发 → wscript.exe start-silent.vbs
└─ VBS 脚本:
1. HTTP 健康检查 http://127.0.0.1:3456/health
2. 已运行 → 退出(避免端口冲突)
3. 未运行 → 探测 node.exe 路径 → 静默启动 server.js(WindowStyle=0)
安全说明: 计划任务以当前用户权限运行(非管理员),不触发 UAC 弹窗。VBS 脚本路径使用脚本自身目录,不依赖固定路径。
10. MCP 工具参考
工具列表
| 工具名 | 参数 | 功能 |
|---|---|---|
get_logs |
tabId? string — 标签页 IDlevel? enum — log/warn/error/info/debugsearch? string — 关键词limit? number — 返回上限offset? number — 分页偏移 |
获取捕获的日志,可按标签页、级别、关键词过滤。不传 tabId 则返回所有标签页的日志 |
get_tabs |
无 | 获取所有有日志的标签页列表(含 URL、标题、日志数) |
clear_logs |
tabId? string — 标签页 ID |
清除指定标签页或全部日志 |
get_log_stats |
无 | 获取全局统计:总日志数、标签页数、按级别分布 |
资源列表(Resources)
MCP 服务器还暴露了 Resource,Qoder 可以直接读取:
| URI | 类型 | 说明 |
|---|---|---|
console-logs://tabs |
JSON | 所有标签页列表 |
console-logs://tab/{tabId} |
text/plain | 指定标签页的全部日志(格式化文本) |
工具返回示例
get_logs 返回格式:
// Content 数组,包含两个 text 块:
[
{
"type": "text",
"text": "Tab: Demo Page\nURL: https://example.com\nTotal logs: 3\n---\n[2026-07-06T09:40:15.230Z] [ERROR] Something went wrong\nStack:\n Error: Something went wrong\n at handleClick (app.js:42:15)"
},
{
"type": "text",
"text": "{\n \"total\": 3,\n \"tabId\": \"123\"\n}"
}
]
get_log_stats 返回格式:
{
"totalLogs": 42,
"totalTabs": 2,
"byLevel": {
"error": 5,
"warn": 12,
"log": 20,
"info": 3,
"debug": 2
}
}
MCP 服务器端点
| 端点 | 方法 | 用途 |
|---|---|---|
/sse |
GET | SSE 连接(Qoder 使用) |
/message |
POST | JSON-RPC 请求(Qoder 使用) |
/logs |
POST | 浏览器扩展推送日志,支持 replace 模式替换全部缓存 |
/logs |
GET | 查询当前缓存的日志,?tabId=xxx 可指定标签页 |
/health |
GET | 健康检查 + 统计信息 |
存储容量
| 限制项 | 默认值 | 配置位置 |
|---|---|---|
| 单个标签页最大日志数 | 5,000 条 | config.js → maxLogsPerTab |
| 全局最大日志数 | 50,000 条 | config.js → maxLogsTotal |
| 空标签页自动清理 | 30 分钟 | config.js → maxTabAgeMs |
| 监听地址 | 127.0.0.1:3456 | config.js → host / port |
降级行为: MCP 服务器未运行时,扩展的捕获、查看、下载功能完全不受影响。推送失败时日志会放回队列,服务器恢复后自动重试。
11. 架构原理
11.1 日志捕获流程
页面上下文 (MAIN world) →postMessage→ content.js (隔离世界) →sendMessage→ background.js (SW) →存储/推送/下载→ popup.js / MCP
- content.js 在
document_start时注入每个页面,通过<script>标签将inject.js注入到页面上下文(MAIN world) - inject.js Hook 了
console.log/warn/error/info/debug、window.onerror、unhandledrejection - 被捕获的日志通过
window.postMessage传回 content.js(跨上下文通信) - content.js 通过
chrome.runtime.sendMessage将日志转发给 background.js - background.js 按标签页 ID 存储日志,更新 Badge,触发自动下载 / MCP 推送
- popup.js 从 background 获取日志并增量渲染到弹窗
11.2 状态持久化机制
Chrome MV3 的 Service Worker 会被浏览器自动杀死(约 30 秒不活动后)。为保证捕获状态不丢失:
captureActive持久化到chrome.storage.local- SW 重启后通过
stateReadyPromise 从 storage 恢复 - 所有消息处理等待
stateReady完成后再执行,避免竞态 content.js直接从 storage 读取状态(不依赖 SW 存活)chrome.storage.onChanged监听变化,实时同步到所有标签页的inject.js
11.3 MCP 推送机制
- 日志到达
background.js后,如果 MCP 自动推送开启,加入待推送队列 - 队列满 20 条或定时器到达(默认 2 秒)时,批量 POST 到
/logs(追加模式) - 推送失败时日志放回队列头部(最多保留 200 条),指数退避重试
- 手动推送按钮直接发送当前标签页全部日志,采用
replace=true模式:先清空 MCP 服务器缓存,再写入当前日志 background.js每 10 秒检测一次 MCP 服务器健康状态
12. 权限说明
| 权限 | 用途 | 必要性 |
|---|---|---|
downloads |
调用 chrome.downloads.download() 下载日志文件 |
必需 |
storage |
存储用户配置和捕获状态(持久化) | 必需 |
activeTab |
获取当前激活标签页的信息 | 必需 |
tabs |
读取标签页标题和 URL(用于文件命名和日志记录) | 必需 |
scripting |
注入脚本到页面 | 必需 |
<all_urls> |
在所有页面捕获控制台日志 | 必需 |
隐私声明: 所有日志数据存储在浏览器本地内存中,不上传到任何服务器。MCP 推送仅发送到
127.0.0.1本地地址,不离开你的电脑。
13. 故障排查
13.1 扩展相关
Q: 点击捕获开关后没有日志出现
- 确认开关已打开(滑块变蓝)
- 刷新目标页面 — inject.js 在
document_start注入,需要刷新才能 Hook 已存在的 console 调用 - 检查目标页面是否有 CSP(Content Security Policy)阻止脚本注入
- 查看
chrome://extensions/→ 扩展详情 → Service Worker 日志是否有错误
Q: Badge 数字不更新
- 切换到目标标签页再切回来 — Badge 在标签页激活时更新
- 关闭并重新打开弹窗
Q: 捕获开关自动关闭了
这是 Service Worker 被杀死导致的状态丢失。如果你使用的是最新版本,状态已持久化到 storage,不应该再出现此问题。如果仍出现,请确认:
- 扩展已更新到最新版本(
chrome://extensions/→ 刷新按钮) - 没有手动清除
chrome.storage.local
Q: 弹窗日志列表闪烁
最新版本已使用增量渲染 + 签名比对修复此问题。如果仍闪烁:
- 确认
popup.css中.log-entry没有animation: fadeIn - 确认
popup.js中有签名比对逻辑(lastSig)
Q: 下载失败 / 文件没有出现
- 检查浏览器下载栏是否有错误提示
- 确认设置页中的下载目录名称合法(无特殊字符)
- 检查浏览器是否阻止了自动下载(Chrome 设置 → 下载 → 「下载前询问保存位置」)
- 查看 Service Worker 日志是否有
chrome.downloads错误
13.2 MCP 相关
Q: Qoder 显示 MCP 未连接
- 确认 MCP 服务器窗口仍在运行(没有关闭)
- 确认 URL 为
http://127.0.0.1:3456/sse(注意/sse后缀) - 在浏览器中访问
http://127.0.0.1:3456/health,应返回 JSON - 检查端口 3456 是否被其他程序占用:
netstat -ano | findstr 3456(Windows)
Q: 弹窗显示「MCP 未连接」
- 确认设置页中已勾选「启用 MCP 服务」并保存
- 点击设置页中的「测试连接」按钮
- 确认 MCP 服务器地址正确(
http://127.0.0.1:3456) - 检查浏览器扩展是否有
host_permissions允许访问 localhost
Q: 日志没有到达 MCP 服务器
- 确认扩展捕获开关已开启
- 确认设置页中「自动推送日志」已勾选
- 访问
http://127.0.0.1:3456/health查看totalLogs是否增长 - 检查 Service Worker 日志是否有
fetch错误 - 如果自动推送未生效,尝试在弹窗中点击「发送到 MCP」手动推送
Q: Qoder AI 没有调用 get_logs 工具
- 确认 Qoder MCP 设置中已添加
console-logger-mcp服务器 - 在 Qoder 中明确提及日志:「请查看浏览器控制台日志」
- 确认 Qoder 处于 Agent / Ask 模式(非 Chat 模式)
- 检查 Qoder 是否有工具调用权限确认设置
13.3 修改端口
如果端口 3456 被占用,可以修改 MCP 服务器端口:
- 编辑
console-logger-mcp/config.js,修改port值 - 重启 MCP 服务器
- 更新浏览器扩展设置页中的 MCP 服务器地址(如
http://127.0.0.1:8080) - 更新 Qoder IDE MCP 配置中的 URL(如
http://127.0.0.1:8080/sse)
14. 常见问题
Q: 支持 Firefox 吗?
不支持。当前仅兼容基于 Chromium 的浏览器(Chrome / Edge / Brave 等),因为使用 Manifest V3 API。
Q: 捕获会影响页面性能吗?
影响极小。日志捕获在页面上下文中同步执行(Hook console 方法),单次调用耗时 <1ms。传输通过 postMessage 异步进行,不阻塞页面渲染。弹窗渲染使用增量更新,不会全量重建。
Q: 日志存储在哪里?
- 扩展内存:日志存储在 Service Worker 的内存中(
tabLogs对象),每标签页最多 5000 条。关闭标签页自动清理。 - MCP 服务器:推送后存储在 MCP 服务器的内存中(
LogStore),同样有容量限制。MCP 服务器关闭后日志丢失。 - 下载文件:下载到浏览器下载文件夹的子目录中,持久化保存。
Q: 可以捕获 iframe 内的日志吗?
可以。inject.js 会注入到同源的 iframe 中。跨域 iframe 由于安全策略限制,可能无法注入。
Q: 开启捕获后页面原有的 console 输出还在吗?
在。Hook 是在原始方法外包裹了一层,捕获后会继续调用原始 console 方法,不影响页面原有行为。
Q: MCP 服务器需要一直运行吗?
仅在使用 Qoder IDE 对接功能时需要。如果只用捕获 + 下载功能,无需启动 MCP 服务器。服务器关闭期间,扩展推送的日志会暂存在队列中(最多 200 条),服务器恢复后自动重试推送。
推荐做法: 运行一次 install.bat 安装开机自启,以后无需关心启动问题。详见 9.4 节。
Q: 可以同时对接多个 IDE 吗?
MCP 服务器支持多个 SSE 客户端同时连接。你可以同时在 Qoder 和其他支持 MCP 的 IDE 中配置同一地址。但浏览器扩展只能配置一个 MCP 服务器地址。
Q: 如何完全清除所有数据?
- 弹窗中点击「清空」→ 清除当前标签页日志
- 关闭所有标签页 → 自动清理对应日志
- 关闭并重新打开浏览器 → 所有内存日志清除
- 在
chrome://extensions/中移除扩展 → 清除所有存储数据
14. 配置项参考
14.1 扩展配置(chrome.storage.local)
{
"downloadDir": "console-logs",
"fileFormat": "txt",
"includeTimestamp": true,
"includeStackTrace": true,
"includeUrl": true,
"autoDownload": false,
"autoDownloadThreshold": 100,
"mcpEnabled": false,
"mcpServerUrl": "http://127.0.0.1:3456",
"mcpAutoPush": false,
"mcpPushInterval": 2000,
"captureActive": false
}
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
downloadDir |
string | console-logs |
下载子目录(相对下载文件夹) |
fileFormat |
string | txt |
txt 或 json |
includeTimestamp |
boolean | true |
包含时间戳 |
includeStackTrace |
boolean | true |
包含堆栈跟踪 |
includeUrl |
boolean | true |
包含页面 URL |
autoDownload |
boolean | false |
启用自动下载 |
autoDownloadThreshold |
number | 100 |
自动下载阈值(条) |
mcpEnabled |
boolean | false |
启用 MCP 服务 |
mcpServerUrl |
string | http://127.0.0.1:3456 |
MCP 服务器地址 |
mcpAutoPush |
boolean | false |
自动推送日志 |
mcpPushInterval |
number | 2000 |
推送间隔(ms) |
captureActive |
boolean | false |
捕获是否开启(持久化) |
14.2 MCP 服务器配置(config.js)
module.exports = {
host: "127.0.0.1", // 监听地址
port: 3456, // 监听端口
maxLogsPerTab: 5000, // 单标签页最大日志数
maxLogsTotal: 50000, // 全局最大日志数
maxTabAgeMs: 1800000, // 空标签页自动清理时间(30 分钟)
};
Console Log Capture v1.0.0 — 完整使用文档 | 最后更新:2026-07-07