前言
说到 console，很多人的第一反应肯定是 console.log，它既简单又直接！然而，在处理复杂问题时，这种方式往往效率低下。本文分享 20 个 console 的调试小技巧，帮您更快速地找出并解决问题。
1. 样式轰炸
1
2
3
4
5
6
7
8
|
console.log(
'%cVIP调试模式%c v2.0',
'background:linear-gradient(45deg,#ff6b6b,#4ecdc4);color:white;padding:4px 8px;border-radius:3px;',
'color:#666;margin-left:8px;'
);
|
2. 动态模板
1
2
3
4
5
|
const user = { name: 'Alice', level: 'VIP' };
console.log(`[${new Date().toISOString()}] ${user.name} (${user.level}) 执行了支付操作`);
|
3. 树形结构解析
1
2
3
4
5
6
7
8
9
10
11
12
13
|
console.log('%c▸ 用户数据树', 'color:#48bb78;font-weight:bold', {
id: 1001,
profile: {
name: 'Bob',
address: {
city: '上海',
district: '浦东'
}
},
orders: ['#2023-1001', '#2023-1002']
});
|
4. 表格魔法升级
1
2
3
4
5
6
7
8
9
10
11
12
|
const cryptoData = [
{ coin: 'BTC', price: 42000, change24h: '+5.2%', volatility: 'high' },
{ coin: 'ETH', price: 2300, change24h: '-1.8%', volatility: 'medium' },
{ coin: 'SOL', price: 98, change24h: '+12.6%', volatility: 'high' }
];
console.table(cryptoData.map(item => ({
...item,
'价格趋势': item.change24h.startsWith('+')? '↑' : '↓'
})));
|
5. 生命周期标记
1
2
3
4
5
6
7
8
|
console.groupCollapsed('%c🔄 API请求流程追踪', 'color:#4299e1');
console.log('%c▶️ 请求发起', 'color:#48bb78', { url: '/api/users', method: 'GET' });
console.log('%c⏳ 响应接收', 'color:#ed8936', { status: 200, time: '320ms' });
console.log('%c✅ 数据处理', 'color:#48bb78', { processedItems: 15 });
console.groupEnd();
|
6. 调用栈快照
1
2
3
4
5
6
7
|
function processOrder() {
console.trace('订单处理流程追踪');
}
|
7. 内存监控
1
2
3
4
5
6
|
const initialMemory = performance.memory.usedJSHeapSize;
console.log('内存使用量变化:',
(performance.memory.usedJSHeapSize - initialMemory) / 1024 + ' KB');
|
8. 复合性能测试
1
2
3
4
5
6
7
8
9
10
|
console.time('复合操作');
await Promise.all([
console.timeLog('复合操作', '阶段1完成'),
fetchData(),
console.timeLog('复合操作', '阶段2完成'),
processData()
]);
console.timeEnd('复合操作');
|
9. 条件断言
1
2
3
4
5
6
7
8
|
console.assert(
user.age > 18,
'%c年龄验证失败',
'color:red;font-weight:bold',
{ requiredAge: 18, actualAge: user.age }
);
|
10. 环境感知日志
1
2
3
4
5
6
7
8
9
10
|
const debug = {
log: process.env.NODE_ENV === 'development'
? console.log.bind(console)
: () => {}
};
debug.log('开发环境专属日志');
|
11. 数据快照对比
1
2
3
4
5
|
const before = JSON.stringify(state);
console.log('状态变更差异:', diff(JSON.parse(before), state));
|
12. 日志分类过滤
1
2
3
4
5
6
7
8
9
10
|
const logger = {
network: (...args) => console.log('[NET]',...args),
security: (...args) => console.log('[SEC]',...args),
payment: (...args) => console.log('[PAY]',...args)
};
logger.payment('支付请求发起', { amount: 99.9 });
|
13. 交互式调试
1
2
3
4
5
6
|
console.log('点击查看详情：', {
data: encryptedData,
inspect: () => decryptData(encryptedData)
});
|
14. 日志持久化
1
2
3
4
5
6
7
8
|
const originalLog = console.log.bind(console);
console.log = (...args) => {
originalLog(...args);
sendToLogServer(args);
};
|
15. 性能热力图
1
2
3
4
5
6
7
|
console.timeStamp('渲染开始');
console.timeStamp('DOM更新');
|
16. 内存泄漏检测
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
let instances = [];
class MyComponent {
constructor() {
instances.push(this);
console.count('实例创建');
}
}
setInterval(() => console.log('存活实例:', instances.length), 5000);
|
17. 源码映射调试
1
2
3
4
|
devtool: 'source-map',
|
18. 调试器集成
1
2
3
4
5
6
7
8
|
function complexCalculation() {
console.log('进入计算函数');
debugger;
}
|
19. 日志分级控制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const LOG_LEVEL = {
DEBUG: 0,
INFO: 1,
WARN: 2,
ERROR: 3
};
class Logger {
constructor(level = LOG_LEVEL.INFO) {
this.level = level;
}
debug(...args) {
if (this.level <= LOG_LEVEL.DEBUG) console.log('[DEBUG]',...args);
}
}
|
20. 敏感信息过滤
1
2
3
4
5
6
7
8
9
10
11
|
const safeLog = (data) => {
const filtered = _.cloneDeep(data);
delete filtered.password;
delete filtered.token;
return filtered;
};
console.log('用户数据:', safeLog(userData));
|
注意：所有调试代码应在开发环境使用，生产环境需通过构建工具自动移除。