这是一个用于捕获和集中显示浏览器控制台日志的工具,可以帮助开发人员快速定位和排查浏览器中的错误信息。
- 捕获浏览器控制台的所有日志类型(log、info、warn、error)
- 捕获未处理的JavaScript错误和Promise拒绝
- 监控网络请求并捕获网络错误
- 实时展示所有捕获的日志
- 提供搜索和过滤功能
- 支持通过书签注入方式在任何网站上使用
- 与Cursor MCP Browser Tools集成
- 支持通过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
- 安装依赖:
npm install
- 启动服务器:
npm start
- 服务器启动成功后,在浏览器中访问:
http://localhost:3000
在Cursor中,可以使用以下命令:
-
启动浏览器日志捕获工具:
start-console-logger
-
以MCP模式启动(支持工具函数):
capture-logs
在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>
- 创建一个新的浏览器书签
- 名称设置为:
日志捕获
- URL设置为以下代码(复制为一行):
javascript:(function(){const script=document.createElement('script');script.src='http://localhost:3000/inject.js';document.head.appendChild(script);})();
- 在任何网站上点击这个书签,即可注入日志捕获工具
访问 http://localhost:3000/test.html
可以使用内置的测试页面,生成各种类型的日志和错误,以测试工具的功能。
管理界面(http://localhost:3000
)包含四个主要标签页:
- 控制台日志:显示所有 console.log, console.info, console.warn 输出
- 控制台错误:显示所有 console.error 输出和未捕获的JavaScript错误
- 网络日志:显示所有网络请求和响应
- 网络错误:显示所有失败的网络请求
可以全局安装以便在任何项目中使用:
npm install -g browser-console-logger
安装后,在任何目录下使用:
console-logger
本工具提供以下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