7 个鲜为人知的 JavaScript Console 方法

在使用 JavaScript 进行调试时，console 对象的方法不仅仅只有 log、error 和 warn。你是否知道 console 其实有多达 20 种不同的方法？

它们不仅仅用于记录文本，还可以实现丰富多彩的数据可视化、调试、性能测试等等。

以下是 7 个强大的 console 方法：

1. trace()

想知道代码是从哪一步开始调用的吗？使用 trace() 可以回溯调用栈，非常适合调试。

2. table()

console.table()：轻松地将对象数组显示为表格，每行表示一个对象，每列表示一个属性。

在 Node.js 中的效果稍有不同

但无论如何，这都比 console.log() 更直观。

3. count()

console.count() 记录 count() 被调用的次数。

每次调用时，它的内部计数器都会加 1 并记录下来。

default() 是计数器的标签，它是 console.count() 方法的默认标签。这个默认标签会在你调用 console.count() 时自动生成，如果你没有提供自定义标签，那么它就会使用 default 作为标签名称。

你可以使用第一个参数自定义计数的标签

并使用 countReset() 方法将标签的内部计数器重置为 0。

4. clear()

clear() 就像 JavaScript 版的 CLS，可以清除控制台内容。

5. time()、timeLog() 和 timeEnd()

这些方法可以精确测量任务执行的时间。

• time() - 开始计时。

• timeLog() - 查看当前已用时间。

• timeEnd() - 停止计时并记录最终时间。

6. group()、groupCollapsed() 和 groupEnd()

这个组合非常适合将一组 console 消息分组显示，带有缩进和 UI 展开/折叠功能。

• group() - 增加一个分组级别。

• groupCollapsed() - 类似于 group()，但分组默认是折叠的。

• groupEnd() - 返回到上一个分组级别。

在 Node.js 中，只有缩进效果，因此 groupCollapsed() 的效果不明显。

7. dir()

dir() 是检查对象并查看其所有属性和方法的绝佳方式。

虽然表面上看与 console.log() 类似，但 console.dir() 是专门为这个目的设计的。

特别是在处理 HTML 元素对象时，log() 显示的是 HTML 标签层次结构，而 dir() 显示的是对象的所有属性。

总结

除了 console.log() 之外，console 对象还提供了许多其他强大的方法。有些方法可以让控制台 UI 更加丰富可视化，而其他方法则是强大的调试和性能测试工具。这些方法可以显著提升你在调试 JavaScript 代码时的效率和体验。

最后：

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读