【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 则会以树状结构展示对象的属性。这使得查看对象的结构更加方便,尤其是对于嵌套复杂对象时,它能够展示对象的层级关系,从而更好地了解对象的组成和属性值。

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 将是不合法的。

相关推荐
Swift社区1 小时前
在 Swift 中实现字符串分割问题:以字典中的单词构造句子
开发语言·ios·swift
new出一个对象1 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
没头脑的ht1 小时前
Swift内存访问冲突
开发语言·ios·swift
没头脑的ht1 小时前
Swift闭包的本质
开发语言·ios·swift
wjs20241 小时前
Swift 数组
开发语言
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
stm 学习ing2 小时前
FPGA 第十讲 避免latch的产生
c语言·开发语言·单片机·嵌入式硬件·fpga开发·fpga
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js