Browser Debug MCP

浏览器调试MCP

MCP服务器，用于通过Claude远程接收和查询浏览器扩展调试日志。

设置

1. 部署到Netlify（连接此仓库）
2. 在Claude中添加MCP连接器： https://browser-debug-mcp.netlify.app/mcp
3. 将日志代码添加到您的Chrome扩展程序中（见下文）

添加到Chrome扩展程序

将此添加到扩展的内容脚本或背景脚本中：

// Debug logging - sends logs to MCP server for remote debugging
(function() {
  const LOG_ENDPOINT = 'https://browser-debug-mcp.netlify.app/logs';
  const EXTENSION_NAME = 'YourExtensionName'; // Change this
  const LOG_PREFIX = `[${EXTENSION_NAME}]`;
  
  const logBuffer = [];
  let flushTimeout = null;
  
  function sendLogs() {
    if (logBuffer.length === 0) return;
    const toSend = logBuffer.splice(0, logBuffer.length);
    fetch(LOG_ENDPOINT, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(toSend)
    }).catch(() => {}); // Silent fail
  }
  
  function queueLog(level, args) {
    const message = args.map(a => 
      typeof a === 'object' ? JSON.stringify(a) : String(a)
    ).join(' ');
    
    if (!message.includes(LOG_PREFIX)) return;
    
    logBuffer.push({
      timestamp: Date.now(),
      level,
      message,
      source: EXTENSION_NAME,
      url: window.location?.href
    });
    
    // Batch sends every 2 seconds
    if (!flushTimeout) {
      flushTimeout = setTimeout(() => {
        flushTimeout = null;
        sendLogs();
      }, 2000);
    }
  }
  
  // Intercept console methods
  const origLog = console.log;
  const origWarn = console.warn;
  const origError = console.error;
  
  console.log = (...args) => { origLog(...args); queueLog('info', args); };
  console.warn = (...args) => { origWarn(...args); queueLog('warn', args); };
  console.error = (...args) => { origError(...args); queueLog('error', args); };
  
  // Flush on page unload
  window.addEventListener('beforeunload', sendLogs);
})();

MCP工具

连接后，Claude可以使用这些工具：

get_logs

使用可选筛选器获取最近的调试日志。

get_logs(extension="AgentScraper", minutes=10, level="error")

参数：

• extension：按扩展名筛选（可选）
• minutes：获取最近N分钟的日志（默认值：30）
• level：按级别筛选-“全部”、“错误”、“警告”、“信息”（默认：全部）

clear_logs

清除所有存储的日志。

原理

┌─────────────────┐     POST /logs     ┌─────────────────────┐      MCP         ┌─────────┐
│ Chrome Extension│ ─────────────────▶ │ Netlify MCP Server  │ ◀─────────────── │ Claude  │
│                 │                    │ (Netlify Blobs)     │                  │         │
└─────────────────┘                    └─────────────────────┘                  └─────────┘

• 扩展将前缀控制台日志发送到 /logs 端点
• 日志存储在Netlify Blobs中，TTL为30分钟
• Claude通过MCP工具查询日志
• 最多保留1000条日志，自动清理旧条目