在使用 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 代码时的效率和体验。