浏览器的console

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

// 1. 利用对象的键和值相同

let a = 1, b = 2, c = 3

console.log({a, b , c})

// 2. %c 修改输出样式

const styleRule = `font-size: 75px; font-weight: blod; background: #0087fa; color: #1772f6;
text-shadown: 3px -3px #ffffff, 3px -3px 6px black; padding: 8px 25px; `

console.log('%cHello World%c', styleRule, "") // 第三个参数为空, 对应第二的%c, 清除样式

// 3. 更多的console方法

console.log(console)

// 4. 日志 debug error warn info, 可以在控制台进行筛选

console.debug('debug info')
console.error('error info')
console.warn('warn info')
console.info('info info')

// 5. 断言

console.assert(1 === 2, '1 is not equal to 2') // 为假时, 输出错误信息

// 6. table 可以展示对象和数组

console.table([1,2,3])
console.table({a: 1, b: 2, c: 3})
console.table([{a: 1, b: 2, c: 3}, {a: 4, b: 5, c: 6}])


// 7. trace 追踪函数调用

function a1() {
    console.trace('trace info')
}

function b1(fn) {
  setTimeout(fn, 500)
}

function c1() {
  (() => { b1(a1) })()
}

c1()

// 8. count 统计函数调用次数 countReset 重置

for (let i = 0; i < 10; i++) {
  console.count('i')
}

console.countReset('i')

// 9. time 计时 timeLog 记录时间 timeEnd 结束计时
// 精度比new Date() 高

console.time('time')
for (let i = 0; i < 10; i++) {
  console.timeLog('time', i)
}
console.timeEnd('time')