【JavaScript】控制台 API

console.log

console.log 会将参数转为字符串 并输出到控制台。它会在参数之间输出空格，并在输出所有参数后重新开始一行。

console.debug、console.info、console.warn、console.error 与 console.log 几乎相同。

在 Node 中，console.error 将其输出发送到标准错误流，而不是标准输出流。除此之外的其他函数都是 console.log 的别名。

在浏览器中，这几个函数生成的输出消息前面可能会带一个图标，表示级别。开发者控制台支持开发者按照级别筛选控制台消息。

console.dir

当使用 console.log 打印对象时，会将对象的内容直接输出到控制台，而使用 console.dir 则会以树状结构展示对象的属性。这使得查看对象的结构更加方便，尤其是对于嵌套复杂对象时，它能够展示对象的层级关系，从而更好地了解对象的组成和属性值。

const firstDiv = document.getElementsByTagName('div')[0];
console.log(firstDiv);
console.dir(firstDiv);

console.assert

如果 console.assert 的第 1 个参数是真值，则 console.assert 什么也不做。但如果第 1 个参数是假值，则剩余参数会像被传给 console.error 一样打印出来，且前面带着 “Assertion failed” 前缀。

console.assert(1, 'test');
console.assert(0, 'test');

console.clear

console.clear 用于清除控制台输出。

console.table

console.table 尝试以表列形式显示其参数（如果无法实现，则使用常规的 console.log 格式）。

如果参数是比较短的对象数组，而数组中的所有对象具有相同属性时，使用这个函数效果最好。在这种情况下，数组中的每个对象的信息会显示在表格的一行中，对象的每个属性就是表格的一列。

console.table([
    { name: 'monster', age: 21 },
    { name: 'superman', age: 18 },
]);

也可以传入一个属性数组作为可选的第二个参数，以指定想要显示的列。

console.table(
    [
        { name: 'monster', age: 21 },
        { name: 'superman', age: 18 },
    ],
    ['name']
);

如果传入的是对象而非对象数组，那么输出会用一列显示属性名，一列显示属性值。如果属性值本身也是对象，则它们的属性名会变成表格的列。

console.table({ name: 'superman', age: 18 });

console.table({
    son: { name: 'superman', age: 18 },
    daughter: { name: 'monster', age: 21 },
});

console.trace

这个函数会像 console.log 一样打印它的参数，此外在输出之后还会打印栈跟踪信息。在 Node 中，这个函数的输出会进入标准错误而不是标准输出。

function foo() {
    console.trace();
}

function bar() {
    foo();
}
foo(); // console.trace    foo
bar(); // console.trace    foo    bar

console.count

这个函数接收一个字符串参数，并打印该字符串，后面跟着已经通过该字符串调用的次数。在调试事件处理程序时，如果需要知道事件处理程序被触发的次数，可以使用这个函数。

function foo() {
    console.count('foo');
}
foo(); // foo: 1

console.countReset

这个函数接收一个字符串参数，并重置针对该字符串的计数器。

console.group

这个函数将它的参数像传给 console.log 一样打印到控制台，然后设置控制台的内部状态，让所有后续的控制台消息（在下一次调用 console.groupEnd 之前）相对刚刚打印的消息缩进。这样可以通过缩进从视觉上把相关消息分为一组。

console.group('group1 start');
console.log('1');
console.group('group2 start');
console.log('2');
console.groupEnd();
console.log('group2 end');
console.log('1');
console.groupEnd();
console.log('group1 end');

console.groupCollapsed

这个函数与 console.group 类似，但在浏览器中分组默认会被 “折叠”，因而其中包含的消息会隐藏，除非用户点击扩展分组。在 Node 中，这个函数与 console.group 是同义函数。

console.groupEnd

这个函数没有参数，本身也没有输出，只用于结束由最近一次调用 console.group 或 console.groupCollapsed 导致的缩进和分组。

console.time

这个函数接收一个字符串参数，并记录以该字符串调用自身时的时间，没有输出。

console.time('test');
for (let i = 0; i < 1000000; i++) {}
console.timeLog('test');
for (let i = 0; i < 1000000; i++) {}
console.timeEnd('test');

console.timeLog

这个函数接收一个字符串作为第一个参数。如果这个字符串之前传给过 console.time，那么它会打印该字符串及自上次调用 console.time 之后经过的时间。如果还有额外的参数传给 console.timeLog，则这些参数会像被传给 console.log 一样打印出来。

console.timeEnd

这个函数接收一个字符串参数。如果该参数之前传给过 console.time，则它打印该参数及经过的时间。在调用 console.timeEnd 之后，如果不再调用 console.time，则调用 console.timeLog 将是不合法的。