控制台桥
让您的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.安装浏览器扩展
- 下载
console-bridge-ext-v*.zip从 最新版本 - 解压缩到永久位置（例如。，
~/.console-bridge-extension) - 打开Chrome浏览器→
chrome://extensions - 启用“开发人员模式”（在右上角切换）
- 点击“加载解包”→ 选择解压缩的文件夹
- 单击扩展图标→ 验证它是否显示“已连接”
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 onlyJS执行和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
│ │数据流：
- 扩展内容脚本拦截
console.log/warn/error/debug - 日志被批处理（50个日志/100ms）并通过WebSocket发送
- 服务器使用可配置的TTL将日志存储在内存中
- 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______________________________________________________________________
许可证
麻省理工学院