前言

在如今的 Web 开发中，console 命令是我们最得力的助手之一。它不仅仅是一个简单的日志输出工具，更是一个强大的调试和分析工具，能够帮助我们深入理解代码的运行机制，优化性能，以及快速定位问题。

console 对象是浏览器提供的全局对象，它提供了一系列的方法来输出信息到浏览器的控制台。然而，我们大多数人可能仅仅熟悉使用 console.log 来输出信息或者 vscode 的 debuger，而忽略了其他同样强大但较少为人所知的命令。其实 console 对象为我们提供了很多打印的方法：

接下来我将带大家一起尝试 console 对象的各种方法，让大家在之后的调试过程中，更加得心应手。

正文

1. 打印调试信息

console.debug()

这个方法是用来打印调试信息的，并且在浏览器中只有你配置了debug才可以显示（浏览器默认不显示）。

只有当我们打开调试模式，我们才能看见这个调试信息。

其实这个信息和我们的 console.log() 没有什么本质上的区别，不过浏览器将它归类到了 Verbose(详细) 类型里面去。在 Verbose 这个类型里面显示的消息，一般级别很低，比如你的页面有个循环，它卡的时间比较长，它就会显示到 Verbose 类型中去

2. 打印消息

2.1 普通消息（console.log）

console.log() 是最基本、最实用的用法了。它用于将信息输出到浏览器的控制台，可以帮助我们了解程序在运行时的状态和数据。

除了这个，它也有一些比较高级的用法：

这里使用了模板字符串来输出变量的值。

这里使用了格式化占位符 %s %d，将后面的变量赋值给了占位符，并且是一一对应的。使用格式化占位符可以提高输出的可读性和灵活性，让我们能够更精确地控制控制台输出的格式。以下是一些常用的占位符：

1. 字符串：%s
2. 整数：%d 或 %i
3. 浮点数：%f
4. 对象： %o 或 %O %o 用于原始对象格式，%O 用于美化的格式。
5. CSS 样式： %c
6. 百分号： %%
7. %s 和其他类型混合使用：可以同时使用多个占位符来输出不同类型的数据。

这里我们可以发现 console.log() 还支持定义 CSS 的格式：

每个 %c 只负责它之后的文字，直到遇到下一个 %c，当然我们也可以将样式定义成变量。

除此之外，还有对象中的 %o 用于原始对象格式，%O 用于美化的格式。这两者之间有什么区别呢？对于普通的object对象时：

就是单独的以不同的方式展示对象的内容，但是对于 DOM 节点，那就有区别了，来看下面这个场景：

可以看到，使用 %o 打印的是DOM节点的内容，包含其子节点，这种方式不会展示 DOM 元素的内部结构。而 %O 打印的是该DOM节点的对象属性，不过在一些旧的浏览器中，两者并不会有区别。

2.2 信息（console.info)

console.info() 可以用来打印资讯类说明信息，它和 console.log() 的用法一致，在谷歌浏览器中他们几乎是完全一样的：

在其他的浏览器中，就是消息展示出来的样式不一样，便于我们去做一个区分（这里以火狐浏览器为例子）：

2.3 表格（console.table）

它允许你以表格的形式打印数组或对象的集合。这对于调试和展示数据集非常有用，特别是当你需要查看多个对象或数组项的属性时。console.table() 方法有两个参数，第一个参数是必须参数即需要打印的对象，第二个参数是可选参数。来看下面的例子：

• 打印数组

• 打印对象

• 打印数组对象

除此之外，打印其他如对象数组、数组数组都是类似的

2.4 分组（console.group）

有时候我们的消息比较多，比如在一个计时器中打印很多的消息，那么我们可以把一些同类的消息，把它分成一个组。用法还是比较简单的，一个完整的信息分组以 console.group() 开始，console.groupEnd() 结束：

其中，分组也是允许嵌套的：

在打印分组的时候，默认是展开的，如果我们想折叠起来的话，我们可以使用 console.groupCollapsed() 开始分组：

2.5 对象结构（console.dir）

console.dir() 方法可以在控制台中显示指定 JavaScript 对象的属性，包括其原型链上的属性，并通过类似文件树样式的交互列表显示。大多数的情况下，console.log() 和 console.dir() 的效果是差不多的，但在打印 DOM 结构的时候却是完全不同的。

在这个场景可以看见，console.log() 只是打印元素的 DOM 结构，如果我们想要它的对象结构，元素的属性，就要使用 console.dir()。