你只会console.log就Out了

基础 console 方法

除了最常用的 console.log()，console 对象还提供了多种不同用途的方法：

javascript 复制代码

console.log('普通信息'); // 通用输出
console.info('资讯类信息'); // 信息性消息
console.debug('调试信息'); // 调试信息
console.warn('警告信息'); // 警告信息
console.error('错误信息'); // 错误信息

这些方法在控制台中会以不同颜色和图标显示，帮助我们快速识别不同类型的消息。

美化 console 输出

你知道吗？console.log() 支持使用 CSS 样式美化输出：

javascript 复制代码

console.log(
  '%c这是带样式的文本',
  'color: white; background-color: blue; padding: 5px; border-radius: 3px;'
);

你甚至可以使用多个样式：

javascript 复制代码

console.log(
  '%c红色%c蓝色',
  'color: red; font-weight: bold;',
  'color: blue; text-decoration: underline;'
);

实用 console 技巧

1. 清空控制台

javascript 复制代码

console.clear(); // 清除控制台中的所有信息

2. 计数功能

javascript 复制代码

// 统计代码执行次数
console.count(); // 默认计数器
console.count('myCounter'); // 命名计数器
console.countReset('myCounter'); // 重置计数器

3. 查看对象详细信息

javascript 复制代码

const user = { name: '张三', age: 25, address: { city: '北京' } };
console.dir(user); // 以可折叠的树形结构显示对象属性

4. 性能测量

javascript 复制代码

console.time('数据加载时间');
// 模拟耗时操作
setTimeout(() => {
  console.timeEnd('数据加载时间'); // 输出执行时间
}, 1000);

5. 条件输出

javascript 复制代码

const value = 10;
console.assert(value > 20, '值太小了'); // 只有当条件为假时才会输出

6. 追踪调用栈

javascript 复制代码

function first() {
  second();
}
function second() {
  console.trace('调用栈追踪'); // 显示当前的调用栈
}
first();

7. 表格形式展示数据

javascript 复制代码

const users = [
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: 30, city: '上海' },
  { name: '王五', age: 28, city: '广州' }
];
console.table(users); // 以表格形式展示数组或对象

8. 分组显示

javascript 复制代码

console.group('用户信息');
console.log('姓名: 张三');
console.log('年龄: 25');
console.groupCollapsed('详细地址'); // 默认折叠的分组
console.log('城市: 北京');
console.log('区域: 朝阳区');
console.groupEnd();
console.groupEnd();

9. 内存使用情况

javascript 复制代码

console.memory; // 查看内存使用情况(注意:这是一个属性,不是方法)

实际应用场景

调试复杂数据

当处理复杂对象时，使用 console.table() 可以更清晰地查看数据：

javascript 复制代码

// 传统方式
console.log(users);

// 更好的方式
console.table(users, ['name', 'age']); // 只显示特定列

性能优化

使用 console.time() 和 console.timeEnd() 定位性能瓶颈：

javascript 复制代码

console.time('数据处理');
// 复杂的数据处理代码
processLargeData();
console.timeEnd('数据处理');

条件调试

只在开发环境中输出调试信息：

javascript 复制代码

if (process.env.NODE_ENV === 'development') {
  console.debug('调试信息');
}

注意事项

生产环境移除：记得在生产环境中移除或禁用 console 语句，可以使用构建工具自动处理
避免过度使用：合理使用 console，避免控制台信息过多影响调试
使用断点调试：对于复杂问题，console 不能替代浏览器调试器的断点功能

总结

console 对象提供了丰富的调试功能，远不止我们常用的 console.log()。

记住，好的开发者不仅会写代码，更会高效地调试代码。console 就是你工具箱中不可或缺的利器！