vite-plugin-log-saver

English | 中文

English

A Vite plugin that captures browser console logs and saves them to local files with a beautiful floating UI.

Features

• 🎯 Zero Intrusion: Automatically intercepts console methods without modifying your code
• 🎨 Beautiful UI: Floating ball with expandable panel
• 💾 Auto Save: Automatically saves logs when threshold is reached
• 📦 Download Logs: Download logs directly from the browser
• 🔍 Stack Trace: Optional stack trace display for debugging
• 📱 Touch Support: Works on mobile devices
• 🎭 Draggable: Drag the floating ball or panel anywhere

Installation

npm install vite-plugin-log-saver -D
# or
pnpm add vite-plugin-log-saver -D
# or
yarn add vite-plugin-log-saver -D

Usage

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite';
import { logSaverPlugin } from 'vite-plugin-log-saver';

export default defineConfig({
  plugins: [
    logSaverPlugin({
      enabled: true,
      injectUI: true,
      devOnly: true,
      autoSaveThreshold: 50,
    }),
  ],
});

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | enabled | boolean | true | Enable/disable the plugin | | injectUI | boolean | true | Inject the UI component | | devOnly | boolean | true | Only enable in development mode | | devMode | string | 'development' | Development mode name | | autoSaveThreshold | number | 50 | Auto-save when log count reaches this value (0 to disable) | | apiPath | string | '/api/save-logs' | API endpoint for saving logs |

UI Features

Floating Ball

• Click the gear icon to expand the panel
• Drag to move anywhere on the screen
• Badge shows current log count
• Auto-snaps to screen edge

Expanded Panel

• Stack Trace Toggle: Show/hide call stack information
• Save Logs: Save logs to server (creates files in logs/ directory)
• Download Logs: Download logs as a text file
• Clear Logs: Clear all captured logs
• Collapse Button: Return to floating ball mode

Log Format

Saved logs include:

• Timestamp
• Log level (LOG, INFO, WARN, ERROR, DEBUG)
• Message content
• Call location (file and line number)

Example:

================================================================================
Browser Console Logs - 2024-01-31T10:00:00.000Z
================================================================================

[10:00:00.123] LOG   Hello World
  Location: App.vue:42:15

[10:00:01.456] ERROR Error occurred
  Location: utils.ts:10:8

License

MIT

中文

一个 Vite 插件，可以捕获浏览器控制台日志并保存到本地文件，带有精美的悬浮 UI。

特性

• 🎯 零侵入: 自动拦截 console 方法，无需修改代码
• 🎨 精美 UI: 悬浮球和可展开面板
• 💾 自动保存: 达到阈值时自动保存日志
• 📦 下载日志: 直接从浏览器下载日志
• 🔍 堆栈追踪: 可选的堆栈信息显示，方便调试
• 📱 触摸支持: 支持移动设备
• 🎭 可拖动: 可以拖动悬浮球或面板到任意位置

安装

npm install vite-plugin-log-saver -D
# 或
pnpm add vite-plugin-log-saver -D
# 或
yarn add vite-plugin-log-saver -D

使用

在 vite.config.ts 中添加插件：

import { defineConfig } from 'vite';
import { logSaverPlugin } from 'vite-plugin-log-saver';

export default defineConfig({
  plugins: [
    logSaverPlugin({
      enabled: true,        // 启用插件
      injectUI: true,       // 注入 UI 组件
      devOnly: true,        // 仅在开发环境启用
      autoSaveThreshold: 50, // 自动保存阈值
    }),
  ],
});

配置选项

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | enabled | boolean | true | 启用/禁用插件 | | injectUI | boolean | true | 是否注入 UI 组件 | | devOnly | boolean | true | 仅在开发模式下启用 | | devMode | string | 'development' | 开发模式名称 | | autoSaveThreshold | number | 50 | 日志数量达到此值时自动保存（0 表示禁用） | | apiPath | string | '/api/save-logs' | 保存日志的 API 端点 |

UI 功能

悬浮球

• 点击齿轮图标展开面板
• 拖动可移动到屏幕任意位置
• 徽章显示当前日志数量
• 自动贴边

展开面板

• 堆栈信息开关: 显示/隐藏调用堆栈信息
• 保存日志: 保存日志到服务器（在 logs/ 目录创建文件）
• 下载日志: 下载日志为文本文件
• 清空日志: 清空所有捕获的日志
• 收起按钮: 返回悬浮球模式

日志格式

保存的日志包含：

• 时间戳
• 日志级别（LOG、INFO、WARN、ERROR、DEBUG）
• 消息内容
• 调用位置（文件和行号）

示例：

================================================================================
浏览器控制台日志 - 2024-01-31T10:00:00.000Z
================================================================================

[10:00:00.123] LOG   你好世界
  调用位置: App.vue:42:15

[10:00:01.456] ERROR 发生错误
  调用位置: utils.ts:10:8

高级配置

自定义开发模式名称

如果你的项目使用自定义的开发模式名称（例如 dev），可以这样配置：

export default defineConfig({
  plugins: [
    logSaverPlugin({
      devMode: 'dev', // 自定义模式名称
    }),
  ],
});

禁用自动保存

如果你只想手动保存日志：

export default defineConfig({
  plugins: [
    logSaverPlugin({
      autoSaveThreshold: 0, // 禁用自动保存
    }),
  ],
});

仅启用 API，不显示 UI

如果你想通过代码控制日志保存，而不显示 UI：

export default defineConfig({
  plugins: [
    logSaverPlugin({
      injectUI: false, // 不注入 UI
    }),
  ],
});

然后在代码中使用：

// 访问全局 logger 实例
window.__logSaver__.saveLogs();
window.__logSaver__.downloadLogs();
window.__logSaver__.clear();

常见问题

Q: 日志文件保存在哪里？
A: 日志文件保存在项目根目录的 logs/ 文件夹中。

Q: 如何在生产环境使用？
A: 设置 devOnly: false，但不建议在生产环境使用此插件。

Q: 如何自定义 UI 样式？
A: 目前不支持自定义样式，但你可以通过浏览器开发者工具覆盖 CSS 类。

Q: 支持哪些浏览器？
A: 支持所有现代浏览器（Chrome、Firefox、Safari、Edge）。

许可证

MIT