cat-shark
174 lines
4.2 KiB
Markdown
174 lines
4.2 KiB
Markdown
# 日志管理说明
|
||
|
||
## 问题说明
|
||
|
||
当前代码中存在大量的 `console.log` 语句（VideoIPAgent.vue 中有 865 个），这会导致：
|
||
- 控制台日志过多，影响性能
|
||
- 生产环境中暴露过多调试信息
|
||
- 浏览器开发者工具可能卡死
|
||
|
||
## 解决方案
|
||
|
||
已创建日志管理工具 `src/utils/logger.ts`，提供以下功能：
|
||
|
||
### 1. 自动环境检测
|
||
- **开发环境**：默认显示所有日志
|
||
- **生产环境**：默认只显示错误日志
|
||
|
||
### 2. 日志级别控制
|
||
```typescript
|
||
enum LogLevel {
|
||
DEBUG = 0, // 调试信息
|
||
INFO = 1, // 一般信息
|
||
WARN = 2, // 警告
|
||
ERROR = 3, // 错误
|
||
NONE = 4 // 不显示任何日志
|
||
}
|
||
```
|
||
|
||
### 3. 使用方法
|
||
|
||
#### 在代码中使用
|
||
```typescript
|
||
// 导入日志工具
|
||
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();
|
||
```
|
||
|
||
#### 在控制台中动态控制
|
||
打开浏览器控制台，输入以下命令：
|
||
|
||
```javascript
|
||
// 关闭所有日志
|
||
__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. 性能优化建议
|
||
|
||
#### 立即可用的优化
|
||
即使不修改代码，也可以在生产环境的启动脚本中添加：
|
||
|
||
```javascript
|
||
// 在 main.ts 或 App.vue 的最前面添加
|
||
if (import.meta.env.MODE === 'production') {
|
||
// 生产环境禁用所有console
|
||
console.log = () => {};
|
||
console.debug = () => {};
|
||
console.info = () => {};
|
||
// 保留 warn 和 error
|
||
}
|
||
```
|
||
|
||
#### 使用日志工具后的优化
|
||
```typescript
|
||
// 在 main.ts 中配置
|
||
import { logger, LogLevel } from '@/utils/logger';
|
||
|
||
// 生产环境只显示错误
|
||
if (import.meta.env.MODE === 'production') {
|
||
logger.setLevel(LogLevel.ERROR);
|
||
}
|
||
```
|
||
|
||
### 6. 日志缓存功能
|
||
|
||
日志工具内置了缓存功能，最多保留1000条最近的日志：
|
||
|
||
```javascript
|
||
// 查看缓存的日志
|
||
__logger.getCache()
|
||
|
||
// 清空日志缓存
|
||
__logger.clearCache()
|
||
```
|
||
|
||
## 使用示例
|
||
|
||
### 替换前
|
||
```typescript
|
||
console.log('[VideoGen.onTaskSubmitted] 📥 任务已提交');
|
||
console.log('[VideoGen.onTaskSubmitted] 📥 开始刷新任务列表...');
|
||
console.log('[VideoGen.onTaskSubmitted] ✓ 任务列表刷新完成');
|
||
```
|
||
|
||
### 替换后
|
||
```typescript
|
||
import { log } from '@/utils/logger';
|
||
|
||
log('[VideoGen.onTaskSubmitted] 📥 任务已提交');
|
||
log('[VideoGen.onTaskSubmitted] 📥 开始刷新任务列表...');
|
||
log('[VideoGen.onTaskSubmitted] ✓ 任务列表刷新完成');
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **保持原有功能**：日志工具的API与console保持一致，迁移后不影响现有功能
|
||
2. **逐步迁移**：不要一次性替换所有console，建议按文件逐步迁移
|
||
3. **性能优先**：优先迁移日志最多的文件（如VideoIPAgent.vue）
|
||
4. **保留错误日志**：即使在生产环境，也应保留error级别的日志用于问题排查
|
||
|
||
## 快速禁用日志（临时方案）
|
||
|
||
如果当前日志已经影响性能，可以临时在浏览器控制台执行：
|
||
|
||
```javascript
|
||
// 方案1：使用日志工具（推荐）
|
||
__disableLog()
|
||
|
||
// 方案2：直接禁用console（适用于紧急情况）
|
||
console.log = () => {};
|
||
console.debug = () => {};
|
||
console.info = () => {};
|
||
```
|
||
|
||
重新刷新页面后，日志工具的设置会自动保存并生效。
|