共计 1522 个字符，预计需要花费 4 分钟才能阅读完成。
作者：第一名的小蝌蚪
微信公众号：前端屌丝
blog & github：https://github.com/airuikun/blog
深夜，十二点
昏暗的房间，一卷餐巾纸
注定这是个不平凡的夜
。。。
小蝌蚪打开了珍藏在 C 盘深处的隐藏文件夹
里面罗列着许多晦涩难懂的文件名
“ 日理万机.mp4″、” 操劳过度.mp4”
“多人运动.mp4”、“2v2 敏捷开发.mp4”
别问这些是什么，问就是前端开发教学视频
。。。
小蝌蚪在现实生活中，是一个低端屌丝
受尽女神的冷嘲热讽
但今夜，我的世界我做主
小蝌蚪点开了 ” 采蘑菇的小姑娘.mp4″
笑容逐渐癫狂
。。。
打开后，映入眼帘的是一副 FBI Warning 大图
众所周知，FBI Warning 是东方神秘图腾
它象征着一场大战前，冲锋的号角
小蝌蚪起身
对自己的双手鞠躬：“对不起，今晚又要麻烦你们俩了”
作为一名低级前端工程师
小蝌蚪将用双手
展示如何通过 console.log 高仿 FBI Warning 大图
效果如下：
代码如下：
源码：fbi-warning
实现原理很简单
console.log 里是可以解析 css 代码的
格式为：console.log(“%c 内容 1 %c 内容 2 ”, “css 代码 1 ″，”css 代码 2 ”);
。。。
实现一个 FBI Warning 需要 4 个 %c
第一个 %c 对应的 css 代码为
background: #000;
font-size: 18px;
font-family: monospaces;这是一个纯黑色背景
黑色象征神秘与性感
似乎为接下来的内容打下了铺垫
第二个 %c 对应的 css 代码为
background: #f33;
font-size: 18px;
font-family: monospace;
color: #eee;
text-shadow:0 0 1px #fff;它为“FBI Warning”标题添加了红色背景
红色代表加强
警示每一位看客要遵纪守法
让心怀不轨的人产生羞耻感和罪恶感
第三个 %c 也是黑色背景
第四个 %c 对应的 css 为：
background: #000;
font-size: 18px;
font-family: monospace;
color: #ddd;
text-shadow:0 0 2px #fff;黑色背景配上白色的字
就好像一个落魄的屌丝
但是内心纯洁无瑕
。。。
以上就是整个高仿 FBI Waring 的实现了
我敲了 6 年代码
曾被 3 位女神抛弃
被 2 个渣女玩弄过
当过 1 年小三
再看这幅 FBI Waring 图 感慨万千
它其实是当代屌丝的一个缩影
描述了一个想爱但不敢爱
只能靠想象来和女神为爱鼓掌的落魄屌丝
卑微且虔诚
。。。
言归正传
在平时开发中 console.log 搭配一些工具
还能有一些好玩的功能
比如转化 ’FBI WARNING’ 成一个字符画
网址：http://patorjk.com/software/t…
。。。
console.log 还能画流程图
网址：http://stable.ascii-flow.apps…
。。。
console.log 里添加 emoji 表情包
网址：http://getemoji.com/
。。。
把一张图片转成字符画，如下:
网址：https://www.degraeve.com/img2…
。。。
最后一个技能
把 js 代码，转成漂亮的代码图片
网址：https://carbon.now.sh
以上就是所有 console.log 技能了
虽然没什么用
嘻嘻
。。。
。。。
。。。
深夜，凌晨二点
小蝌蚪看了一整晚带马赛克的葫芦娃
随着女蛇妖被爷爷打败
小蝌蚪打翻了牛奶
擦拭干净后
在床边点了根烟
强烈的孤独感袭卷背后
世间一切都变得索然无味
寂静的夜 又归于平静
作者：第一名的小蝌蚪
微信公众号：前端屌丝
blog & github：https://github.com/airuikun/blog