Goole的一些使用方法及控制台的使用技巧

Console 面板

一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），、
另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools 等进行交互

组合快捷键按键:
Windows: Control + Shift + J
Mac: Command + Option + J

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

1.console.clear()

顾名思义，清空控制台
console.log(), info(), warn(), error()
日常用的比较多的就是这几个了，其中 log 和 info，=，info 输出的内容前面是有一个蓝色背景的小圈, 大概跟这个差不多: i，后来 chrome 更新就没了(IE 还是可以看出差别的)

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

2.使用占位符

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

其余的占位符列表还有：

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

3.console.time(), timeEnd()

time 和 timeEnd 一般放在一起用，传入一个参数用来标识起始位置用于统计时间:
console.time('t')
Array(900000).fill({}).forEach((v, index) => v.index = index)
console.timeEnd('t')
// t: 28.18603515625ms
会打印出中间代码的执行时间

4.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

5.console.trace()

用于追踪代码的调用栈，不用专门断点去看了
console.trace()
function foo() {
  console.trace()
}
foo()

6.console.table()

console.table()方法可以将复合类型的数据转为表格显示
var arr = [
  { name: '梅西', qq: 10 },
  { name: 'C 罗', qq: 7 },
  { name: '内马尔', qq: 11 },
]
console.table(arr)

7.console.dir()

按便于阅读和打印的形式将对象打印
var obj = {
  name: 'justwe7',
  age: 26,
  fn: function () {
    alert('justwe7')
  },
}
console.log(obj)
console.dir(obj)

打印 DOM 对象区别：

8.console.assert()

断言，用来进行条件判断。当表达式为 false 时，则显示错误信息，不会中断程序执行。
可以用于提示用户，内部状态不正确（把那个说假话的揪出来）

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

9.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()