2、console对象详解：console.log、console.warn、console.error、console.table、console.time等

说实话，很多前端开发者对 console 的认知就停留在 console.log 上。我见过不少同事，调试时满屏都是 log，看得人眼花缭乱。其实 console 对象里藏着不少好东西，用好了能让你调试效率翻倍。

今天我就把 console 家族里最常用的几个成员，一个一个讲清楚。每个方法我都会结合自己的实战经验来说，希望能帮你少走些弯路。

2.1 console.log —— 最基础的输出

console.log 是我们最熟悉的，但你真的会用吗？

最基本的用法：

console.log('Hello, World!');
console.log('用户信息：', user);
console.log('当前状态：', status, '错误码：', code);

我个人习惯在 log 里加个前缀标签，比如 [Login]、[API]，这样在控制台里一眼就能看出是哪个模块输出的。不然项目大了，满屏 log 根本分不清谁是谁。

小技巧： 用 console.log({ user }) 这种对象简写方式，控制台会直接显示变量名和值，比单独写 console.log('user', user) 更清晰。

2.2 console.warn —— 温柔的提醒

console.warn 输出的是黄色警告信息。它不会中断程序执行，但会在控制台里留下一个显眼的警告标记。

console.warn('该 API 即将废弃，请尽快迁移到新版本');
console.warn('配置项缺失，使用默认值', defaultConfig);

我在项目中遇到过这样的情况：某个第三方库升级后，有些方法不再推荐使用。我就在代码里加了个 warn，提醒自己和团队其他成员。这样既不影响线上运行，又能及时发现问题。

注意： 生产环境记得把 warn 也过滤掉，不然用户看到控制台里一堆黄色警告，体验很不好。

2.3 console.error —— 红色警报

console.error 输出红色错误信息，通常配合 try-catch 使用。

try {
  // 一些可能出错的代码
} catch (error) {
  console.error('请求失败：', error);
  console.error('错误详情：', error.message, error.stack);
}

我曾经因为没好好用 error，排查一个线上 bug 花了整整一下午。后来养成了习惯：所有 catch 里都加上 console.error，并且把堆栈信息也打出来。这样问题复现时，控制台里直接就能看到完整的错误链路。

核心区别： log 是普通信息，warn 是潜在问题，error 是明确错误。三种级别要分清楚，别什么都用 log。

2.4 console.table —— 表格化展示

这个是我个人最爱的调试方法之一。当你有一堆对象或数组时，用 console.table 展示，比 log 清晰一百倍。

const users = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
  { id: 3, name: '王五', age: 28 }
];

console.table(users);

控制台里会直接渲染成一个表格，每一列对应对象的属性，每一行对应一个对象。你想想看，如果数据有几十条，用 log 打印出来你能看清楚吗？但用 table 就一目了然。

还可以指定只显示某些列：

console.table(users, ['name', 'age']);

这样只显示姓名和年龄两列，信息更聚焦。

实战场景： 调试接口返回的列表数据时，我经常用 console.table 来快速查看数据结构是否完整。比一个个展开对象快多了。

2.5 console.time 与 console.timeEnd —— 性能计时器

想知道某段代码执行了多久？用 console.time 和 console.timeEnd 这对搭档。

console.time('数据加载');

// 模拟耗时操作
for (let i = 0; i < 1000000; i++) {
  // 一些计算
}

console.timeEnd('数据加载');
// 输出：数据加载: 12.34ms

注意，两个方法的参数必须一致，它们通过这个标签来配对。我曾经犯过这种低级错误：time 里写的是 '加载'，timeEnd 里写的是 '加载数据'，结果控制台报错说找不到对应的计时器。

还可以同时计时多个任务：

console.time('整体流程');
console.time('步骤一');
// 步骤一代码
console.timeEnd('步骤一');

console.time('步骤二');
// 步骤二代码
console.timeEnd('步骤二');

console.timeEnd('整体流程');

这样就能看到每个步骤分别花了多少时间，哪个环节是性能瓶颈，一目了然。

避坑指南： 我曾经在循环里调用了 console.time，结果控制台输出了几百条计时信息，页面直接卡死了。记住，计时器要放在循环外面。

2.6 其他实用方法

除了上面几个，console 对象还有一些不太常用但很实用的方法：

方法 作用 使用场景
console.count 统计某段代码被调用了多少次 检查事件是否被重复触发
console.group 将输出信息分组显示 组织复杂的调试信息
console.assert 条件为 false 时才输出错误 快速断言检查
console.dir 以树形结构展示对象 查看 DOM 元素或复杂对象

举个例子，console.count 的用法：

function handleClick() {
  console.count('按钮点击次数');
  // 其他逻辑
}

// 每次点击，控制台都会输出：按钮点击次数: 1, 按钮点击次数: 2, ...

嗯，这个在排查事件是否被多次绑定时特别好用。我遇到过一个问题：页面上的按钮点一次，事件却触发了两次。用 count 一查，果然绑定了两个事件监听器。

2.7 生产环境怎么办？

说了这么多，你可能会问：这些调试代码上线了怎么办？

我的建议是：

  • 开发环境随便用，怎么方便怎么来
  • 生产环境一定要把 console 输出全部干掉
  • 可以用构建工具（如 Webpack 的 TerserPlugin）自动移除
  • 也可以写个简单的工具函数，根据环境变量决定是否输出

说白了，console 是给开发者用的工具，不是给用户看的。别让调试代码污染了生产环境。

我的习惯： 写一个 logger 工具类，封装所有 console 方法。开发环境正常输出，生产环境全部静默。这样代码里统一调用，后期维护也方便。

好了，console 对象的核心方法就这些。记住，调试工具用得好，能帮你省下大把时间。下次调试时，别只会用 log 了，试试 table 和 time，你会发现新世界的。

← 上一章 📖 返回目录 下一章 →