是时候全面了解一下window.console了！

毫不夸张地说，window.console算是前端最重要的调试工具之一。

一般来说，一段程序只需要输出几个重要变量，整个的执行过程就可以一目了然。浏览器为我们提供了类似下面的界面来输出这些内容：

window.console提供了很多的方法对输出结果进行格式化，不过最常用的大概就是console.log（没办法，它太过强大）了。不过console的秘密可远不止这些：

一、常用函数

1. console.assert(value, […message])

断言函数。

assert是很多测试框架最常用的断言函数，目的是验证第一个参数value是否为真。如果是，则不输出任何内容，否则就抛出一个Assertion failed异常，表示断言失败，并输出后续参数。

value除了可以是一个变量，更常见的是一个表达式，或一个真值函数的返回值。如：

console.assert(true, '断言失败');  // 第一个参数值为true，没有输出
console.assert({}, '断言失败'); // {}转化为布尔值也是true，断言成功，没有输出

console.assert(1 === '1', '数值1和字符串1不等');
> Assertion failed: 数值1和字符串1不等

console.assert(equal(a, b), 'a和b不相等');
> 如果函数返回true，则不输出内容，否则将抛出异常

console.assert([] == [], '断言失败', '[]和[]不相等')
> Assertion failed: 断言失败 []和[]不相等

2. console.clear()

清空控制台，并显示Console was cleared。

3. console.count([label])

用于在控制台维护一个计数器。

count可以接受一个参数作为计数器的标签，如果不传，则默认是default。每次调用console.count，标签对应的计数器就会加1：

> console.count()
default: 1

> console.count('default')
default: 2

> console.count('abc')
abc: 1

> console.count('xyz')
xyz: 1

> console.count('abc')
abc: 2

> console.count()
default: 3

4. console.countReset([label])

重置计数器。

调用该方法可以使计数器的值失效，并在下次调用count时重新从1开始计数：

> console.count('abc');
abc: 1

> console.countReset('abc');

> console.count('abc');
abc: 1

countReset函数本身并没有输出。

5. console.debug(data, […args])

据MDN文档介绍，该方法应该与console.log类似，但是在Chrome控制台调用时发现该函数总是返回undefined，因此建议不要使用该方法。

6. console.dir(obj)

以一种可折叠的方式显示一个对象:


不过其实使用console.log输出对象时的格式也大同小异：

两者的差异主要在于console.dir可以显示数据类型，而console.log不显示。

Node环境下，该方法与浏览器控制台存在很大差异。此时它还可以传入一个options对象，它包含三个值，分别是

1. showHidden，是否显示不可枚举属性和符号属性，node控制台默认不显示此类属性。
2. depth，格式化对象时的递归次数，也就是对象展开深度。在Node控制台中，无法显示折叠按钮和手动展开，只能一次输出，所以需要规定对象的展开次数，默认2次。下图中，深度为3的属性没有接着展开，而是显示为{ name: [Object] }。
   
3. colors，是否对输出结果着色，默认不着色。着色规则可定制，默认效果大致如下：
   
   注意，options在浏览器控制台下是无效的。

7. console.dirxml(…data)

如果传入的是一个xml/html对象，会以对应的格式打印它，否则将按照普通javascript对象的格式打印到控制台。

8. console.error(data, […args])

输出一条错误提示。

它的第一个参数是要输出的提示信息，后续的参数可以作为它的格式化数据使用，如：

%s是一个字符串占位符，它会被替换为后续对应的参数inputValue，这种输出方式类似于c语言中常用的printf函数。

9. console.group([…label])

定义一个输出组，输出组内的输出都会默认进行缩进，如：

该函数非常适用于输出一组相关数据。

console.groupEnd()用于结束一个输出组，处在group函数和groupEnd函数之间的，都是该输出组的内容。console.group可以接受一个字符串作为标签，从截图中可以看到，默认的组名是console.group。另外，输出组可以嵌套，内部的输出组将会进一步缩进：

