OMG！原来小小的打印也能有这么多花样！

众所周知，console是一个用于调试和记录的内置对象，提供了多种方法帮助开发者输出各种信息，帮助调试和分析，可以说是开发者的左膀右臂了。本期就来一起学习下这个神奇的console!

console.log():这个大家应该都很熟悉，用于输出一般信息；

console.info():输出信息，和console.log类似，不过在某些浏览器里可能有不同的样式；

console.warn():输出警告信息，通常会以黄色背景或带有警告图标的样式显示；

console.error():输出错误信息，通常会以红色背景或带有错误图标的样式显示；

console.table():以表格的形式输出数据，适用于数组和对象；

但是，当一个项目越来越大，输出信息越来越多的时候，我们会发现，打印的信息太多了，辨识度不高，很难找到我们自己当时需要的那一条打印信息，怎么办呢？好说！现在我们可以通过设置css样式来提高打印的辨识度，快速定位信息！

你知道吗，console.log（）可以接受任何类型的参数，包括字符串，数字，布尔值，对象，数组，函数等等，最厉害的是，他还支持占位符！

常用占位符：

%s ： 字符串

%d or %i ：整数

%f：浮点数

%o：对象

%c：css样式

 

console.log支持类似于C语言printf函数的格式化字符串，我们可以使用占位符来插入变量值。

 我们可以在VScode的设置-用户代码片段-新建全局代码片段文件 里输入下面代码，实现定制化console！快速找到你想要的信息！

{
  "Print to console": {
    "prefix": "gg",
    "description": "console.log",
    "body": [
      "console.log('%c $1','background-color:pink;color:#fff;padding:5px;border-radius:5px',$1);"
    ]
  }
}

prefix：设置你想要的召唤密码，比如说我设置了'gg'这个召唤密码，我只要在项目的任意位置输入'gg'，按下回车键，即可实现快速打印。

而body里面的CSS样式相信大家都不陌生，这里就是定制化你想要的console的颜色等样式，帮助我们快速找到打印目标

console.log('%c 输入打印的信息特定名称','background-color:pink;color:#fff;padding:5px;border-radius:5px',输入打印的内容);

当然，除此之外，我们还能通过插件 Turbo Console Log 实现快速打印！

使用方法：先选中你想打印的变量，再通过 ctrl + alt + L  快捷键快速生成console.log() （这个快捷键与锁住QQ的快捷键冲突，建议使用的时候先修改）（支持多选插入）

另外，使用alt + shift + c 一键注释掉所有的console.log；
alt + shift + u 一键启动所有的console.log;
alt + shift + d 一键删除所有的console.log；

注：这里的注释，启动，删除都是针对该插件生成的console.log，自己写的不会起作用。