你不知道的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. 替换字符和替换后的内容在类型和数量上需要保持一致，否则不会被正确替换。

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

收藏

喜欢 0