浏览器控制台个性化输出

尝鲜篇

博客加了 绚丽彩虹播放器 后,在浏览器 Console 输出了彩色文字

浏览器控制台

觉得挺有意思,于是就研究了下,其实没啥特别的用处,就是打发下无聊时间。感兴趣的可以逛逛其它网站,比如某东

KAZM0x.png

也有符号形状的:

1
console.log("%c\n                                           :J:    \n                                          :. i    \n                  ..:::::::,:.,.,..:..::rr    J   \n               ::i:,               FB         ,v  \n  .i:i:   .:::7                     B.         :7 \n  7:  ,rri:  @B      .vOB@B@B@BY                ,:\n  Y          1       B@B@BkB@Pr        7,        :\n ::                                  ,7:.:      .i\n.i          .                      :7: .r.::i:::: \nr         i .7:,               .:ri:  ;i          \n7        77;.  .iii:::::::::iii:.    7,           \n :i:.,::;.  :r,      .....         i7             \n   .. .       :ii.               .v:              \n                .ii:.          .rr                \n                   .iii.      ii.                 \n                        i@8GB@                    \n                        vj1ULri                   \n                       7.     r.                  \n                  .,  ,r      ,;                  \n                  .E  0   %cJD   %c7                  \n                   jii2        u                  \n                    1i,   ::i. J                  \n                    i J  E   L v                  \n                   ,:iY 17   ::7                  \n                   iL ,iL7    rr                  \n                   Si r::5    i7                  \n                   ,  r       .v                  ","color: #000","color: #f00","color: #000")

在控制台执行看下效果:

KAZRun.jpg

B 站 Console:

KAmwY8.png

知乎

KARAOS.png

ASCII 字符画制作工具挺多的,在线的如: picasciiIMG2TXT。也可下载 ASCII GeneratorMonodraw for macOS 后本地操作。将生成的字符复制到 sublime 或者 notepad,把每行开头的换行删除并替换成 \n ,最后只有一行代码,保证没有换行后,在 console.log(“”) 中执行才不会出错。

KAKGy4.jpg

上图是 Chrome 控制台新玩法 这篇文章中列的三种 Console.log,大家可以执行看下效果:

  1. 3D Text
1
console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")
  1. Colorful CSS
1
console.log("%cColorful CSS","background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em")
  1. Rainbow Text
1
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

其中,Rainbow Text 在 Safari 中正常显示,在 Chrome 中不显示文字

KAKSeA.png

color:transparent; 替换成 color: rgba(0,0,0,0.1); 后能看到文字但效果不一样了,不知道是哪个属性设置的事。

KAQkrQ.png

修改后代码:

1
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:rgba(0,0,0,0.1);-webkit-background-clip: text;font-size:5em;');

附上我在用的一款(好奇就打开控制台看下吧~):

1
console.log("%c Welcome To Leaf's Blog ", "font-size:100px;color:white;border-radius:20px;height:200px; background:-webkit-linear-gradient(yellow,orange,red,green,blue,purple);text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);");

当然,也可以在 Console 输出一张图片:

1
console.log("%c .", "padding:300px 600px;line-height:10px;background:url(https://s2.ax1x.com/2019/10/17/KkoAJJ.md.png) no-repeat;");

进阶篇

使用 ASCII 字符图案时,工具生成完了还需要自己格式化成一行,觉得有点不大方便,为什么不在博客中用代码生成了呢?于是 github 找的了 figlet,也可参考 npm,文档是一样的。可以使用 npm 命令直接安装,我使用的是 Getting Started - The Browser 这种方式,步骤如下:

  1. 在 /themes/next/source/ 下新建 figlet 目录,将下载的 fetch.min.js 和 figlet.js 放这里。另外,还需要下载对应的字体库,放在 figlet 下的 fonts 目录。

  2. 在 /themes/next/layout/_custom/custom.swig 中添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.fig_font.enable %}
<script type="text/javascript" src="{{ url_for('/figlet/fetch.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('/figlet/figlet.js') }}"></script>
<script type="text/javascript">

figlet.defaults({fontPath: "/figlet/fonts"});
figlet("{{ theme.fig_font.input_text }}", "{{ theme.fig_font.font }}", function(err, text) {
if (err) {
console.log("something went wrong...");
console.dir(err);
return;
}
console.log(text);
});
</script>
{% endif %}
  1. 主题 _config.yml 文件中新增动态配置
