前端控制台打印技巧--console

搬运原视频：www.bilibili.com/video/BV1ac…

输出信息

console.log('打印')
console.info('信息')
console.warn('警告')
console.debug('断点')//edge、火狐支持，chrome不支持
console.error('错误')

将数据以表格的形式显示

console.table({first:'华为',age:'2022',nation:'china'})
console.table(['aaa','bbb','ccc'])

控制台自动展开对象和数组

<template>
    <div>
        <button @click="handler">点击</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list: ["上海", "重庆", "北京", "杭州", 4],
              obj: {
                first: "苹果",
                seconds: "华为",
                third: "三星",
              },
        }
    },
    methods:{
        handler(){
            console.log(JSON.parse(JSON.stringify(this.obj)))
            console.log(JSON.parse(JSON.stringify(this.list)))
        },
    }
}
<script/>

分组打印

console.group('对象:')
    console.log(JSON.parse(JSON.stringify(this.obj)))
console.group('数组:')
    console.log(JSON.parse(JSON.stringify(this.list)))

将一个错误消息写入控制台

 console.assert(1 === "1", "1 === '1',不相等"); //false输出
 console.assert(1 === 1, "1 === ,1相等"); //true不输出

打印执行时间

<template>
    <div>
        <button @click="hanlderTime">点击</button>
    </div>
</template>
<script>
export default {
    methods:{
        hanlderTime(){
          this.doSomething1(1000);
          this.doSomethingName(2000);
        },
        doSomething(ms) {
          console.time();//不定义名字，默认打印为default：
          return setTimeout(() => {
            console.timeEnd();//default: 1010.927978515625 ms
          }, ms);
        },
        doSomethingName(ms) {
          console.time('time');//定义time，打印为time：
          return setTimeout(() => {
            console.timeEnd('time');//time: 2011.64111328125 ms
          }, ms);
        },
    }
}
<script/>

设置打印样式

// %c 后的文本：设置样式的文本
console.log(
    "%cmylib",
    "background:green;color:#fff;padding:5px;",
    "lalala"
);
console.log(
    "%cmylib%cv1",
    "background:green;color:#fff;padding:5px;",
    "border-raduis:0 5px 5px 0;background:blue;color:#fff;padding:5px;",
    "lalala"
);