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 则会以树状结构展示对象的属性。这使得查看对象的结构更加方便,尤其是对于嵌套复杂对象时,它能够展示对象的层级关系,从而更好地了解对象的组成和属性值。
js
const firstDiv = document.getElementsByTagName('div')[0];
console.log(firstDiv);
console.dir(firstDiv);
console.assert
如果 console.assert 的第 1 个参数是真值,则 console.assert 什么也不做。但如果第 1 个参数是假值,则剩余参数会像被传给 console.error 一样打印出来,且前面带着 "Assertion failed" 前缀。
js
console.assert(1, 'test');
console.assert(0, 'test');
console.clear
console.clear 用于清除控制台输出。
console.table
console.table 尝试以表列形式显示其参数(如果无法实现,则使用常规的 console.log 格式)。
如果参数是比较短的对象数组,而数组中的所有对象具有相同属性时,使用这个函数效果最好。在这种情况下,数组中的每个对象的信息会显示在表格的一行中,对象的每个属性就是表格的一列。
js
console.table([
{ name: 'monster', age: 21 },
{ name: 'superman', age: 18 },
]);
也可以传入一个属性数组作为可选的第二个参数,以指定想要显示的列。
js
console.table(
[
{ name: 'monster', age: 21 },
{ name: 'superman', age: 18 },
],
['name']
);
如果传入的是对象而非对象数组,那么输出会用一列显示属性名,一列显示属性值。如果属性值本身也是对象,则它们的属性名会变成表格的列。
js
console.table({ name: 'superman', age: 18 });
js
console.table({
son: { name: 'superman', age: 18 },
daughter: { name: 'monster', age: 21 },
});
console.trace
这个函数会像 console.log 一样打印它的参数,此外在输出之后还会打印栈跟踪信息。在 Node 中,这个函数的输出会进入标准错误而不是标准输出。
js
function foo() {
console.trace();
}
function bar() {
foo();
}
foo(); // console.trace foo
bar(); // console.trace foo bar
console.count
这个函数接收一个字符串参数,并打印该字符串,后面跟着已经通过该字符串调用的次数。在调试事件处理程序时,如果需要知道事件处理程序被触发的次数,可以使用这个函数。
js
function foo() {
console.count('foo');
}
foo(); // foo: 1
console.countReset
这个函数接收一个字符串参数,并重置针对该字符串的计数器。
console.group
这个函数将它的参数像传给 console.log 一样打印到控制台,然后设置控制台的内部状态,让所有后续的控制台消息(在下一次调用 console.groupEnd 之前)相对刚刚打印的消息缩进。这样可以通过缩进从视觉上把相关消息分为一组。
js
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
这个函数接收一个字符串参数,并记录以该字符串调用自身时的时间,没有输出。
js
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 将是不合法的。