Console没那么简单

背景

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

方法概览

console目前提供的所有方法：

• log
• info
• warn
• debug
• error
• clear
• assert
• count
• dir
• dirxml
• group
• groupCollapsed
• groupEnd
• time
• timeEnd
• timeStamp
• trace
• table
• profile
• profileEnd
• memory（这个不是方法，用于输出当前内存占用）

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

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

详细介绍

1. 常见方法

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

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

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

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

用法示例：

• 字符串，整数，浮点数

  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一样的参数，同样也可以修改样式，使用字符串替换。