你不知道的console命令

前端开发者通常使用console.log进行调试，其实console对象不止有log函数，还有许多其他的函数可以方便我们对数据进行调试。

log、debug、info、warn、error

区别：这几个的差别在于输出的样式不同

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

左边的选择框（黄色)一一对应右边的信息(绿色）

分组group

将数据进行分组输出

let test = '测试'
console.group(test) //这样写默认会展开
console.log('a')
console.log('b')
console.log('c')
console.groupEnd(test)

let test2 = '第二次测试'
console.group(test2) // -> console.groupCollapsed(test2)如果换成这句那么就不会默认展开
console.log('a')
console.log('b')
console.log('c')
console.groupEnd(test2)

输出元素的对象结构

用于查看元素的属性

console.log(document.body)
console.dir(document.body)

计时

一般用于测试程序执行的时，可以进行一些性能分析，如下例子：可以知道10W次循环需要划分多少时间

console.time('计时')
for (let i = 0; i < 100000; i++) {}
console.timeEnd('计时')

计数

用于计数，输出它被调用了多少次。如下例子:可以知道10ms内可以输出多少次。

const start = Date.now();
while(Date.now() - start < 10) {
    console.count('loop') // 调用一次，计数就加一次
}
console.countReset('loop') //计数清零

堆栈-追踪函数的调用

作用:console.trace可以追踪函数的调用轨迹
这里console.trace被函数b调用，函数b被函数a调用，函数a被全局对象调用。这里可以看出函数的调用轨迹。

function b() {
  console.trace()
}
function a() {
  b()
}
a()

断言-校验

console.assert这个可以校验你的值是否正确，不正确，第二个参数可以作为提示信息

function sum(a,b) {
    return a * b
}
console.assert(sum(1,2) === 3, '计算错啦')

清空打印信息

console.clear()

带样式的console.log

第一个参数前面必须带上%c才可以，第二个参数就是样式，带样式可以方便我们查看某个输出日志。

let style = `border: 2px solid;
             color: red;`
console.log('%c我是测试啊', style) //必须带上%c

以上就是console对象的函数介绍啦，不同的函数可以作用在不同的场景，大家灵活运用就好啦。