cat-shark/WYF-koubo

Fork 0

Files

T

cat-shark a13b804c7a Initial clean project import

2026-06-19 18:45:55 +08:00

4.2 KiB

Raw Blame History

日志管理说明

问题说明

当前代码中存在大量的 console.log 语句（VideoIPAgent.vue 中有 865 个），这会导致：

控制台日志过多，影响性能
生产环境中暴露过多调试信息
浏览器开发者工具可能卡死

解决方案

已创建日志管理工具 src/utils/logger.ts，提供以下功能：

1. 自动环境检测

开发环境：默认显示所有日志
生产环境：默认只显示错误日志

2. 日志级别控制

enum LogLevel {
    DEBUG = 0,  // 调试信息
    INFO = 1,   // 一般信息
    WARN = 2,   // 警告
    ERROR = 3,  // 错误
    NONE = 4    // 不显示任何日志
}

3. 使用方法

在代码中使用

// 导入日志工具
import { logger, log, debug, info, warn, error } from '@/utils/logger';

// 替换 console.log
log('用户点击了按钮');

// 替换 console.debug
debug('详细调试信息', { data: someData });

// 替换 console.info
info('任务开始执行');

// 替换 console.warn
warn('配置项缺失，使用默认值');

// 替换 console.error
error('请求失败', error);

// 分组日志
group('任务执行详情');
log('步骤1: 初始化');
log('步骤2: 处理数据');
groupEnd();

在控制台中动态控制

打开浏览器控制台，输入以下命令：

// 关闭所有日志
__disableLog()

// 开启所有日志
__enableLog()

// 设置日志级别（只显示错误）
__setLogLevel(3)

// 设置日志级别（显示所有）
__setLogLevel(0)

// 查看当前设置
__logger.getLevel()
__logger.isEnabled()

4. 迁移计划

为避免一次性修改过多代码导致问题，建议分步骤迁移：

第一步：关键文件优先（已完成创建工具）

✅ 创建日志工具 logger.ts

第二步：高频文件迁移（建议优先处理）

VideoIPAgent.vue (865个console)
SubtitleStyleSelector.vue (107个console)

第三步：其他文件逐步迁移

其他Vue组件
Service层
Store层

5. 性能优化建议

立即可用的优化

即使不修改代码，也可以在生产环境的启动脚本中添加：

// 在 main.ts 或 App.vue 的最前面添加
if (import.meta.env.MODE === 'production') {
    // 生产环境禁用所有console
    console.log = () => {};
    console.debug = () => {};
    console.info = () => {};
    // 保留 warn 和 error
}

使用日志工具后的优化

// 在 main.ts 中配置
import { logger, LogLevel } from '@/utils/logger';

// 生产环境只显示错误
if (import.meta.env.MODE === 'production') {
    logger.setLevel(LogLevel.ERROR);
}

6. 日志缓存功能

日志工具内置了缓存功能，最多保留1000条最近的日志：

// 查看缓存的日志
__logger.getCache()

// 清空日志缓存
__logger.clearCache()

使用示例

替换前

console.log('[VideoGen.onTaskSubmitted] 📥 任务已提交');
console.log('[VideoGen.onTaskSubmitted] 📥 开始刷新任务列表...');
console.log('[VideoGen.onTaskSubmitted] ✓ 任务列表刷新完成');

替换后

import { log } from '@/utils/logger';

log('[VideoGen.onTaskSubmitted] 📥 任务已提交');
log('[VideoGen.onTaskSubmitted] 📥 开始刷新任务列表...');
log('[VideoGen.onTaskSubmitted] ✓ 任务列表刷新完成');

注意事项

保持原有功能：日志工具的API与console保持一致，迁移后不影响现有功能
逐步迁移：不要一次性替换所有console，建议按文件逐步迁移
性能优先：优先迁移日志最多的文件（如VideoIPAgent.vue）
保留错误日志：即使在生产环境，也应保留error级别的日志用于问题排查

快速禁用日志（临时方案）

如果当前日志已经影响性能，可以临时在浏览器控制台执行：

// 方案1：使用日志工具（推荐）
__disableLog()

// 方案2：直接禁用console（适用于紧急情况）
console.log = () => {};
console.debug = () => {};
console.info = () => {};

重新刷新页面后，日志工具的设置会自动保存并生效。

4.2 KiB Raw Blame History Unescape Escape