引言
在日常前端开发中，如果说我们那个函数用的最多，毫无疑问是console.log()，我们经常用它来调试代码，打印数据。但是console函数里面不只有这个，下面来盘点一下还有哪些
console.debug()
这个也是打印信息，不过console.log()打印的只是普通信息，它打印的是调试信息，只是分类不一样
console.debug(1221) //1221console.info()
这个也是打印信息，分类不一样，但是在某一些浏览器样式不一样，比如safari
console.info(1221) //1221console.table()
在前端开发中，经常会拿到一些对象数组，当我们想看这个数组有什么数据时，就要打印这个数据
console.log([
{ 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.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 }
])
这种就相当的清晰明显了，不仅仅结构明显，点击表格上面的索引或键还能根据值的大小前后来排序，在下面还列出了原始结构方便你查看
分组打印
在大面积排错时，经常遇到要打印很多数据，且打印的东西也不一样，会看的很难受，这个分组就很好的解决了这个问题
const label = '分组一';
console.group(label); //开启分组
console.log(12);
console.log(34);
console.log(56);
console.groupEnd(label) //关闭分组
点击分组左边的三角形还能展开折叠，如果想要一开始就折叠，可以使用这个
const label = '分组一';
console.groupCollapsed(label); //开启分组并折叠
console.log(12);
console.log(34);
console.log(56);
console.groupEnd(label) //关闭分组
这样子在打印的数据多时就可以尽量保持整洁
console.dir()
这个在开发时也经常遇到，有时候想看数据结构时，直接使用console.log()是打印不出来的，这时候这个就派上用场了，比如，这时候打印一个函数
function fn(){
console.log(123);
}
fn.abc = 1;
console.log(fn);
就只能看到它的值，这时候如果用上这个
function fn(){
console.log(123);
}
fn.abc = 1;
console.dir(fn);
它就能把这个函数的数据结构给展现出来，也可以打印页面的元素
console.log(document.body);
它的数据结构是这样子的
console.dir(document.body);
下面还有很多结构，感兴趣的可以自己尝试一下
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()
let n = 0
while (Date.now() - start < 20) {
console.log(n+=1);
}
console.log('结束');
可以看到这个循环运行了48次，下面是第二种方法
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();打印出来的数据是这样子的
这时候函数的调用就会非常的清楚了，代码的位置也标记的很清楚，点击蓝字还可以跳转的代码位置
断言：console.assert()
判断一个函数的功能是否正常，布尔值表达
function sum(a, b) {
return a + b;
}
console.assert(sum(1, 2) === 3)如果这个函数的功能正常，就不会打印任何东西，如果测试失败了，就会打印出错误信息
打印警告：console.warn()
在开发中很少用到，打印什么就会警告什么，还会显示堆栈信息
console.warn('注意：这个方法不能多用');
打印错误：console.error()
跟上面一样，在开发中很少用到，打印什么就会提示什么错误，还会显示堆栈信息
console.error('注意：这个方法不能多用');
清空消息：console.clear()
就是把这个之前的打印信息全部清空掉
console.log(121212);
console.clear();
console.log(12121);
打印样式
这个就比较好玩了，给打印消息添加样式
const style = `
padding:10px;
background-color:red;
`
console.log('%c给打印添加样式', style);而它的结果是这样子的
虽然有点花里胡哨，但是在开发中添加点乐趣也不错
好啦，下班~