10. console.groupCollapsed([label])

功能与group类似，不过它定义的输出组默认是收起的，如：

11. console.groupEnd()

结束一个输出组，用法见上述截图。

12. console.info(data, […args])

现在console.info是console.log的别名，两者的输出没有差别。

13. console.log(data, […args])

向控制台输出若干个参数。允许使用格式化语法：

console.log("参数值：%s", 'carter');
> 参数值：carter

14. console.table(tabularData[, properties])

用table的方式输出一个数组或对象。比如我们现在有下面这样一个数组：

let user = [{name: "张三", age: 21},{name: "李四", age: 22},{name: "王二", age: 21},{name: "张三丰", age: 212}]

如果直接用console.log输出，未免看起来不太直观，我们就可以用console.table以表格的形式输出：

console.table(user);

结果如下：

控制台里绘制表格，就是这么容易！

函数的第二个参数用来规定表格中应该呈现哪些列，比如我们现在只需要显示name，不显示age，可以这样写：console.table(user, ['name']);

15. console.time([label])

启动一个控制台计时器。

我们之前可能一般这样来测算时间：

let startTime = (new Date()).getTime()
...
let endTime = (new Date()).getTime()
console.log(endTime - startTime);

但其实可以通过这样的代码实现：

console.time();
...
console.timeEnd();

对于精确计时，第二种方法的优势是巨大的，因为在以毫秒为单位的情况下，第一种只能精确到整数位，第二种则可以精确到小数点后十位：

如果你想比较1000次空循环和10000次空循环的性能差异，第一种方法会告诉你两者都是0毫秒（因为它只能精确到毫秒，而10000次空循环的耗时远不到1毫秒），而第二种方法会输出一个精度相当高的值。

console.time还可以接收一个字符串作为计时器的标签，用于区分不同的计时器。需要结束计时只需要给console.timeEnd()传入这个label即可。控制台最多可接受10000个计时器同时计时。

16. console.timeEnd([label])

结束计时，用法如上。

17. console.timeLog(label)

打印特定计时器的当前计时时间。

有时我们可能不一定只在计时结束时才需要知道总的计时，而是在计时的某些时间节点连续输出多组值，比如：

console.time('process');
for(var i = 0; i < 100; i++) {
  ...
  console.timeLog('process');
}
console.timeEnd('process');

这样，每次循环完毕都会输出一次计时结果。

18. console.trace([message],[…args])

打印信息及堆栈信息。

可以看到，控制台会像console.error一样输出完整的调用栈，这非常有利于定位。

19. console.warn(data, […args])

输出警告信息，如：

值得一提的是，如图，warn也会输出堆栈信息。

二、用法说明

当向函数传入多个值时，一般来说控制台会直接将它们以字符串的方式拼接并输出：

var car = "Dodge Charger";
var someObject = { str: "Some text", id: 5 }; 
console.log("My first car was a", car, ". The object is:", someObject);

 > My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})

但是当参数中含有格式化字符串时，它后面的参数将依次替换到对应的占位符中：

控制台支持以下4种格式化数据：

占位符	含义
%o 或 %O	对象类型。两者的差别为，%O会附带输出对象类型（类似console.dir），%o则不会
%d 或 %i	数值类型。可以使用类似%.2d进行精确格式化，但Chrome不支持精确格式化
%s	字符串
%f	浮点类型。同样的，在非Chrome浏览器中可以进行精确格式化

另外，控制台还允许对输出定义样式，该功能使用%c作为占位符，如：

可以看到，%c后续的所有字符串都会被应用后续定义的样式。如果你只希望对字符串中间的一部分子串应用样式可能会稍显复杂，你需要在子串结尾处再插入一个%c，然后手动将后续样式重置为默认样式：

总结

浏览器的控制台使用起来并不难，不过还是有很多小技巧相信大多数同学都没使用过，希望读完本文后，可以尝试着用起来，对提高开发效率会有很大帮助。