小技巧 - 添加个性化的Console
现在的浏览器都有开发者工具(F12呼出),其中有一个相当重要的面板——Console,用它可以实现查看错误信息、打印调试信息、调试js代码等功能。我们可以用Console备注一些特殊信息或者彩蛋。
知名站点的Console
“百度”应该是国内日常使用量数一数二的网站,但是不知道多少人注意过它的Console,在baidu.com页面下按F12,可以看到其隐藏的招聘信息。另外天猫、京东、斗鱼、知乎等知名网站,在他们的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:...
加入文字阴影等等,利用好的话可以做到非常高大上。
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。