JS中的console对象

刺骨的言语ヽ痛彻心扉 2022-07-14 15:27 180阅读 0赞

在调试 JS 代码时，我们大多人倾向于使用 alert() 或者 console.log() 方法来输出信息，正如某些 Java 程序员喜欢在调试代码时使用System.out.println() 输出信息一样。但与 Java 输出不一样的是， console 对象拥有多种方法可以更好的呈现信息，从而给代码调试带来方便。根据常用程度，列出以下几种 console 对象的方法：

console.log()

console.debug()、http://console.info()、console.warn() 与 console.error()

console.table()

console.time() 与 console.timeEnd()

console.assert()

console.count()

console.group、console.groupEnd() 与 console.groupCollapsed()

console.dir()

**1、console.log()**

先来谈谈我们最熟悉也最常用的 console.log() 方法。

我们最常用的做法是通过它来输出一个变量或者输出一个字符串。比如下面：

![20161215094339638][]

运行结果如下：

![Center][]

但我们也可以这样用 console.log() ：

![Center 1][]

控制台会输出：

![20161215094434592][]

代码片段 1 显示，console.log() 的参数可以有多个，输出的结果以一个空格隔开。

代码片段 2 显示，console.log() 可以使用 C 语言 printf() 风格的占位符，不过其支持的占位符种类较少，只支持字符串（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）。

**2、console.debug()、console.info()、 console.warn() 与 console.error()**

这四个方法的使用方法跟 console.log() 一模一样，差别在于输出的颜色与图标不同。下面是示例：

![20161215092741054][]

运行结果如下：

![20161215092759757][]

**3、console.table()**

我们看下面一个变量：

![20161215092830866][]

我们用 console.log() 将之在 Chrome 的控制台中输出：

![20161215092900492][]

再用 console.table() 输出：

![20161215092926101][]

所以从上面两种输出我们可以看出，当输出类似于这种两层嵌套的对象时，我们可以选择 console.table() 以表格的形式输出。当然，嵌套三层及以上的也会以表格形式输出，但限于表格只能显示二维信息的特点，其会在嵌套三层或以上的地方会显示 "Object" 字符串。

**4、console.time() 与 console.timeEnd()**

在调试时，我们经常需要知道一段代码执行时间，我们可以使用这两行代码来实现。看下面一段代码：

![20161215093153243][]

输出为：

![20161215093216700][]

从上面的例子可以看出，我们用 console.time() 和 console.timeEnd() 包围要测试运行时间的代码，这两个方法的参数保持一致，以便正确识别和匹配代码开始和结束的位置。

**5、console.assert()**

console.assert() 类似于单元测试中的断言，当表达式为 false 时，输出错误信息。示例如下：![20161215093543190][]

输出结果如下：

![20161215094105354][]

**6、console.count()**

调试代码时，我们经常需要知道一段代码被执行了多少次，我们可以使用 console.count() 来方便的达到我们的目的。示例如下：

![20161215094126387][]

运行结果为：

![20161215093911148][]

**7、console.group()、 console.groupEnd() 与 console.groupCollapsed()**

一般的 console.log() 方法的输出没有层级关系，在需要一些显示层级关系的输出中显得苍白无力，使用 console.group() 可以达到我们的目的。示例代码如下：

![20161215094145231][]

运行结果为：

![20161215094157450][]

把 "group" 换成 "groupCollapsed"，则默认为折叠运行结果。

**8、console.dir()**

console.dir() 是干嘛的？MDN 上说这个方法是为了将特定的 JS 对象显示为可以交互的列表，而列表是折叠起来的。这么说有点抽象，看我在 Chrome 控制台输出的效果：

![20161215094212917][]

对于 Chrome 用户来讲，console.dir() 是不是就没用了呢？然而并不是，看图：

在 Chrome 中打印 DOM 元素时，两个方法输出的结果大不一样。console.log() 会将 DOM 元素以 HTML 的形式输出，而 console.dir() 则会以 JSON 对象的形式输出。

![20161215094243638][]

[20161215094339638]: /images/20220714/fc2e7eef47804185bd92a1998352e324.png
[Center]: /images/20220714/e57cc5055e8e41a7adcff20b59d83a81.png
[Center 1]: /images/20220714/266d714cfcfb4c96aa510ccb615db0a5.png
[20161215094434592]: /images/20220714/4b313714e3e141d1a9ff647846cc94cd.png
[20161215092741054]: /images/20220714/6e47e0bffd004f29b2dff931024c35ce.png
[20161215092759757]: /images/20220714/86649f7f9e564503a1adb1290ddf3f33.png
[20161215092830866]: /images/20220714/89cf327b91914b0e832dea96440540f7.png
[20161215092900492]: /images/20220714/6de97499c2474372914e1938d56e1c20.png
[20161215092926101]: /images/20220714/7e58d93fb3d74c4ba6be33a5d5f8ba60.png
[20161215093153243]: /images/20220714/6c91dc1d9e004b649174d7d96841fd2e.png
[20161215093216700]: /images/20220714/5d7ac8227f6b478792c3d5894bdf10b1.png
[20161215093543190]: /images/20220714/3a30fef82f0e45c896e540570161c85d.png
[20161215094105354]: /images/20220714/01902cf132c84ba49fe539db88319b9b.png
[20161215094126387]: /images/20220714/0135105dd4de4b74a12db77d585e143d.png
[20161215093911148]: /images/20220714/8067058557d74aa08ca85a2e5d1b2869.png
[20161215094145231]: /images/20220714/a17ea28aac3f4d41b8908f0a2d538ac0.png
[20161215094157450]: /images/20220714/6c962901a43e405c890ae56bfe93d4e2.png
[20161215094212917]: /images/20220714/517d2df839bf4339a083f878f1508f78.png
[20161215094243638]: /images/20220714/1de9265c24724685b4441bb1b8211d17.png