浏览器控制台日志捕获 MCP

yshunr/console-logger
0 Stars 28 次浏览 更新于 2026-08-23

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. 项目概览
  2. 功能特性
  3. 文件结构
  4. 安装指南
  5. 快速上手
  6. 弹窗面板
  7. 设置页详解
  8. 日志下载
  9. Qoder IDE 对接
  10. MCP 工具参考
  11. 架构原理
  12. 权限说明
  13. 故障排查
  14. 常见问题
  15. 配置项参考

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 安装浏览器扩展

  1. 打开扩展管理页 — 在浏览器地址栏输入 chrome://extensions/ 并回车
  2. 开启开发者模式 — 页面右上角有「开发者模式」开关,打开它
  3. 加载扩展 — 点击左上角「加载已解压的扩展程序」,选择 console-logger-extension/ 文件夹
  4. 固定到工具栏(推荐) — 点击浏览器工具栏的拼图图标,将「Console Log Capture」钉到工具栏方便随时打开
  5. 验证安装 — 工具栏出现插件图标,点击后弹出控制面板,说明安装成功

提示: 如果修改了扩展代码,需要在 chrome://extensions/ 页面点击插件卡片上的「刷新」按钮重新加载。

4.3 安装 MCP 服务器(可选)

如果你需要对接 Qoder IDE,才需要安装 MCP 服务器。仅需系统已安装 Node.js 18+。

  1. 选择启动方式
    • 开机自启(推荐):双击 install.bat,以后开机自动启动,无需手动操作
    • 手动启动:双击 start.bat,控制台输出 [MCP] console-logger-mcp server running at http://127.0.0.1:3456 即成功
    • npx 启动npx console-logger-mcp
  2. 验证启动 — 双击 status.bat 或在浏览器中访问 http://127.0.0.1:3456/health

零依赖: MCP 服务器仅使用 Node.js 内置 http 模块,无需 npm install,解压即用。
开机自启详情: 详见 第 9.4 节 — 开机自启配置


5. 快速上手

5.1 三十秒快速使用(仅捕获 + 下载)

  1. 打开目标网页 — 在浏览器中打开你要调试的网站
  2. 点击工具栏图标 — 弹出控制面板,右上角有捕获开关
  3. 打开捕获开关 — 开关变为激活状态,Badge 显示日志计数
  4. 操作页面 — 刷新页面或触发交互,控制台日志实时出现在弹窗中
  5. 下载日志 — 点击底部「下载日志」按钮,文件保存到 下载/console-logs/ 目录

5.2 对接 Qoder IDE(完整流程)

  1. 启动 MCP 服务器 — 双击 console-logger-mcp/start.bat,保持窗口开启
  2. 配置扩展 — 点击弹窗右下角齿轮 → 勾选「启用 MCP 服务」→ 勾选「自动推送日志」→ 保存
  3. 配置 Qoder IDE — Qoder → 设置 → MCP → 添加 console-logger-mcp SSE 服务器配置(详见第 9 节)
  4. 开始捕获 — 打开浏览器扩展捕获开关,操作目标网页
  5. 在 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 数据流

  1. 扩展捕获日志inject.js Hook console 方法 → content.jsbackground.js
  2. 推送到 MCPbackground.js 通过 fetch() POST 到 http://127.0.0.1:3456/logs
  3. MCP 存储log-store.js 按标签页分类存储在内存中
  4. Qoder 查询:Qoder 通过 SSE 连接 MCP 服务器,调用 JSON-RPC 工具获取日志
  5. 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

第二步:配置浏览器扩展

  1. 点击弹窗底部的齿轮图标进入设置页
  2. 找到「MCP 服务集成(Qoder IDE)」区域
  3. 勾选「启用 MCP 服务」
  4. 保持服务器地址为 http://127.0.0.1:3456
  5. 勾选「自动推送日志」(推荐)
  6. 点击「测试连接」验证 → 显示绿色「连接成功」
  7. 点击「保存设置」

第三步:配置 Qoder IDE

  1. 打开 Qoder IDE
  2. 进入 设置 → MCP
  3. 添加以下 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"]
    }
  }
}

  1. 保存配置,Qoder 会自动连接
  2. 连接成功后,Qoder 会显示 get_logsget_tabsclear_logsget_log_stats 等可用工具

第四步:开始使用

  1. 在浏览器中打开目标网站
  2. 打开扩展捕获开关
  3. 操作页面,触发控制台日志
  4. 在 Qoder 的 Agent / Ask 模式中描述你的问题,AI 会自动调用工具获取日志

手动推送与缓存预览

  • 手动推送:点击弹窗顶部标题栏的「发送到 MCP」图标按钮(开关左侧),会立即把当前标签页全部日志推送到 MCP 服务器。该操作会先清空 MCP 服务器上的所有缓存日志,再写入新日志,避免新旧日志叠加。
  • 缓存预览:点击顶部标题栏的「预览 MCP」图标按钮可打开预览面板,查看当前 MCP 服务器中缓存了哪些日志,方便确认 AI 能获取到的上下文。点击面板顶部的刷新按钮可重新拉取。
  • 自动推送:如果开启了自动推送,日志会以追加模式写入 MCP 服务器,与手动推送的替换模式不同。

