高效前端：使用chrome的devTools

1、打印console

1.1 使用console.table

使用console.table可以将一个数组展开之后在控制台输出

let obj = [{
        key1: '12',
        key2: '12',
        key3: '12',
        key4: '12',
        key5: '12',
        key6: '12',
        key7: '12',
    },
        {
            key1: '12',
            key2: '12',
            key3: '12',
            key4: '12',
            key5: '12',
            key6: '12',
            key7: '12',
        }
    ];
    console.table(obj)

相比于console.log的需要层层打开，console.table更加直观

1.2 使用console.dir

console.dir可以用来解决这样一个问题：
对于获取到的dom元素，如果直接使用console.log输出，会使这样的一条记录：

但是如果我们需要查看这个dom元素的内部的一些属性什么的，可以使用console.dir输出，结果是这样的：

是一个可以展开的对象

1.3 输出带有样式的内容

使用%c可以将其之后的内容带样式输出：

console.log('this is %c text with style ','background:yellow;color:green')

显示为：

2、使用debugger进入调试模式

在程序中加入debugger，当程序执行到debugger这一步时，就会自动进入断点调试模式。

<script>
    let img=document.querySelector('.img');
    debugger;//进入断点
    console.log('this is %c text with style ','background:yellow;color:green;font-size:30px');
</script>

页面显示：