console-bridge Skill 技能

技能简介

console-bridge（GitHub: vltansky/console-bridge-mcp）是一款让 AI 编程助手直接读取浏览器控制台日志的 MCP 服务器。它由 Chrome 浏览器扩展与 Node.js MCP 服务两部分组成：扩展在后台静默捕获所有标签页的控制台输出，MCP 服务负责把这些日志暴露给 Claude Code、Cursor、VS Code、Windsurf 等支持 MCP 协议的 AI 客户端。与传统"启动浏览器、连一次、只看一个 tab"的浏览器自动化工具相比，console-bridge 走"被动、永远在线、覆盖所有标签页"的路线，让 AI 始终拥有真实、连续的浏览器调试上下文。

核心能力

1. 被动持续抓取：浏览器扩展在后台常驻，自动采集所有标签页的 console.log / warn / error，无需手动打开调试会话。
2. 全标签页覆盖：同时监控多个浏览器 tab，不局限于单页面调试，适合多页面 SPA / 微前端场景。
3. 10K 日志 + TTL 缓存：内置 10000 条带过期时间的环形缓存，按等级、标签页、URL 模式、时间范围灵活过滤，避免一次性灌爆上下文窗口。
4. 强大的搜索能力：支持正则、关键词、时间窗、AND/OR/排除逻辑，可带上下文行数抓取，节省 token。
5. 项目级可教学 Skills：在 .console-bridge/ 目录下放置 Markdown 调试 playbook，AI 助手会读取并按你的工作流排查问题。
6. 智能 Tab 推荐：根据端口、域名、URL 模式自动排序当前项目相关的标签页，减少歧义。
7. 会话范围控制：可只看本次导航产生的输出，自动忽略上次刷新前的旧日志。
8. 一键 Cursor 集成：浏览器扩展弹窗直接 "Open in Cursor"，带着上下文打开 IDE。

安装配置

1. MCP Server：在 IDE 的 mcpServers 配置中加入 {"command":"npx","args":["-y","console-bridge-mcp@latest"]}，或运行 claude mcp add console-bridge -s user -- npx -y console-bridge-mcp@latest。
2. 浏览器扩展：从 GitHub Releases 下载 console-bridge-ext-v*.zip，解压到永久目录（推荐 ~/.console-bridge-extension）。
3. 加载扩展：Chrome 进入 chrome://extensions，打开右上角"开发者模式"，点击"加载已解压的扩展程序"指向解压目录，确认图标显示 "Connected" 即完成。

使用步骤

1. 完成 MCP 服务与扩展安装后，重启 IDE（Claude Code / Cursor / VS Code）。
2. 在浏览器中正常浏览待调试的前端页面，扩展会自动开始记录日志。
3. 在 IDE 对话框输入"展示最近的 console 错误"或"搜索 localhost:3000 上 5 分钟内的报错"，AI 即可实时读取日志。
4. 在项目根目录创建 .console-bridge/，放入自定义的 Markdown 调试 playbook（例如"排查登录态失效的步骤"），下次提问时 AI 会按 playbook 排查。
5. 排查完成后可关闭扩展或停止 MCP 服务，缓存自动随 TTL 过期。

适用场景

1. 前端开发者在调试 SPA / 微前端应用时希望 AI 直接看到控制台报错。
2. 测试工程师需要复现偶发错误并让 AI 协助定位 race condition。
3. 维护大型 TypeScript / React 项目的团队希望为新成员提供统一的 AI 调试工作流。
4. 在 Cursor / Windsurf 中调试浏览器内嵌功能（如 Chrome 扩展、H5 页面、H5 活动页）。
5. AI Coding Agent 需要自动理解运行时错误以便修复代码时，作为闭环调试上下文。

适用人群

前端工程师、Web 全栈开发者、测试工程师、Chrome 扩展作者、QA 自动化工程师，以及任何希望把"浏览器控制台"纳入 AI 工作流的团队。

工作原理

console-bridge = 浏览器扩展 + MCP server。扩展通过 Chrome chrome.debugger / chrome.webRequest 等 API 监听每个 tab 的 console 输出，批量通过 WebSocket 推送到本地 MCP server；MCP server 接收后维护一个 10K 环形缓冲，并提供 show_logs / search_logs / execute_js 等 MCP tools。当用户在 Claude Code / Cursor 中询问"最近的错误"时，IDE 通过 stdio JSON-RPC 调用 MCP server，对应工具方法返回结构化日志与上下文。.console-bridge/ 目录里的 Markdown 文件会在每次会话开始时被读取，等同于把"团队经验"注入到 AI 助手。

官方链接

• GitHub 仓库：https://github.com/vltansky/console-bridge-mcp
• 掘金实战分享：https://juejin.cn/post/7691270105432784931
• MCP 协议规范：https://modelcontextprotocol.io/quickstart/user