示例提问: 「帮我看看当前浏览器控制台有什么错误日志,分析一下可能的原因」—— AI 会自动调用 get_logs 获取 error 级别日志并分析。

9.4 开机自启配置(推荐)

安装 install.bat 后,MCP 服务器会在开机时自动静默启动,无需每次手动运行。这是最省心的方式。

一键安装

  1. 双击 console-logger-mcp/install.bat
  2. 脚本会自动完成以下操作:
    • 检测 start-silent.vbsnode.exe 路径
    • 创建 Windows 计划任务(名称:ConsoleLoggerMCP
    • 立即启动服务并验证
  3. 看到「安装完成」提示即可

安装后效果

特性 说明
开机自启 登录 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
  1. content.jsdocument_start 时注入每个页面,通过 <script> 标签将 inject.js 注入到页面上下文(MAIN world)
  2. inject.js Hook 了 console.log/warn/error/info/debugwindow.onerrorunhandledrejection
  3. 被捕获的日志通过 window.postMessage 传回 content.js(跨上下文通信)
  4. content.js 通过 chrome.runtime.sendMessage 将日志转发给 background.js
  5. background.js 按标签页 ID 存储日志,更新 Badge,触发自动下载 / MCP 推送
  6. popup.js 从 background 获取日志并增量渲染到弹窗

11.2 状态持久化机制

Chrome MV3 的 Service Worker 会被浏览器自动杀死(约 30 秒不活动后)。为保证捕获状态不丢失:

  • captureActive 持久化到 chrome.storage.local
  • SW 重启后通过 stateReady Promise 从 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: 点击捕获开关后没有日志出现

  1. 确认开关已打开(滑块变蓝)
  2. 刷新目标页面 — inject.js 在 document_start 注入,需要刷新才能 Hook 已存在的 console 调用
  3. 检查目标页面是否有 CSP(Content Security Policy)阻止脚本注入
  4. 查看 chrome://extensions/ → 扩展详情 → Service Worker 日志是否有错误

Q: Badge 数字不更新

  1. 切换到目标标签页再切回来 — Badge 在标签页激活时更新
  2. 关闭并重新打开弹窗

Q: 捕获开关自动关闭了

这是 Service Worker 被杀死导致的状态丢失。如果你使用的是最新版本,状态已持久化到 storage,不应该再出现此问题。如果仍出现,请确认:

  1. 扩展已更新到最新版本(chrome://extensions/ → 刷新按钮)
  2. 没有手动清除 chrome.storage.local

Q: 弹窗日志列表闪烁

最新版本已使用增量渲染 + 签名比对修复此问题。如果仍闪烁:

  1. 确认 popup.css.log-entry 没有 animation: fadeIn
  2. 确认 popup.js 中有签名比对逻辑(lastSig

Q: 下载失败 / 文件没有出现

  1. 检查浏览器下载栏是否有错误提示
  2. 确认设置页中的下载目录名称合法(无特殊字符)
  3. 检查浏览器是否阻止了自动下载(Chrome 设置 → 下载 → 「下载前询问保存位置」)
  4. 查看 Service Worker 日志是否有 chrome.downloads 错误

13.2 MCP 相关

Q: Qoder 显示 MCP 未连接

  1. 确认 MCP 服务器窗口仍在运行(没有关闭)
  2. 确认 URL 为 http://127.0.0.1:3456/sse(注意 /sse 后缀)
  3. 在浏览器中访问 http://127.0.0.1:3456/health,应返回 JSON
  4. 检查端口 3456 是否被其他程序占用:netstat -ano | findstr 3456(Windows)

Q: 弹窗显示「MCP 未连接」

  1. 确认设置页中已勾选「启用 MCP 服务」并保存
  2. 点击设置页中的「测试连接」按钮
  3. 确认 MCP 服务器地址正确(http://127.0.0.1:3456
  4. 检查浏览器扩展是否有 host_permissions 允许访问 localhost

Q: 日志没有到达 MCP 服务器

  1. 确认扩展捕获开关已开启
  2. 确认设置页中「自动推送日志」已勾选
  3. 访问 http://127.0.0.1:3456/health 查看 totalLogs 是否增长
  4. 检查 Service Worker 日志是否有 fetch 错误
  5. 如果自动推送未生效,尝试在弹窗中点击「发送到 MCP」手动推送

Q: Qoder AI 没有调用 get_logs 工具

  1. 确认 Qoder MCP 设置中已添加 console-logger-mcp 服务器
  2. 在 Qoder 中明确提及日志:「请查看浏览器控制台日志」
  3. 确认 Qoder 处于 Agent / Ask 模式(非 Chat 模式)
  4. 检查 Qoder 是否有工具调用权限确认设置

13.3 修改端口

如果端口 3456 被占用,可以修改 MCP 服务器端口:

  1. 编辑 console-logger-mcp/config.js,修改 port
  2. 重启 MCP 服务器
  3. 更新浏览器扩展设置页中的 MCP 服务器地址(如 http://127.0.0.1:8080
  4. 更新 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: 如何完全清除所有数据?

  1. 弹窗中点击「清空」→ 清除当前标签页日志
  2. 关闭所有标签页 → 自动清理对应日志
  3. 关闭并重新打开浏览器 → 所有内存日志清除
  4. 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 txtjson
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

相关 MCP 服务