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

知名站点的Console

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

知名站点的Console信息

添加Console

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

<script>
    console.log("展示内容1");
    console.log("展示内容2");
    console.log("展示内容3");
</script>

这样在前端Console中输出的信息就是 展示内容这些纯文字内容。想要更加的个性化,需要CSS的支持,好在现代浏览器已经支持部分CSS样式在Console内的应用。
\n可以用来换行; %c用来标记之后的内容使用对应样式,格式: console.log("%c内容1%c内容2","CSS1","CSS2");

示例:

<script>
    console.log("%c展示内容1", "font-size:14px;color:red;");
    console.log("%c展示内容2\n换行演示", "font-size:14px;color:red;");
    console.log("%c展示%c内容3\n%c换行多CSS演示", "font-size:14px;color:red;", "font-size:18px;color:green;", "font-size:16px;color:blue;");
</script>

输出效果如下

输出效果示例

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