在console面板打印有颜色的字体

前端的同学一定都很熟悉console命令。我们经常会用到console.log()来打印一些调试信息，当然console还有其他很多妙用，如

1. console.log() 这个应该是最常用的
2. console.error() 输出错误信息 会以红色显示
3. console.assert(bool,”info”) 如果bool为false 打印出info 否则不打印
4. console.warn() 打印警告信息 会以黄色显示
5. console.info() 打印一般信息
6. ……

这里我想说的是，当我们打开百度，按下F12 console选项里会看到这样的内容

其实一开始看到这个的时候，我只是对百度的前端人员的奇思妙想感到敬佩，其他的啥也没想过，直到…我有一次查资料打开了腾讯前端团队AlloyTeam的博客，我再次看到了类似的画面

这一次我的视点放在了红色的字体上，开始想啊想，咦！怎么打印出来红色的字体，css样式放在那里呢？ 试了好久没试出个结果，去翻了下他们的源码吧，结果看到了这一句

console.log("....%c Kinvix@QQ.com \n", "color:red");

从图上看只有邮箱变红，前面的没变化
看来这个%c就是我要找的了
实验一把呗 console.log("before %c after","color:yellow");

结果就是这么喜庆，不过不能就这么完事了吧，去查查资料，得到如下结果,幸（gan）运（ga）的发现AlloyTeam上面就有这么一篇文章从console.log()说起（上）大家可以去看看。好困，睡了。