Chrome DevTools 面板之console全面解析

 

1.首先看一下 console 对象下面都有哪些方法:

 

 

 

清空控制台：console.clear() 

 

console.log('普通信息')
console.info('提示性信息')
console.error('错误信息')
console.warn('警示信息')

日常用的比较多的就是这几个了，其中 log 和 info，印象中在 2016 年之前老用 info 打印，还是有区别的，info 输出的内容前面是有一个蓝色背景的小圈, 大概跟这个差不多: i，后来 chrome 更新就没了(IE 还是可以看出差别的)

 

使用占位符

// 支持逗号分隔参数，不需要每个参数都单独打印
console.log(1, '2', +'3')
// 占位符
// %s 
console.log('今晚%s 老虎', '打', '？？？')
// %c 
console.log('今晚%s%c 老虎', '打', 'color: red', '？？？')
// 带有占位符的参数之后的若干参数属于占位符的配置参数

其余的占位符列表还有：

占位符	功能
%s	字符串
%d	整数
%i	整数
%f	浮点数
%o	对象的链接
%c	css 格式字符串

console.time(), timeEnd()

time 和 timeEnd 一般放在一起用，传入一个参数用来标识起始位置用于统计时间:

console.time('t')
Array(900000).fill({}).forEach((v, index) => v.index = index)
console.timeEnd('t')
// t: 28.18603515625ms

会打印出中间代码的执行时间

console.count()

顾名思义。。计数,可以用来统计某个函数的执行次数，也可以传入一个参数，并且根据传入的参数分组统计调用的次数

function foo(type = '') {
  type ? console.count(type) : console.count()
  return 'type：' + type
}

foo('A') //A: 1
foo('B') //B: 1
foo()    //default: 1
foo()    //default: 2
foo()    //default: 3
foo('A') //A: 2

console.trace()

用于追踪代码的调用栈，不用专门断点去看了

console.trace()
function foo() {
  console.trace()
}
foo()

console.table()

console.table()方法可以将复合类型的数据转为表格显示

var arr = [
  { name: '梅西', qq: 10 },
  { name: 'C 罗', qq: 7 },
  { name: '内马尔', qq: 11 },
]
console.table(arr)

console.dir()

按便于阅读和打印的形式将对象打印

var obj = {
  name: 'justwe7',
  age: 26,
  fn: function () {
    alert('justwe7')
  },
}
console.log(obj)
console.dir(obj)

打印 DOM 对象区别：

console.assert()

断言，用来进行条件判断。当表达式为 false 时，则显示错误信息，不会中断程序执行。

可以用于提示用户，内部状态不正确（把那个说假话的揪出来）

var val = 1
console.assert(val === 1, '等于 1')
console.assert(val !== 1, '不等于 1')
console.log('代码往下执行呢啊')

console.group(), groupEnd()

分组输出信息，可以用鼠标折叠/展开

console.group('分组 1')
console.log('分组 1-1111')
console.log('分组 1-2222')
console.log('分组 1-3333')
console.groupEnd()
console.group('分组 2')
console.log('分组 2-1111')
console.log('分组 2-2222')
console.log('分组 2-3333')
console.groupEnd()

转载自：https://juejin.im/post/5f1542e16fb9a07e6f7b80fe