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

相关推荐
q567315234 分钟前
分布式增量爬虫实现方案
开发语言·分布式·爬虫·python
云浪4 分钟前
掌握 CSS 倾斜函数
前端·css
勤奋的知更鸟9 分钟前
LLaMA-Factory和python版本的兼容性问题解决
开发语言·python·llama-factory
ai产品老杨11 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
CIb0la12 分钟前
Ai自动补全编程工具:llama vscode
运维·开发语言·学习·测试工具·程序人生
唐诗12 分钟前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码14 分钟前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发
默默无闻的白夜16 分钟前
【Vue】初学Vue(setup函数,数据响应式, 脚手架 )
前端·javascript·vue.js
萌萌哒草头将军21 分钟前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
1candobetter21 分钟前
JAVA后端开发——多租户
java·开发语言