Chrome 控制台调试打印之 console 花式调试大全

输出信息

console.log('默认消息！')
console.info('提示消息！')
console.error('错误消息！')
console.warn('警告消息！')

数据表格式化 – table

const data = [
  {
    id: 1,
    name: 'Node',
    description: 'node.js'
  },
  {
    id: 2,
    name: 'React',
    description: 'react.js'
  },
  {
    id: 3,
    name: 'Vue',
    description: 'vue.js'
  },
  {
    id: 4,
    name: 'Angular',
    description: 'angular.js'
  }
]
console.table(data)

代码执行时间

console.time('统计时间');
let count = 0;
for (let i = 0; i < 999999999; i++) {
  count++;
}
console.timeEnd('统计时间');

Output：统计时间: 1997.586181640625 ms

信息分组输出

console.group('前端');
console.log('前端-react.js');
console.log('前端-vue.js');
console.log('前端-angular.js');
console.groupEnd();

console.group('后端');
console.log('后端-java');
console.log('后端-python');
console.log('后端-php');
console.groupEnd();

console.groupCollapsed(label)

该函数同console.group()，唯一的区别是该函数的输出默认不展开分组，而console.group()是默认展开分组。

代码执行次数

function countFn() {
  console.count('当前执行的次数');
}
countFn();
countFn();
countFn();
countFn();
countFn();

按条件断言输出

const flag = false;
console.assert(flag, '当 flag 为 false 时才输出！');

对象以树状结构输出

const obj = {
  node: 'node.js',
  react: 'react.js',
  vue: 'vue.js',
  angular: 'angular.js'
}
console.dir(obj);

展示节点信息

console.dirxml($('.el-dialog__wrapper'));

占位符

console.log("%d年%d月%d日", 2016, 8, 22); // console支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）
console.log("%s年",2016);//%s表示字符串
console.log("%d年%d月",2016,11);//%d表示整数
console.log("%f",3.1415926);//%f小数
console.log("%o",console);//%o表示对象
console.log("%c自定义样式","font-size:30px;color:#00f");
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-size:10px;color:red");

console.trace()

该函数将在控制台打印出从 console.trace() 被调用的位置开始的堆栈信息。

function doTask() {
  doSubTask(1000, 10000);
}

function doSubTask(countX, countY) {
  for (var i = 0; i < countX; i++) {
    for (var j = 0; j < countY; j++) { }
  }
  console.trace();
}
doTask();

模拟 loading 动画

function print(len) {
  let oldStr = '';
  for (let i = 0; i < len; i++) {
    setTimeout(() => {
      oldStr = oldStr + ' ';
      console.log(oldStr + '%c...', 'color:green;font-size:20px');
      _.delay(() => { console.clear(); }, 500)
    }, 700 * i);
  }
}

print(10);

copy

通过此命令可以将在控制台获取到的内容复制到剪贴板。

copy(document.body)