杰生活
记录点滴

小技巧-添加个性化的Console

现在的浏览器都有开发者工具(F12呼出),其中有一个相当重要的面板——Console,用它可以实现查看错误信息、打印调试信息、调试js代码等功能。我们可以用Console备注一些特殊信息或者彩蛋。

知名站点的Console

“百度”应该是国内日常使用量数一数二的网站,但是不知道多少人注意过它的Console,在baidu.com页面下按F12,可以看到其隐藏的招聘信息。另外天猫、京东、斗鱼、知乎等知名网站,在他们的Console也有不同的信息展示,大家如果好奇,可以前去查看一番 :mrgreen:

知名站点的Console

添加Console

其实想要添加一个Console很简单,只需在你想要展示的页面内包含以下内容即可(想要全站显示,可以放到head内)

这样在前端Console中输出的信息就是展示内容这些纯文字内容。想要更加的个性化,需要CSS的支持,好在现代浏览器已经支持部分CSS样式在Console内的应用。

\n可以用来换行;%c用来标记之后的内容使用对应样式,格式:console.log("%c内容1%c内容2","CSS1","CSS2");

示例:

输出效果如下

输出示例

是不是很简单,可用的格式符和CSS不止这些,比如可以用background:url(...)插入图片、用text-shadow:...加入文字阴影等等,利用好的话可以做到非常高大上。

您可以转载,但请注明作者及原文链接:JIElive » 小技巧-添加个性化的Console

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下吧

微信扫一扫打赏

支付宝扫一扫打赏