浏览器 console 彩蛋的原理与实现

发布 2016-12-12
更新 2019-01-19
阅读

打开浏览器的开发者模式的控制台，比如 F12（或者 shift + command + j）打开Chrome 的控制台，有些网站会在这里面展示一些信息，比如招聘信息。话不多说，先上一波演示。

演示

实现

看完效果。我们一起学习一下，这些炫酷效果怎么实现的。

console.log('%c', 'CSS代码');

文字实现：

console.log('%c 你好！', 'background: #008000; color: #fff');

图片实现：

console.log('%c            ','background:url(http://7oxgmt.com1.z0.glb.clouddn.com/wp-content/themes/VicSugar-wordpress/public/img/face.jpg) no-repeat left center;font-size:200px');

注：width、height 这几个属性是不支持的，只能用 font-szie 来设置图片高宽。

字符画：

上面的字符画效果是怎么实现的那？哈哈，肯定不是手打的啦。介绍两款很方便的软件，上传图片，可以自动生成对应的字符画。

字符画生成器

http://www.degraeve.com/img2txt.php

http://picascii.com/

字符画直接复制到 `console.log` 中会报错，处理方式：

1、ES6 里可以使用 ` `` 符号处理多行字符串。

2、把字符画复制到 Sublime Text 里，全选然后 shift + ctrl + l 多行光标在每行的开头添加 \n ，然后删除换行，使多行字符串变成单行字符串。

实践

在当前页面，打开浏览器的控制台，就可以看到我博客设置的 console 信息了。

代码实现：

var consoleConfig = {
    welcome: '\n欢迎访问 https://hufangyun.com ，围观我的博客(づ｡◕‿‿◕｡)づ！\n',
    theme: '\n本博客使用 %cHexo%c 搭建，博客主题为本人开发的 %chexo-themes-yearn%c ~~~ 🎉🎉🎉 \n\n源码 https://github.com/imfycc/hexo-themes-yearn \n\n如果喜欢可以 star 支持一下 ❤️~\n',
    qrcode: '\n扫描下面的二维码，在手机上查看博客！\n',
    search: '\n想知道这个效果如何实现的？博客内搜索 console 彩蛋！\n'
};

var consoleInfo = (function(consoleConfig) {
    console.log('%c' + consoleConfig.welcome, 'color: #6190e8');
    console.log('%c' + consoleConfig.theme, 'color: #6190e8;','padding: 0 5px;color: #fff;background: #6190e8;','color: #6190e8;','padding: 0 5px;color: #fff;background: #6190e8;','color: #6190e8;');
    console.log('%c' + consoleConfig.qrcode, 'color: #6190e8');
    console.log('%c' + consoleConfig.search, 'color: #6190e8');
    console.log('%c     ', 'background: url(https://static.hufangyun.com/blog-url-qrcode-180-180.png) no-repeat left center;font-size: 180px;');
}(consoleConfig));

参考链接

让console充满情怀

感谢您的阅读。 🙏 关于转载请看这里

浏览器 console 彩蛋的原理与实现

演示

文字类型：

字符画类型：

图片类型：

实现