前端的同学一定都很熟悉console命令。我们经常会用到console.log()来打印一些调试信息,当然console还有其他很多妙用,如
- console.log() 这个应该是最常用的
- console.error() 输出错误信息 会以红色显示
- console.assert(bool,”info”) 如果bool为false 打印出info 否则不打印
- console.warn() 打印警告信息 会以黄色显示
- console.info() 打印一般信息
- ……
这里我想说的是,当我们打开百度,按下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()说起(上)大家可以去看看。好困,睡了。