1
2
3
4
fig_font:
enable: true
font: Big Money-ne
input_text: Welcome To Leaf s Blog

可根据字体库更改 font 配置项,去掉 .flf 后缀,效果可参考:

FIGlet and AOL Macro Fonts Supported

Some examples of FIGlet fonts

hexo 三连,看下控制台效果吧

1
2
3
4
5
6
7
8
9
10
11
12

/$$ /$$ /$$ /$$$$$$$$ /$$ /$$$$$$ /$$ /$$$$$$$ /$$
| $$ /$ | $$ | $$ |__ $$__/ | $$ /$$__ $$| $/ | $$__ $$| $$
| $$ /$$$| $$ /$$$$$$ | $$ /$$$$$$$ /$$$$$$ /$$$$$$/$$$$ /$$$$$$ | $$ /$$$$$$ | $$ /$$$$$$ /$$$$$$ | $$ \__/|_//$$$$$$$ | $$ \ $$| $$ /$$$$$$ /$$$$$$
| $$/$$ $$ $$ /$$__ $$| $$ /$$_____/ /$$__ $$| $$_ $$_ $$ /$$__ $$ | $$ /$$__ $$ | $$ /$$__ $$ |____ $$| $$$$ /$$_____/ | $$$$$$$ | $$ /$$__ $$ /$$__ $$
| $$$$_ $$$$| $$$$$$$$| $$| $$ | $$ \ $$| $$ \ $$ \ $$| $$$$$$$$ | $$| $$ \ $$ | $$ | $$$$$$$$ /$$$$$$$| $$_/ | $$$$$$ | $$__ $$| $$| $$ \ $$| $$ \ $$
| $$$/ \ $$$| $$_____/| $$| $$ | $$ | $$| $$ | $$ | $$| $$_____/ | $$| $$ | $$ | $$ | $$_____/ /$$__ $$| $$ \____ $$ | $$ \ $$| $$| $$ | $$| $$ | $$
| $$/ \ $$| $$$$$$$| $$| $$$$$$$| $$$$$$/| $$ | $$ | $$| $$$$$$$ | $$| $$$$$$/ | $$$$$$$$| $$$$$$$| $$$$$$$| $$ /$$$$$$$/ | $$$$$$$/| $$| $$$$$$/| $$$$$$$
|__/ \__/ \_______/|__/ \_______/ \______/ |__/ |__/ |__/ \_______/ |__/ \______/ |________/ \_______/ \_______/|__/ |_______/ |_______/ |__/ \______/ \____ $$
/$$ \ $$
| $$$$$$/
\______/

以下是部分 个性化图案,不是截图哦!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
                                      _ooOoo_ 
o8888888o
88" · "88
(| ^.^ |)
O\ = /O
____/`---'\____
. ' \\| |// `.
/ \\||| : |||// \
/ _||||| -:- |||||- \
| | \\\ - /// | |
| \_| ''\---/'' | |
\ .-\__ `-` ___/-. /
___`. .' /--.--\ `. . __
."" '< `.___\_<|>_/___.' >'"".
| | : `- \`.;`\ _ /`;.`/ - `: | |
\ \ `-. \_ __\ /__ _/ .-` / /
`.____`-.___\_____/___.-`____.-'
⌒⌒⌒⌒⌒⌒⌒⌒⌒⌒⌒⌒⌒⌒⌒⌒⌒
.............................................

佛 祖 保 佑 代 码 无 BUG



