前端培训丁鹿学堂：console进阶使用指南

相信很多前端的小伙伴们都对console.log很熟悉了。

开发过程中的调试少不了这个。但是console还有一些比较有趣的用法，可以帮助我们更好的debug，提高开发效率。

1. 输出带颜色的console

因为很多时候我们打印的东西太多，没有办法去一下子看出来哪个是我们要的。输出醒目的console内容，有时候有奇效。

vscode下载插件 ：console helper， 选中想要打印的变量，ctrl + l 即可实现，方便的很

代码：

    <script> 
     var a = 100
     console.log('%c [ a ]-12', 'font-size:13px; background:pink; color:#bf2c9f;', a)
    </script>

输出变量a，在代码12行， a的值是100

是不是很好用？

2. 测试代码运行时间

console.time() 和console.timeEnd()搭配使用，可以查看一段代码的运行时间

    <script> 
     console.time()
     var num = 0
     for(var i =0;i<1000;i++){
        num += i
     }
     console.log(i);
     console.timeEnd()
        
    </script>

3 打印表格 console.table()

打印对象或者数组的时候使用此方法，可以更清晰直观

    var obj = {
        name:'zhangsan',
        age:18,
        add:'china- 成都',
        tel:18888888888
    }
    console.log(obj)
    console.table(obj)