前端 console 输出分类

87 阅读1分钟

对象数组输出

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

image.png

分组输出

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

image.png

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

image.png

对象结构输出

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

image.png

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

image.png

计时

console.time('loop')

const start = Date.now()
while(Date.now()-start<2000){}

console.timeEnd('loop')
image.png

计数

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

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

console.countReset('loop')

image.png

输出堆栈信息

function b(){
    console.trace()
}

function a(){
    b()
}

a()

image.png

断言

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

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

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

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

image.png

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

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

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

image.png

打印警告信息

console.warn("warn")

image.png

打印错误信息

console.error('error')

image.png

消息清空

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

image.png

添加样式

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

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

image.png