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"]
    }
  }
}

[](https://cursor.com/en/install-mcp?name=console-bridge&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsImNvbnNvbGUtYnJpZGdlLW1jcEBsYXRlc3QiXX0=)

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_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

______________________________________________________________________

许可证

麻省理工学院