JavaScript 之 console 用法详解

在编写页面js程序时，很多人倾向于使用 alert()、console.log() 等来输出信息，但 console 对象还有多种方法可以更好的呈现信息，从而给代码调试带来方便。根据常用程度，列出以下7种 console 对象的方法：

1、console.log()

1. console.log(“Hello World!”);
2. console.log(“This is a pen”, “This is an appe”, “Apple-Pen”);
3. console.log("%d年%d月%d日", 2020, 07, 15);

打印结果：

1. Hello World!
2. This is a pen This is an appe Apple-Pen
3. 2020年7月15日

由此可见：

console.log() 的参数可以有多个，输出的结果以一个空格隔开
console.log() 可以使用 C 语言 printf() 风格的占位符，不过其支持的占位符种类较少，只支持字符串（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）

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

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

3、console.table()

当输出类似于这种两层嵌套的对象时，我们可以选择 console.table() 以表格的形式输出。

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

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

console.time("for-test");
const arr = [];
for(let i = 0; i < 100000; i++) {
    arr.push({"key": i});
}
console.timeEnd("for-test");

输出为：

for-test: 16.030ms

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

5、console.assert()

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

6、console.count()

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

function func() {
    console.count("label");
}

for(let i = 0; i < 3; i++) {
    func();
}

运行结果为：

label: 1
label: 2
label: 3

7、console.dir()

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

参考文章

【小荀】博客园 - JavaScript 中 console 的用法