AI导哈

浏览器控制台日志捕获工具

console-bridge是一款被动式浏览器控制台日志捕获工具，能够实时捕获所有标签页的日志，支持搜索错误并提供项目特定的调试技能，适用于AI辅助调试场景。

  • by vltansky
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 vltansky/console-mcp

使用说明

控制台桥

让您的AI助手访问浏览器控制台日志

从所有选项卡中捕获日志，搜索错误，并为您的AI配备特定于项目的调试技能。

快速开始 · 特性 · 工具 · 配置

为什么选择控制台桥？

1.🔌 被动&始终开启 无需启动特殊的浏览器实例或连接到特定的选项卡。控制台桥捕捉背景中的所有内容。

2.🧠 可教（项目技能） 在Markdown中定义自定义调试工作流。你的AI会读取它们来理解 如何 调试您的特定应用程序。

3.🔍 上下文高效 停止转储大量日志文件。仅搜索、过滤和获取相关行，以保存令牌并减少噪音。

控制台桥 浏览器自动化工具
捕获模式 被动、始终在线 按需、显式连接
标签覆盖率 同时显示所有选项卡 一次显示一个选项卡
日志存储器 10K TTL日志 无
搜索 正则表达式、关键字、时间范围 不支持
技能 自定义调试技能（.md） 通用页面访问
用例 调试 UI自动化

最适合： “我的应用程序出现错误，请帮助我调试”工作流。

快速开始

控制台桥需要两个组件：a 浏览器扩展 （捕获日志）和 MCP服务器 （存储/查询日志）。

1.安装MCP服务器

标准配置 （适用于大多数MCP客户端）：

{
  "mcpServers": {
    "console-bridge": {
      "command": "npx",
      "args": ["-y", "console-bridge-mcp@latest"]
    }
  }
}
Claude Code 
claude mcp add console-bridge -s user -- npx -y console-bridge-mcp@latest

或添加到 ~/.claude.json:

{
  "mcpServers": {
    "console-bridge": {
      "command": "npx",
      "args": ["-y", "console-bridge-mcp@latest"]
    }
  }
}
VS Code

添加到VS代码设置或使用CLI：

code --add-mcp '{"name":"console-bridge","command":"npx","args":["-y","console-bridge-mcp@latest"]}'
Windsurf

关注Windsurf MCP 文档.使用上面的标准配置。

Other clients

将标准配置添加到MCP配置文件中。看 MCP文件 以获取客户特定的说明。

2.安装浏览器扩展

  1. 下载 console-bridge-ext-v*.zip 从 最新版本
  2. 解压缩到永久位置（例如。， ~/.console-bridge-extension)
  3. 打开Chrome浏览器→ chrome://extensions
  4. 启用“开发人员模式”（在右上角切换）
  5. 点击“加载解包”→ 选择解压缩的文件夹
  6. 单击扩展图标→ 验证它是否显示“已连接”

3.验证安装

重新启动MCP客户端，然后尝试：

Show me recent console errors

如果你看到日志数据，你就准备好了！

特性

日志捕获和分析

日志从所有浏览器选项卡连续流式传输到MCP服务器。按级别、选项卡、URL模式或时间范围过滤。

Show error logs from the last 5 minutes
Show logs from localhost:3000
Tail logs from the current tab

强大的搜索功能

带有上下文行、and/OR逻辑和排除的正则表达式和关键字搜索。

Search for "failed" OR "error" excluding "expected"
Search for /api\/users\/\d+/ with 3 lines of context

智能选项卡建议

基于项目上下文（端口、域、URL模式）的AI辅助标签排名。

Suggest which tab is my Next.js app

会话范围界定

只关注当前导航中的日志，忽略上次页面刷新之前的过时日志。

Show errors from current session only

JS执行和DOM查询

在页面上下文中运行JavaScript或直接查询DOM元素。

Execute: window.featureFlags.enableDebug = true
Query DOM for '.error-message' elements

一键光标集成

点击 “在光标中打开” 在扩展弹出窗口中，立即打开Cursor，并显示上下文感知提示，以分析当前选项卡的日志。

🧠 项目技能（人工智能背景）

教你的AI助手如何调试 你的 具体项目。创建一个 .console-bridge/ 在项目根目录中添加Markdown文件和调试手册。

为什么要使用技能？

  • 即时机载AI： 定义一次复杂的调试流程，永远使用它们。
  • 分享知识： 提交您的调试指南，以便每个团队成员的AI助手都知道它们。
  • 上下文感知： AI会自动发现可用的技能。

例子： 创建 .console-bridge/auth-debug.md:

---
title: Debug Authentication Flow
description: Steps to diagnose login failures
---
1. Filter logs for "AuthService"
2. Check network requests to /api/login
3. Verify JWT token in local storage

用途：

List available debugging skills
Load the auth debugging skill

MCP工具

工具 目的
console_tabs 列出所有选项卡或根据项目上下文获取智能建议
console_logs 列出、获取单个日志或带过滤的尾部（级别、选项卡、URL、时间）
console_search 带有上下文行和排除项的正则表达式或关键字搜索
console_snapshot 快速总结最近的错误、警告和模式
console_browser_execute 在页面上下文中运行JavaScript
console_browser_query 通过CSS选择器查询DOM元素
console_skills_list 列出特定项目的调试手册
console_skills_load 加载特定的调试技能

配置

环境变量：

CONSOLE_MCP_PORT=9847              # WebSocket port
CONSOLE_MCP_DISCOVERY_PORT=9846    # HTTP discovery port
CONSOLE_MCP_MAX_LOGS=10000         # Max logs in memory
CONSOLE_MCP_LOG_TTL_MINUTES=60     # Auto-cleanup (0 = disable)

建筑

┌─────────────────┐     WebSocket      ┌─────────────────┐      stdio       ┌─────────────────┐
│                 │    (port 9847)     │                 │                  │                 │
│  Browser Ext.   │ ─────────────────▶ │   MCP Server    │ ◀──────────────▶ │  AI Assistant   │
│  (all tabs)     │    log batches     │  (stores/query) │    MCP protocol  │ (Cursor/Claude) │
│                 │                    │                 │                  │                 │
└─────────────────┘                    └─────────────────┘                  └─────────────────┘
        │                                      │
        │ captures console.*                   │ in-memory storage
        │ intercepts errors                    │ filtering engine
        │ sanitizes credentials                │ search engine
        │                                      │

数据流：

  1. 扩展内容脚本拦截 console.log/warn/error/debug
  2. 日志被批处理（50个日志/100ms）并通过WebSocket发送
  3. 服务器使用可配置的TTL将日志存储在内存中
  4. MCP工具按需查询和分析日志

发展

npm install && npm run build
npm run dev:server    # Hot reload server
npm run dev:extension # Hot reload extension
npm test              # Run tests

项目结构

packages/
├── server/          # MCP server + WebSocket receiver
├── extension/       # Chrome extension (content script + popup)
└── shared/          # Shared types and Zod schemas

许可证

麻省理工学院

相关 MCP