这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

前言

继《你真的会用 Chrome 吗 —— Command 篇》之后，我们再来看看 Console 会给我带来什么惊喜。比起 Command，console 的“知名度”可高多了，console.log() 哪个前端没用过啊。嗯，不知道你们平常在用 console 的时候有没有注意到，console 竟还是个大家族？！

console 的家族成员

输出提示信息：console.info/error/warn/debug

除了我们用得最多的 console.log，往控制台输出信息的方法还有 error、warn、info、debug，每一个结果在日志中都有不同的样式，便于开发者识别信息级别。info 和 debug 跟 log 看起来好像差不多？开发中可以根据实际场景进行选用。

console.error('this is an error log')
console.warn('this is a warn log')
console.log('this is a normal log')
console.info('this is an info log')
console.debug('this is a debug log')

输出结果：

console 面板左侧有对应的日志筛选功能，可以筛选出感兴趣的日志信息。

输出对象：console.dir

用于在控制台中打印出对象的所有属性和属性值，并以树形结构展示。打印 普通JS对象时，console.dir 表现与 console.log 相当；但在打印DOM 对象时，console.dir 能更清晰的看到 DOM 对象的属性情况：

断言：console.assert

断言为false，则将一个错误消息写入控制台（但不会中断代码的执行）。如果断言是 true，不输出任何内容。

注意：node v10.0.0 之前的版本，断言为 false 将会导致一个 AssertionError 被抛出，使得代码执行被打断。v10.0.0 修复了此差异。

使用示例：

//偶数断言
const errorMsg = 'the # is not even';
for (let number = 2; number <= 5; number += 1) {
    console.log('the # is ' + number);
    console.assert(number % 2 === 0, {number, errorMsg});
}

输出结果：

CP 组合1 —— 计时器：console.time & conosle.timeEnd

console.time 和 conosle.timeEnd 成对使用，在需要测试代码执行时长时， time CP 组合不失为一个选择。

比如，测试 for 循环和 while 循环的执行效率：

let i;
console.time("for 循环测试");
for (i = 0; i < 100000; i++) {
  // 
}
console.timeEnd("for 循环测试");
 
i = 0;
console.time("while 循环测试");
while (i < 1000000) {
  i++
}
console.timeEnd("while 循环测试");

输出结果：嗯，看来 for 循环比 while 循环好使哎~

CP 组合2 —— 性能分析：console.profile & conosle.profileEnd

如果需要知道某段代码的执行时间，console.time 就可以了，但对于逻辑较为复杂的代码，大量插入console.time 去进行分析好像不太优雅。console 还提供了另一组 CP：console.profile & conosle.profileEnd，它们可以用于分析代码各部分的运行时间，更便捷地找出瓶颈所在，是性能分析的好帮手哦。

function doTask(){
    doSubTaskA(1000);
    doSubTaskB(10000);
    doSubTaskC(1000,10000);
}
function doSubTaskA(count){
    for(let i=0;i<count;i++){}
}
 
function doSubTaskB(count){
    for(let i=0;i<count;i++){}
}
 
function doSubTaskC(countX,countY){
    for(let i=0;i<countX;i++){
        for(let j=0;j<countY;j++){}
    }
}
console.profile('TEST_1');
doTask();
console.profileEnd('TEST_1');

运行结果： 从分析面板我们可以看到，在程序执行中耗时最多的任务是 doSubTaskC ，执行时间为 188.5 毫秒，占总耗时的 92.31%。

啥？你没有 Profile 面板、不知道哪里找？嗯，上一章 Command 的知识就派上用场了：Ctrl + Shrif + P，输入 profile，找到了吧~

CP 组合3 —— 分组输出：console.group & conosle.groupEnd

console.group 和 conosle.groupEnd 成对使用，用于将输出信息分组输出。console.group 定义起始位置，该位置之后的所有信息将写入分组；conosle.groupEnd 定义结束位置，该位置之后不再写入分组。

console.log('这是在分组外的输出信息')
console.group('这里开始分组')
console.log('分组内的信息 1111111111')
console.log('分组内的信息 222222222222')
console.log('分组内的信息 333333333333')
console.groupEnd('这里结束分组')
console.log('这是在分组外的输出信息')

输出结果：

---

好了，今天的内容先到这里。console 家族太大了，一下子全部说完有点费时间，明天咱们再去继续认识一下花里胡哨的 console 家族成员（狗头）。