browser-console-logger-mcp

1.0.4 • Public • Published

浏览器日志捕获工具 (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
  1. 启动服务器:
npm start
  1. 服务器启动成功后,在浏览器中访问:
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);})();
  1. 在任何网站上点击这个书签,即可注入日志捕获工具

方法三:使用测试页面

访问 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

Package Sidebar

Install

npm i browser-console-logger-mcp

Weekly Downloads

20

Version

1.0.4

License

MIT

Unpacked Size

51.6 kB

Total Files

9

Last publish

Collaborators

  • trevoryoung