添加个性化信息,定制你的Console控制台

2018年3月2日 0 条评论 2.63k 次阅读 0 人点赞

前言

现在的浏览器都有开发者工具(F12),其中有一个相当重要的面板——Console,用它可以实现查看错误信息、打印调试信息、调试JavaScript代码等功能,我们可以用Console备注一些特殊信息或者彩蛋,比如百度、知乎、京东、豆瓣等许多网站的Console里都有他们的招聘信息,有兴趣可以自行前往打开控制台查看。
知乎-哪些网站有着一些有趣的 console.log 信息?

添加Console信息

可以在head之间添加,也可以另外写一个.js文件再引入,如果需要换行或添加文字样式,可以参考如下提供的方法:
\n可以用来换行,%c用来标记之后的内容使用对应样式,例如:console.log("%c内容1%c内容2","CSS1","CSS2");,还可以用background:url(...)插入图片、用text-shadow:...加入文字阴影等,比如超级课程表的就是一个聊天图片...

head中添加

注意一下warninfologerror可以分别对应不同的形式控制台信息,但其中info在Chrome里是不显示样式的

添加3D文字和ASCII图片

如果观察的多了你会发现,比如像知乎这样的是3D文字,还有一些网站的是字符串形式的图片,怎么添加呢,可以访问如下地址
文字ASCII码生成,推荐isometric和larry3d字体,但不支持汉字图片转ASCII码

添加3D文字

虽然网页上显示出来文字是错位的,但在编辑器和Console里实际显示还是正常的,核心代码
return f.toString().replace(/^[^\/]+\/\*!?\s?/, '').replace(/\*\/[^\/]+$/, '');
由于ASCII码图片是由很多个字符组成的像素点,往往会因为图片过宽过长而显示不正常,因此并不推荐使用,下面是我成功的一个例子,丑照献上

本站控制台在各浏览器下的测试

目前只有Safari下的3D文字显示错位
Chrome,刮一刮彩虹有文字噢

Firefox

IE+Edge

Hungway

If not me,who?If not now,when?