浏览器控制台个性化输出

尝鲜篇

博客加了 绚丽彩虹播放器 后,在浏览器 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      [email protected]@[email protected]                ,:\n  Y          1       [email protected]@[email protected]        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                        [email protected]@                    \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:
;[email protected]@@@@@@@@@@@@@@@#MBA85i
[email protected]@@@@@@@@@@@@@@@@@@@@@@@@@M9:
.&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#1
[email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@, .;rssr,
,[email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@[email protected]@@@@#5
.rHHA#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@:
[email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@i
,5[email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@X
is&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@X#@@@@@@@A
,[email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@Hr [email protected]@@@@@@B.
.,1&[email protected]@@@@@@B#@@@@@@@@@@@@@@@@@@@8 ;@@@@@@@Hi. :1991:
,s9&81;. , [email protected]@@@@@BG8XHB#@@@@@@@@@@@@@HS: [email protected]@@@@@@@i .;[email protected]@#H#@H91;.
:s3&##A&#@@MA8Ss: .5HAX#@[email protected]#BHHBM#@@@@@@@@#&Ah.. [email protected]@@@@@@@G ,[email protected]@@Xh;. [email protected]@@BX9hr,
.,ih9&[email protected]@@#s. :[email protected]@HBMBXSi. [email protected]@@@@@&XBHsHMHS: .: [email protected]@@@@@@@8 ,;19H#[email protected]@H3. r#@@@@@#@@
[email protected]@@[email protected]@@@M; [email protected]@@9 ,r3ABM&8Shsrii;;i;ir1h1. [email protected]@@@@@@@91, ;S, [email protected]@@@@@@@X&[email protected]@@9: [email protected]@@@@#s &@@@@@@G:s
@A;[email protected]@@@@A [email protected]@@@@@h s#@@AXXXGGXGX#@@#@@Bs .r58&[email protected]@@@@@@@@@@#BA8Sr. ,[email protected]@#[email protected]@@@@@[email protected]@H3. [email protected]@@@@@9 [email protected]@@@@@:
H; &@@@@@#h &@@@@@Mi ,[email protected]@@@X ;8#@#[email protected]@[email protected]@@@@@@@@@@@@@@@@@@@@@@[email protected]@@@@M8. [email protected]@@@@Hi [email protected]@@@@5 [email protected]@@@S
. [email protected]@@@X: [email protected]@@@M; &@@@@@@9 s#@@@@#[email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#3:[email protected]@@@@@9 :[email protected]@@@@@s [email protected]@@@s ,9#@@H
,[email protected]@#h [email protected]@@M; [email protected]@@@@Mi [email protected]@@@@@@[email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@8 ;[email protected]@@@M, [email protected]@i :[email protected]@i
[email protected]@X: [email protected]; :#@@@@r :#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@M. ;[email protected]@@X :[email protected]: i&S
hMh GM; [email protected]@@h [email protected]@@@B#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@[email protected]@@@h i#@@h ,1
., ,: [email protected]@3 [email protected]@[email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&[email protected]@H r#@;
HG [email protected]#r&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@S [email protected] s9
, 95[email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@h;S
3@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@i
[email protected]@@@@@@[email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@B.
[email protected]@@@@@#:;@@@@@@@@@@@@@@@@@@@@@@@@@@[email protected]@@@@@@S
.;[email protected]@@@@@@r ,[email protected]@@@@@@@@@@@@@@@@@@@@@@@@X 9@@@@@@Mhi,
.. ;831: [email protected]@@@@@@#s [email protected]@@@@@@@@@@@@@@@@@@@@@@@@X [email protected]@@@@@@@#A91: i8AA1 :h,
iBH. [email protected]#8i. .iS&[email protected]@@@@@@@@@Ai [email protected]@@@@@@@@@@@@@@@@@@@@@@@@@M, [email protected]@@@@@@@@@@H8h; ;[email protected]@#s :&@X,
[email protected]@H359GX&[email protected]@@@B9:,[email protected]@@@@@@@@@@B8s [email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@s [email protected]@@@@@@@@@@@BX5r,[email protected]@@@@MHAHBHHA&#@@@9
[email protected]@@@@@@@@@@@@@@@@@@#@@@@@@@@@@#H8h; [email protected]@@@@@@@@@@@@@@@@@@@@@@@@@#s :[email protected]@@@@@@@@@@#@@@@@@@@@@@@@@@@@@@h.
[email protected]@@@@@@@@@@@@@@@@@@@@@@@BXSr, 5#@@@@@@@@@@@@@@@@@@@@@@@@@@@#h .ih8A#@@@@@@@@@@@@@@@@@@@@@@[email protected]@8
,,,595i:i1S9G&AHBMBAGSr, [email protected]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@3 :13XHM###MMBHAX95SXBMGii,
                                                                       
-->

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

参考文章

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

点击查看

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

文章作者:北宸

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

最后更新:2019年11月30日 - 17:17:01

原始链接:https://www.liaofuzhan.com/posts/3274212224.html

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

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