【JS】你不知道的 console 命令

• 首先打开我们的浏览器控制台，点击这个图标会出现

• errors：表示打印的错误信息
• warnings：表示打印的警告信息
• info：表示打印的普通信息
• verbose：表示打印的调试信息
  

一、常规用法

1.1、console.log()

• console.log 方法用于在控制台输出信息。
• 它可以接受一个或多个参数，将它们连接起来输出。
• 大多数人只使用 console.log() 这种语法

/* 打印单个信息 */
console.log('Hello World') // Hello World
/* 打印多个信息 */
console.log('a', 'b', 'c') // a b c
1
2
3
4

• 但他其实还有另外一种占位符语法

console.log('I like %s but I do not like %s.', 'AA', 'BB');
// I like AA but I do not like BB.
1
2

• 占位符解析：

• 示例：%o

console.log('AA %o BB', {name: 'jj'});
1

• 示例：%c

console.log('AA %cBB CC', 'color: white; background-color: orange;');
1

1.2、console.info()

• console.info 是 console.log 方法的别名，用法完全一样。
• 有些低版本的浏览器 console.info 方法会在输出信息的前面，加上一个蓝色图标。
• 目前的话，蓝色图标是没有的

console.log("log")
console.info("info")
1
2

1.3、console.debug()

• console.debug方法与console.log方法类似，会在控制台输出调试信息。
• 但是，默认情况下，console.debug输出的信息不会显示，只有在打开显示级别在verbose的情况下，才会显示。

console.debug("debug")
1

1.4、console.warn()

• warn方法也是在控制台输出信息，与log方法的不同之处在于，warn方法输出信息时，在最前面加一个黄色三角，表示警告；
• 同时，还会高亮显示输出文字和错误发生的堆栈。其他方面都一样。

console.warn("warn")
1

1.5、console.error()

• error方法也是在控制台输出信息，与log方法的不同之处在于，error方法输出信息时，在最前面加一个红色的叉，表示出错。
• 同时，还会高亮显示输出文字和错误发生的堆栈。其他方面都一样。

console.error("error")
1

二、特殊用法

2.1、console.table()

• 对于某些复合类型的数据，console.table方法可以将其转为表格显示。

var array = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
];

console.table(array);
1
2
3
4
5
6

• 第二个可选参数是你想要显示列表的某列。默认是整个列表，但是我们也能这样做：

var array = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
];

console.table(array,["name"]);
1
2
3
4
5
6

• 如果出现只展示了一行的数据情况，因为他是默认折叠了，可以点击表头展开

2.2、console.count()

• count方法用于计数，输出它被调用了多少次

function fun(user) {
  console.count();
}

fun('aa')
fun('bb')
fun('cc')
1
2
3
4
5
6
7

• 该方法可以接受一个字符串作为参数，作为标签，对执行次数进行分类

function fun(user) {
  console.count(user);
}

fun('aa')
fun('bb')
fun('cc')
1
2
3
4
5
6
7

2.3、console.dir()

• dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。

console.log({f1: 'foo', f2: 'bar'})

console.dir({f1: 'foo', f2: 'bar'})
1
2
3

2.4、console.assert()

• console.assert方法主要用于程序运行过程中，进行条件判断，如果不满足条件，就显示一个错误，但不会中断程序执行。这样就相当于提示用户，内部状态不正确。

• 它接受两个参数，第一个参数是表达式，第二个参数是字符串。

• 只有当第一个参数为false，才会提示有错误，在控制台输出第二个参数，否则不会有任何结果。

var aa = 100
var bb = 99

console.assert(aa !== bb ,"aa 不等于 bb") // 为true，无打印
console.assert(aa === bb ,"aa 等于 bb")  // 为false，有打印
1
2
3
4
5

2.5、console.time()，console.timeEnd()

• 这两个方法用于计时，可以算出一个操作所花费的准确时间。
• time方法表示计时开始，timeEnd方法表示计时结束。
• 它们的参数是计时器的名称，需要保持一致。
• 调用timeEnd方法之后，控制台会显示“计时器名称: 所耗费的时间”。

console.time('Array initialize');

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
};

console.timeEnd('Array initialize');
1
2
3
4
5
6
7
8