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

知名站点的Console

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

知名站点的Console信息

添加Console

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

<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:...加入文字阴影等等，利用好的话可以做到非常高大上。