背景

相信对于广大前端er来说，对console这东西并不陌生。相信大家最常用的应该就是console.log了，实际上console提供了很多方法，可以玩出很多花样。本文将会介绍目前console提供的所有方法，希望对你有所帮助。

方法概览

console目前提供的所有方法：

loginfowarndebugerrorclearassertcountdirdirxmlgroupgroupCollapsedgroupEndtimetimeEndtimeStamptracetableprofileprofileEndmemory（这个不是方法，用于输出当前内存占用）

为了方便介绍， 我把这些方法分为几类：

常见： log, info, debug, warn, error (chrome暂不支持exception)时间： time, timeEnd (还有几种目前chrome暂不支持：timeline, timelineEnd, markTimeline, timeStamp)组合： goup, groupCollapsed, groupEnd性能： profile, profileEnd, memory对象： dir, dirxml, table其他： assert, count, clear, trace

详细介绍

1. 常见方法

这几个方法之所以归为一类，是因为它们功能很类似，都是用于在不同的场景下输出一些字符串，对象之类的信息。方法接收的参数也很一致，都可以接收字符串，对象，数组等参数。

function(message?: any, ...optionalParams: any[]): void;

如果传入的参数是字符串，可以使用通配符替换规则：

通配符替换元素类型%s字符串%d整数%i整数%f浮点数%o对象的链接%cCSS格式字符串

用法示例：

字符串，整数，浮点数console.log('姓名:%s,年龄:%d,身高:%f米', '姚明', 40, 2.3); 执行结果: 对象const profile = { name: '姚明', age: 40, height: 2.3 }; console.log('个人信息:%o', profile); 执行结果: css样式const styles = [ 'color: green', 'font-size: 16px', 'background-color: black' ].join(';'); console.log('%c%s', styles, 'test message'); 执行结果: 小区别：log, debug, info 之所以把这三个放在一起是因为他们仨几乎一模一样，硬要说区别的话，console.log输出的信息在浏览器控制台中前面会有个蓝色图标。warn, error 这两个属于输出异常，它们除了输出参数之外还会输出调用栈。warn在浏览器中会输出黄色字样并带有黄色警告图标，error会输出红色字样并带有红色叉号图标。

2. 时间

time, timeEnd 这两个方法用于计时，time在计时开始时调用，timeEnd在计时结束时调用。这两个方法都接收一个字符串作为标识(如果不穿参数，默认为default)。不同标识的计时器互不影响。console.time(); console.time('test1'); let a = 0; for(let i = 0; i < 10000; i++) { a += i; } console.timeEnd('test1'); console.time('test2'); let b = 0; for(let i = 0; i < 10000; i++) { b += i; } console.timeEnd('test2'); console.timeEnd(); 执行结果：

3. 组合

我们可以将相关联的信息组合在一起打印，用法如下：

console.group('Info'); console.log('name:', 'vic'); console.info('age: %d', 25); console.warn('test warn message'); console.groupEnd();

执行结果: group和groupCollapsed的用法一致，都配合groupEnd使用，并且接受一个字符串参数作为label信息（如果不传则默认为default）。它俩的区别就在于group打印出来的信息默认展开，而groupCollapsed打印的信息默认闭合。

4. 性能

profile方法用来新建一个性能测试器（profile），它接收一个字符串作为性能测试器的名字。你可以在控制台找到profile面板。目前支持程度较低。

通过console.profile创建测试器console.profile('test profile'); 通过profileEnd结束测试console.profileEnd();

memory是console提供的一个变量，你可以通过它来获取当前内存情况

console.memory;

执行结果:

5. 对象

table 顾名思义，这个方法可以将内容以表格形式打印输出。它接收一个可迭代对象（通常为数组）作为参数。它会自动生成主键，如果参数是一个对象或者是对象数组，那么对象的key会作为主键。如果参数是普通数组，那么会以数组下标作为主键。const data1 = [ { name: 'xiaozhi', age: 19 }, { name: 'xiaoming', age: 18 } ]; console.table(data1); const data2 = [ 1, 2, 3 ]; console.table(data2); 执行结果: dir 这个方法接收字符串或者对象作为参数，可以将对象以一种易于阅读的方式打印。虽然console.log也可以做到，但是dir()的结果更加易读，通常用来查看对象结构或者dom结构。const data = { name: 'xiaoming', age: 19, gender: 'male' }; console.log(data); console.dir(data); 执行结果: dirxml 和console.log功能基本一致，打印对象或者dom结构的时候和console.log一样。const dom = document.getElementById('head'); console.dirxml(dom); console.dir(dom); console.log(dom); 打印结果：

6. 其他

assert assert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。let a = 1; let b = 2; console.assert(a > b, 'a应该小于b'); 执行结果:count count方法会生成一个计数器，输出它被调用的次数。它接受一个字符串作为标识。console.count(); console.count('test1'); for(let i = 0; i < 10; i++) { console.count('test2'); console.count(); } console.count('test1'); 执行结果: 我们发现如果不传参数，计数器标识默认为default，不同标识的计数器之间相互不影响。通常我们可以用它来输出方法被调用次数。clear clear方法可以清空将当前控制台内的所有输出，通常用于交互操作。trace trace方法可以输出当前代码的调用栈。function a() { function b() { function c() { console.trace('%c追踪%s', 'color: red', 'test'); } return c; } return b; } a()()(); 执行结果: 我们可以发现，trace除了会输出调用路径之外，还有个有意思的东西，它接收和console.log一样的参数，同样也可以修改样式，使用字符串替换。