前端 console 输出分类

对象数组输出

console.table([{
    name:"zhangsan",
    age:11
},{
    name:"lisi",
    age:12
},{
    name:"lisi",
    age:12,
    sex:'man'
}])

分组输出

console.group('g1')
console.log('info1')
console.log('info2')
console.log('info3')
console.groupEnd()

console.group('g2')
console.log('info4')
console.log('info5')
console.log('info6')
console.groupEnd()

此外，使用console.groupCollapsed('xxx')分组信息将会默认折叠

对象结构输出

console.log(document.body)默认输出代码

而使用console.dir(document.body)将会输出对象结构

计时

const start = Date.now()
while(Date.now()-start<20){
    console.count('loop')
}

console.countReset('loop')

计数

注：console.countReset('loop')作用为重置计数器

const start = Date.now()
while(Date.now()-start<20){
    console.count('loop')
}

console.countReset('loop')

输出堆栈信息

function b(){
    console.trace()
}

function a(){
    b()
}

a()

断言

传入一个布尔表达式，当表达式为真时，不会输出任何信息，表达式为假时，将会报错

function sum(a,b){
    return a + b
}

console.assert(sum(1,2)===3)

此时表达式为真，不会报错

function sum(a,b){
    return a * b
}

console.assert(sum(1,2)===3)

此时表达式为假，将会报错

打印警告信息

console.warn("warn")

打印错误信息

console.error('error')

消息清空

console.clear() 清空控制台消息

添加样式

注意：要在文本开头加上%c

const style = `
    color:red;
    border:1px solid
`
console.log('%ctext',style)