引言

在日常前端开发中，如果说我们那个函数用的最多，毫无疑问是console.log()，我们经常用它来调试代码，打印数据。但是console函数里面不只有这个，下面来盘点一下还有哪些比较实用的

console.table()

在前端开发中，经常会拿到一些对象数组，当我们想看这个数组有什么数据时，就要打印这个数据

console.table([
    { name: 'mach', value: 1 },
    { name: 'uses', value: 2 },
    { name: 'cur', value: 3 },
    { name: 'user', value: 4 },
    { name: 'scene', value: 5 },
    { name: 'posture', value: 6 }
])

这种就相当的清晰明显了，不仅仅结构明显，点击表格上面的索引或键还能根据值的大小前后来排序，在下面还列出了原始结构方便你查看

console.time()

在日常开发中，我们有时要知道这个逻辑运行起来要多久，这时候就可以用到这个了

console.time('time');
let num = 100
for (let index = 0; index < num; index++) {
    if(index === 99) console.log(index);
}
console.timeEnd('time')

这样子用的时间可以一目了然，也有一种方法是用performance.now()，有兴趣的可以自己玩一下

计数

const start = Date.now()
while (Date.now() - start < 20) {
    console.count('loop')
}
console.countReset('loop')
console.log('结束');

console.trace()

在日常开发中，比如经常用到组件，组件套组件有时候报错了，有时候没有报错，但是从函数本身又看不出问题，这时候就可以使用这个方法来打印这个函数的堆栈信息，看是哪里调用了这个函数报错了

function a() {
    console.trace();
}

function b() {
    a();
}

b();

打印出来的数据是这样子的

这时候函数的调用就会非常的清楚了，代码的位置也标记的很清楚，点击蓝字还可以跳转的代码位置

虽然有点花里胡哨，但是在开发中添加点乐趣也不错~