console中的打印(支持颜色、表格等)

发布于 2020-09-29  151 次阅读 本文共914个字


我们很多时候需要在浏览器中去高效预览某些数据,最近我就是,所以这里顺便分享给大家~

颜色:

复制下边这段代码,打开你的控制台查看效果

console.log('%c hello world','color:#0f0;')

当然,你也可以添加多段处理,就像这样:

console.log('%c hello %c world %c 你好 %c 世界','color:#ccc;','font-size:30px;','color:#f00;background:yellow;', 'color:pink')

上边的这俩栗子都看到了,用%c来分割出需要输出的字符,后边再对应给出每段字符相应的css样式就可以了。

console有五种形式,当然都可以用哦~:

  • console.log
  • console.info
  • console.debug
  • console.warn
  • console.error

表格:

同样,复制下边这段代码你可以去控制台查看效果:

console.table([['第一行第一列','第一行第二列','第一行第三列'],['第二行第一列','第二行第二列'],['第三行']]);

分组(树状图):

console.group('分组1');
  console.log('1.1');
  console.log('1.2');
  console.group('分组2');
    console.log('2.1');
    console.log('2.2');
    console.log('2.3');
  console.groupEnd('分组2');
console.groupEnd('分组1');

DOM节点:

下边这俩展示效果不一样,可自行预览

console.log('%o',document.body);
console.log('%0',document.body);

记时:

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

当然,你也可以传参:

console.time('a');
console.time('b');
console.timeEnd('b');
console.timeEnd('a');

像上边这个参数,a和a匹配,b和b匹配,明显a的总时长肯定比b长。


努力,只为遇见更好的自己!