浏览器控制台个性化输出

| | |

尝鲜篇

网站加了 绚丽彩虹播放器 后，在浏览器 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 字符画制作工具挺多的，在线的如： picascii、IMG2TXT。也可下载 ASCII Generator、Monodraw 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://cdn.jsdelivr.net/gh/leafjame/cdn/img/articles/13/10.jpg) no-repeat;");

进阶篇

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

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

  2. 在 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

最后更新:2023年08月19日 - 13:26:00

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

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

-------------------本文结束 感谢您的阅读-------------------
首页 前进 回顶 刷新 收藏 后退
🌞