oooo .o88o. o8o .o8 oooo
`888 888 `" `YP "888 `888
888 .ooooo. .oooo. o888oo ' .oooo.o 888oooo. 888 .ooooo. .oooooooo
888 d88' `88b `P )88b 888 d88( "8 d88' `88b 888 d88' `88b 888' `88b
888 888ooo888 .oP"888 888 `"Y88b. 888 888 888 888 888 888 888
888 888 .o d8( 888 888 o. )88b 888 888 888 888 888 `88bod8P'
o888o `Y8bod8P' `Y888""8o o888o 8""888P' `Y8bod8P' o888o `Y8bod8P' `8oooooo.
d" YD
"Y88888P'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!--
s&@@@@@@@@@@@#HX9hr:
;GM@@@@@@@@@@@@@@@@#MBA85i
.G@@@@@@@@@@@@@@@@@@@@@@@@@@M9:
.&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#1
h@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@, .;rssr,
,sA@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@88B@@@@@#5
.rHHA#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@:
rB@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@i
,5B@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@X
is&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@X#@@@@@@@A
,s8@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@Hr M@@@@@@@B.
.,1&M@@@@@@@B#@@@@@@@@@@@@@@@@@@@8 ;@@@@@@@Hi. :1991:
,s9&81;. , sA@@@@@@BG8XHB#@@@@@@@@@@@@@HS: 5@@@@@@@@i .;13XM@@#H#@H91;.
:s3&##A&#@@MA8Ss: .5HAX#@M@#BHHBM#@@@@@@@@#&Ah.. G@@@@@@@@G ,s9AMM@@@Xh;. .i9@@@BX9hr,
.,ih9&B@@@#s. :hM@@HBMBXSi. ..ShSM@@@@@@&XBHsHMHS: .: 3@@@@@@@@8 ,;19H#BG5irB@@H3. r#@@@@@#@@
B@@@BB@@@@M; 5H@@@9 ,r3ABM&8Shsrii;;i;ir1h1. .iM@@@@@@@@91, ;S, sGXH@@@@@@@@X&HM@@@9: X@@@@@#s &@@@@@@G:s
@A;.hM@@@@@A G@@@@@@h s#@@AXXXGGXGX#@@#@@Bs .r58&HM@@@@@@@@@@@#BA8Sr. ,8@@#X@@@@@@Ariii5M@@H3. 8@@@@@@9 1B@@@@@@:
H; &@@@@@#h &@@@@@Mi ,G@@@@X ;8#@#hrX@@X8M@@@@@@@@@@@@@@@@@@@@@@@M8SM@Hh.3@@@@M8. .H@@@@@Hi S@@@@@5 .SM@@@@S
. H@@@@X: 5@@@@M; &@@@@@@9 s#@@@@#r.9@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#3:9@@@@@@9 :M@@@@@@s 1@@@@s ,9#@@H
,M@@#h i@@@M; 3@@@@@Mi X@@@@@@@M@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@8 ;M@@@@M, rM@@i :G@@i
i@@X: .B@M; :#@@@@r :#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@M. ;M@@@X :B@: i&S
hMh GM; X@@@h S@@@@B#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@B8@@@@h i#@@h ,1
., ,: s@@3 .H@@MB@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&A@@H r#@;
HG r@#r&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@S B@r s9
, 95G@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@h;S
3@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@i
r@@@@@@@H8@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@B.
H@@@@@@#:;@@@@@@@@@@@@@@@@@@@@@@@@@@B8@@@@@@@S
.;S@@@@@@@r ,M@@@@@@@@@@@@@@@@@@@@@@@@@X 9@@@@@@Mhi,
.. ;831: .iSXM@@@@@@@#s .M@@@@@@@@@@@@@@@@@@@@@@@@@X 9@@@@@@@@#A91: i8AA1 :h,
iBH. .5B@#8i. .iS&M@@@@@@@@@@Ai i@@@@@@@@@@@@@@@@@@@@@@@@@@M, hB@@@@@@@@@@@H8h; ;9@@#s :&@X,
.B@@H359GX&XGGM@@@@B9:,rSXM@@@@@@@@@@@B8s h@@@@@@@@@@@@@@@@@@@@@@@@@@@s .1GB@@@@@@@@@@@@BX5r,sA@@@@@MHAHBHHA&#@@@9
iG@@@@@@@@@@@@@@@@@@@#@@@@@@@@@@#H8h; S@@@@@@@@@@@@@@@@@@@@@@@@@@#s :19AM@@@@@@@@@@@#@@@@@@@@@@@@@@@@@@@h.
1B@@@@@@@@@@@@@@@@@@@@@@@@BXSr, 5#@@@@@@@@@@@@@@@@@@@@@@@@@@@#h .ih8A#@@@@@@@@@@@@@@@@@@@@@@M@@8
,,,595i:i1S9G&AHBMBAGSr, 9@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@3 :13XHM###MMBHAX95SXBMGii,
                                                                       
-->

看网站的源代码有时候也别有一番收获 -。-!

参考文章

让console充满情怀
Chrome 控制台新玩法
Tools for Web Developers

点击查看

本文标题:浏览器控制台个性化输出

文章作者:北宸

发布时间:2019年10月17日 - 12:23:55

最后更新:2019年10月19日 - 21:44:39

原始链接:https://leafjame.github.io/posts/3274212224.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------