浏览器日志捕获工具 (Browser Console Logger)

这是一个用于捕获和集中显示浏览器控制台日志的工具，可以帮助开发人员快速定位和排查浏览器中的错误信息。

功能特点

• 捕获浏览器控制台的所有日志类型（log、info、warn、error）
• 捕获未处理的JavaScript错误和Promise拒绝
• 监控网络请求并捕获网络错误
• 实时展示所有捕获的日志
• 提供搜索和过滤功能
• 支持通过书签注入方式在任何网站上使用
• 与Cursor MCP Browser Tools集成
• 支持通过npx直接运行

快速开始

使用npx直接运行

无需安装，直接通过npx运行：

npx browser-console-logger-mcp

带参数运行：

# 指定端口
npx browser-console-logger-mcp --port 8080

# 自动打开浏览器
npx browser-console-logger-mcp --open

# 以MCP模式启动（Cursor集成）
npx browser-console-logger-mcp --mcp

# 自动打开测试页面
npx browser-console-logger --test

本地安装和启动

1. 安装依赖：

npm install

2. 启动服务器：

npm start

3. 服务器启动成功后，在浏览器中访问：

http://localhost:3000

在Cursor中使用

方法一：通过Cursor命令使用

在Cursor中，可以使用以下命令：

1. 启动浏览器日志捕获工具：

   start-console-logger

2. 以MCP模式启动（支持工具函数）：

   capture-logs

方法二：使用MCP工具函数

在Cursor中，可以直接调用以下MCP工具函数：

• mcp_getConsoleLogs - 获取控制台日志
• mcp_getConsoleErrors - 获取控制台错误
• mcp_getNetworkErrors - 获取网络错误
• mcp_getNetworkLogs - 获取所有网络日志
• mcp_wipeLogs - 清除所有日志

在浏览器中使用

方法一：在自己的项目中引入

在您的HTML页面中添加以下代码：

<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script src="http://localhost:3000/client.js"></script>

方法二：使用书签注入到任何网站

1. 创建一个新的浏览器书签
2. 名称设置为：日志捕获
3. URL设置为以下代码（复制为一行）：

javascript:(function(){const script=document.createElement('script');script.src='http://localhost:3000/inject.js';document.head.appendChild(script);})();

4. 在任何网站上点击这个书签，即可注入日志捕获工具

方法三：使用测试页面

访问 http://localhost:3000/test.html 可以使用内置的测试页面，生成各种类型的日志和错误，以测试工具的功能。

日志查看界面

管理界面（http://localhost:3000）包含四个主要标签页：

1. 控制台日志：显示所有 console.log, console.info, console.warn 输出
2. 控制台错误：显示所有 console.error 输出和未捕获的JavaScript错误
3. 网络日志：显示所有网络请求和响应
4. 网络错误：显示所有失败的网络请求

全局安装

可以全局安装以便在任何项目中使用：

npm install -g browser-console-logger

安装后，在任何目录下使用：

console-logger

API接口

本工具提供以下REST API接口：

• GET /api/consoleLogs - 获取所有控制台日志
• GET /api/consoleErrors - 获取所有控制台错误
• GET /api/networkLogs - 获取所有网络日志
• GET /api/networkErrors - 获取所有网络错误
• POST /api/clearLogs - 清除所有日志

开发

项目结构

• server.js - 主服务器文件
• bin/console-logger.js - CLI入口文件
• mcp-browser-tools.js - Cursor MCP Browser Tools插件接口
• cursor.json - Cursor集成配置
• public/ - 静态资源目录
  • index.html - 管理界面
  • client.js - 客户端日志捕获脚本
  • test.html - 测试页面
  • inject.js - 书签注入脚本

许可证

MIT