了解控制台对象，成为控制台指挥官🎖

控制台对象和实用控制台方法。💜

这console是 JavaScript 开发者进行调试的首选方法。因此，如果您打算使用控制台进行复杂的调试，我们不妨了解一下控制台的一些实用功能。控制台的功能远不止一个简单的console.log命令。在本视频/文章中，我将向您展示一些替代 `log` 命令的方法，以便您获得更有用的控制台输出。

你可以点击这里观看我的视频讲解，或者继续向下滚动阅读。💜

引言

控制台的功能远不止一个日志方法。让我们来看看控制台对象内部都包含哪些内容。👇

感到惊讶吗？我第一次探索console物体的时候确实很惊讶。

警告和错误

在控制台中显示重要信息（而非纯文本）的最简单方法之一是使用 `warn` 或 `error` 方法。 例如，如果我们使用`warn` 或 `error` 方法，就会看到黄色输出，表示警告，而错误信息则会以红色显示。 如果您需要将某些警告和错误信息公开给其他开发人员，这将非常有用。

console.warnconsole.error

目录

我认为，在对简单对象等使用 console.log 时，两者之间几乎没有实际区别。
我们先来看看用户端的 log 和 dir 之间的区别。

如您所见，除了显示它是一个对象之外，几乎没有什么实际区别。

但有趣的地方在于我们开始使用 DOM 节点的时候。所以让我们来看看使用 `<div>`dir和log`<div>` 的区别document.body。

首先是console.log(document.body);。

然后是console.dir(document.body);。

注意：

• console.log 会以类似 HTML 树状结构的形式打印元素。
• `console.dir` 会以类似 JSON 树状结构打印元素。

具体来说，`console.log` 会对 DOM 元素进行特殊处理，而 `console.dir` 则不会。这在尝试查看 DOM 对象的完整 JS 表示时通常很有用。

数数

有了它console.count，我们可以实现一个非常常见的用例：检查某个函数被调用了多少次。在这个例子中，我想统计一下我们在遍历爱好列表时，一共有多少个爱好。

console.count接受一个可选的标签参数，如果未传递任何参数，则默认值为"default"。

通过使用这种方法，console.count我们可以避免创建变量来仅仅统计函数调用次数。

断言

使用console.assert`assert`，如果断言内部的评估值为假，我们会给出断言消息；然后，我们可以将标签作为第二个参数传递给 `assert`，该标签将显示在我们的断言消息中。

user在这个例子中，我们将使用与示例中相同的对象console.count来确保爱好存在。

通过使用此功能，console.assert我们可以仅在出现错误时才显示消息（例如本例中找不到某些内容时），这对于避免每次运行某些内容时都显示 console.log 非常有用。

桌子

使用console.table此功能，您可以打印出美观的表格，表格中每一行都标有对象的属性。您甚至可以点击列进行排序。

每当我访问新的 API 或其中包含超过几个值时，我都会滥用这个功能（是的，“几个”是一个计算机科学术语，不要去查它）。

time、timeLog 和 timeEnd

如果你怀疑某个操作耗时过长，需要进行性能测试以确认，那么这些工具就非常有用。

• console.time("label");启动计时器。
• console.timeLog("label");记录自启动计时器以来所经过的时间。
• console.timeEnd("label");停止计时器并记录自计时器启动以来所经过的时间。

在这个例子中，我将创建一个函数来展示每种时间方法的用法。

标签是可选的，默认值为"default"。使用标签时，请确保它们彼此正确对应，否则可能会遇到一些问题，例如启动和停止默认计时器或其他计时器（如果您记录多个计时器）。

痕迹

我们console.trace()可以输出调用位置的堆栈跟踪信息。能够查看调用堆栈是一个非常有用的功能，可以确保你按预期执行到代码的相应部分。

如果你在这个例子中看到一个函数调用另一个函数，你可能需要仔细检查它是否在预期的地方被调用。

组、组结束和组折叠

现在我们的控制台里有数不清的各种消息，我们应该学习如何对它们进行分组，保持整洁。通过console.group命令，我们可以创建可嵌套、可展开的日志列表。

• console.group("label"); 开始分组。
• console.groupEnd(); 结束分组。

让我们来看看实际应用。

默认情况下，我们在控制台中仍然占用相同的行数，因此如果我们想默认折叠分组，可以使用 ` console.groupCollapsed.`。在本例中，我们将使用 `.`groupCollapsed来显示区别。

最后，我想展示一个嵌套组的例子。

所以，这里有很多不同的方法可以尝试。我知道大家都会用到，console.table但你觉得哪种方法最实用呢？🤔

祝您编程愉快！💜

在推特上关注我

订阅Codú 社区