你不知道的console

平时开发过程当中咱们喜欢使用 console.log() 进行调试，在控制台打印一些字符串和JavaScript对象，然而不少人并不知道 console 还有许多其余方法和用法，能够帮助咱们更好地进行代码调试。如下截图都来自Chrome浏览器，不一样浏览器显示可能有差异。

打印文本到控制台

除了最多见的console.log()， console还支持打印其余不一样类型的信息，这些信息在浏览器控制台中会显示不一样的样式。在Chrome浏览器中能够在控制台左侧对信息进行筛选。

// 打印一条日志
console.log();

// 打印一条信息
console.info();

// 打印一条警告
console.warn();

// 打印一条错误
console.error();

// 打印一条调试
console.debug();

console.log()、console.info()、console.warn()、console.error()、onsole.debug() 这五个方法主要用来打印信息，咱们平时主要是直接将字符串或者变量做为参数进行打印，但有更多鲜为人知的用法。

打印多个对象

五个经常使用打印信息的方法能够传入多个参数，参数会被连接成一条字符串进行打印。其中打印的对象能够被展开，查看结构。

var dog={
  name: 'Happy',
  age: '18'
};

console.log('My dog\'s name is',dog.name,'. This ia a object: ',dog);

打印结果

对字符串进行替换

能够对五个打印信息方法的字符串参数内容进行替换，规则以下：

1. 第一个参数必须是字符串，替换字符必须出如今第一个参数中。
2. 第一个参数后的参数会按照顺序替换第一个参数中的替换字符。
3. 替换字符和替换后的内容在类型和数量上须要保持一致，不然不会被正确替换。

替换字符	描述
%o 或 %O	打印字符串、数字、对象或JSON数据
%d 或 %i	打印整数（小数位会被省略）
%s	打印字符串

var dog={
  name: 'Happy',
  age: '18'
};

// 替换一个字符
console.log('My dog\'s name is %o',dog.name);
// 打印 My dog's name is "Happy"

// 替换两个字符
console.log('My dog\'s age is %i,my age is %i.',18.3,20.7);
// 打印 My dog's age is 18,my age is 20.

// 错误 替换字符数量不匹配
console.log('My dog\'s age is %i,my age is %i.',18.3);
// 打印 My dog's age is 18,my age is %i.

// 错误 替换字符不在第一个参数中
console.log('My dog\'s age is 18,','my age is %i.',20.5);
// 打印 My dog's age is 18, my age is %i. 20.5

对打印内容定义样式

对输出内容定义样式恐怕是最好玩的用法了。
相似字符串替换，能够在第一个字符串参数中使用%c,后续参数内写CSS样式，每一个%c后的字符串都会应用后续参数中的样式。

// 给字符串添加各类样式
console.log(
  '%cHappy',
  'padding: 4px 8px; font-size: 56px; line-height: 1.5; font-weight: 800; border-radius: 16px; background: red; text-shadow: 4px 4px 0 blue'
);

// 甚至能够给多段字符分别添加样式
console.log(
  '%cHappy %cDog',
  'color: pink','color: yellowgreen'
);

// 甚至经过设置背景图打印图片
console.log(
  '%c ',
  'padding-left:200px;padding-bottom: 100px; background: url("https://picsum.photos/200/100") no-repeat center'
);

打印有嵌套结构的信息

能够经过console.group()和console.groupEnd()方法输出嵌套结构的信息，在代码嵌套比较复杂的时候能够输出比较清晰的信息。

// 为了看的更清楚，我对代码进行了缩进

console.log('level1')

  console.group()
    console.log('level2')
    
      console.group()
        console.log('level3')
      console.groupEnd()
      
    console.log('back to level2')
console.groupEnd()

console.log('back to level1')

定时器

经过console.time()方法能够建立一个定时器，该方法能够接受一个惟一的字符串做为标识。能够经过调用console.timeLog()获取时间，最后经过console.timeEnd()移除定时器并返回一个以毫秒为单位的时间。经过这三个方法能够比较方便的计算特定操做的持续时间。

console.time('bark');
alert('wang!wang!')
console.timeLog('bark');
alert('wang!wang!');
console.timeEnd('bark');

根据条件判断打印信息

console.assert()方法第一个参数接受一个布尔表达式，若是为假值则打印后续的参数,并会做为错误信息打印。若是为真值，则不打印信息。

var a=7;

console.assert(a<0,'you are error.');

打印表格

将对象和数组以表格打印出来是很是有用的，console.table()方法能够作到。该方法接受一个对象或数组做为参数，若是是对象，表格第一列是键名，第二列是值。若是参数是数组，第一列则是索引值，第二列是项。若是对象和数组存在嵌套，表格会增长列来显示。也能够经过第二个参数来选择要显示出的子集；

var dog={
  name: 'Happy',
  age: '18'
};

console.table(dog);

堆栈跟踪

console.trace()方法能够打印调用栈。

function foo(){
  function bar(){
    function baz(){
      console.trace();
    }
    baz();
  }
  bar();
}

foo();

计数器

console.count()方法接受一个参数做为标识初始化一个计数器，console.countReset()接受参数做为标识，重置这个计数器。

console.count('bark');
console.count('bark');
console.count('bark');
console.countReset('bark');
console.count('bark');

清屏

console.clear()能够清除控制台信息。

参考文献

Web API接口 console