不要只会用conosle.log了，这几个console命令，让你的调试效率翻倍

console在前端开发中是最常用到的语法之一，在开发和调试过程中是不可缺少的工具，可以打印调试信息、查看对象内容、性能分析、错误定位等作用。其中，console.log是最常用的命令，其他console命令在某些场景下更有助于我们的开发调试

日志等级类

1.console.log

在控制台中输出一条信息，这条信息可以是单个字符串，也可以是一个或多个对象。

1console.log('log打印');
2// log打印

2.console.info

与console.log作用基本上一致，仅在 Firefox浏览器中，web 控制台的日志中的项目旁边会显示一个小的‘I‘图标。

1console.info('info打印');
2// info打印

3.console.warn

在控制台中输出一条警告信息

1console.warn('warn信息');
2// warn信息

在这里插入图片描述

4.console.error

在控制台中输出一条错误信息

1console.error('error信息');
2// error信息

在这里插入图片描述

5.console.debug

在控制台中输出一条日志等级为“debug”或“verbose”级别的信息，多用于打印调试信息的场景。

此信息默认是不可见的，需要把等级为verbose的日志勾选上才能看到。

1console.debug('debug信息')

在这里插入图片描述

调试类

1.console.count & console.countReset

传入一个字符串作为标签名，记录调用此标签的调用次数。常用于统计某个语句执行次数的场景。

使用console.countReset可以重置次数

1console.count("number");
2console.count("number");
3console.count("number");
4console.count("number");
5console.countReset("number");
6console.count("number");
7console.count("number");
8
9// number: 1
10// number: 2
11// number: 3
12// number: 4
13// number: 1
14// number: 2

2.console.time

启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行 10,000 个计时器。

console.time：记录时间开始
console.timeLog: 打印记录时间开始到此时所花费的时间
console.timeEnd：结束计时，并打印记录时间开始到结束所花费的时间

1console.time("time");
2let a = 0;
3while(a < 100000) {
4    a++;
5}
6console.timeLog("time");
7let b = 0;
8while(b < 10000) {
9    b++;
10}
11console.timeEnd("time");
12
13// time: 0.926025390625 ms
14// time: 1.085205078125 ms

常用于性能分析场景

3.console.trace

输出打印位置的堆栈信息

1function foo() {
2	function bar() {
3		console.trace();
4	}
5    bar();
6}

在这里插入图片描述

场景举例：当某个方法被多个地方调用时，排查是哪里调用的

4.console.dir

显示指定javascript对象的属性列表。

场景举例：当打印一个dom元素时，使用console.log打印，在控制台中会显示成dom元素结构，无法查看对象属性

1const body = document.querySelector("body");
2console.log(body);
3console.dir(body);

在这里插入图片描述

美化类

1.console.table

以表格的形式输出到控制台中

1const list = [
2    {
3        name: "张三",
4        age: 21,
5        school: "清华大学"
6    },
7    {
8        name: "李四",
9        age: 22,
10        school: "北京大学"
11    },
12    {
13        name: "王五",
14        age: 20,
15        school: "清华大学"
16    }
17];
18console.log(list);
19console.table(list);

在这里插入图片描述

2.console.group

在控制台中打印内容会被添加到一个分组中展示。

console.group：创建一个分组，后续的打印内容都会添加到此分组中
console.groupCollapsed：与console.group相同，不同点是创建的分组默认是折叠的
console.groupEnd：结束分组打印

1console.group("name");
2console.log("张三");
3console.log("李四");
4console.log("王五");
5console.groupEnd("name");
6
7console.groupCollapsed("name");
8console.log("张三");
9console.log("李四");
10console.log("王五");
11console.groupEnd("name");

在这里插入图片描述

3.console.log

可以对打印内容添加样式，使用%c作为占位符，%c后面的内容将使用传入的CSS样式进行美化

1console.log(
2'%c antd Design %c v1.0.0',
3'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #5584ff; font-weight: bold;',
4'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;',
5);