前端开发『FrontEnd』

定制博客开发者工具控制台个性化输出

56 条评论

首先祝大家元宵节快乐啊，其实这个东西也不是什么新奇玩意儿了。

很多网站都有这个东西，例如百度：

但是就输出这么个东西明显不够高级的样子，上午访问小小小小的小的博客，发现他的主题自带的输出还是蛮有意思的：

既然如此，俺就不如直接抄过来了：

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script>
// 消除控制台打印
var HoldLog = console.log;
console.log = function() {}
;
let now1 = new Date();
queueMicrotask( () => {
const Log = function() {
HoldLog.apply(console, arguments);
};
//在恢复前输出日志
const grt = new Date("08/10/2009 00:00:00");
//此处修改你的建站时间或者网站上线时间
now1.setTime(now1.getTime() + 250);
const days = (now1 - grt) / 1000 / 60 / 60 / 24;
const dnum = Math.floor(days);
const ascll = [`欢迎访问obaby@mars!`, `爱自己，每天都要开开心心的哦`, `
██████ ██████ █████ ██████ ██ ██ ██████ ███ ███ █████ ██████ ███████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██ ██ ██ ██ ██
██ ██ ██████ ███████ ██████ ████ ██ ██ ██ ██ ████ ██ ███████ ██████ ███████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ██████ ██ ██ ██████ ██ █ ████ ██ ██ ██ ██ ██ ██ ███████
`, "已上线", dnum, "天", "©2025 By obaby@mars V1.8.16", ];
const ascll2 = [`NCC2-036`, `调用前置摄像头拍照成功，识别为【小笨蛋】.`, `Photo captured: `, `🤪`];
setTimeout(Log.bind(console, `\n%c${ascll[0]} %c ${ascll[1]} %c ${ascll[2]} %c${ascll[3]}%c ${ascll[4]}%c ${ascll[5]}\n\n%c ${ascll[6]}\n`, "color:#425AEF", "", "color:#ff4f87", "color:#425AEF", "", "color:#425AEF", ""));
setTimeout(Log.bind(console, `%c ${ascll2[0]} %c ${ascll2[1]} %c \n${ascll2[2]} %c\n${ascll2[3]}\n`, "color:white; background-color:#4fd953", "", "", 'background:url("https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/tinggge.gif") no-repeat;font-size:450%'));
setTimeout(Log.bind(console, "%c WELCOME %c 你好，小笨蛋.", "color:white; background-color:#4f90d9", ""));
setTimeout(console.warn.bind(console, "%c ⚡ Powered by obaby@mars %c 你正在访问 小妖精 的博客.", "color:white; background-color:#f0ad4e", ""));
setTimeout(console.warn.bind(console, "%c ❶ Blog: %c https://oba.by", "color:white; background-color:#ff7aa4", ""));
setTimeout(console.warn.bind(console, "%c ❷ Blog: %c https://nai.dog", "color:white; background-color:#ff7aa4", ""));
setTimeout(console.warn.bind(console, "%c ❸ Blog: %c https://zhongxiaojie.com", "color:white; background-color:#ff7aa4", ""));
setTimeout(console.warn.bind(console, "%c ❹ Blog: %c https://h4ck.org.cn", "color:white; background-color:#ff7aa4", ""));
setTimeout(Log.bind(console, "%c W23-12 %c 你已打开控制台.", "color:white; background-color:#4f90d9", ""));
setTimeout(console.warn.bind(console, "%c S013-782 %c 你现在正处于监控中，不要干坏事哦.", "color:white; background-color:#d9534f", ""));
}
);
</script>
<script> // 消除控制台打印 var HoldLog = console.log; console.log = function() {} ; let now1 = new Date(); queueMicrotask( () => { const Log = function() { HoldLog.apply(console, arguments); }; //在恢复前输出日志 const grt = new Date("08/10/2009 00:00:00"); //此处修改你的建站时间或者网站上线时间 now1.setTime(now1.getTime() + 250); const days = (now1 - grt) / 1000 / 60 / 60 / 24; const dnum = Math.floor(days); const ascll = [`欢迎访问obaby@mars!`, `爱自己，每天都要开开心心的哦`, ` ██████ ██████ █████ ██████ ██ ██ ██████ ███ ███ █████ ██████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██ ██ ██ ██ ██ ██ ██ ██████ ███████ ██████ ████ ██ ██ ██ ██ ████ ██ ███████ ██████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██████ ██ ██ ██████ ██ █ ████ ██ ██ ██ ██ ██ ██ ███████ `, "已上线", dnum, "天", "©2025 By obaby@mars V1.8.16", ]; const ascll2 = [`NCC2-036`, `调用前置摄像头拍照成功，识别为【小笨蛋】.`, `Photo captured: `, `🤪`]; setTimeout(Log.bind(console, `\n%c${ascll[0]} %c ${ascll[1]} %c ${ascll[2]} %c${ascll[3]}%c ${ascll[4]}%c ${ascll[5]}\n\n%c ${ascll[6]}\n`, "color:#425AEF", "", "color:#ff4f87", "color:#425AEF", "", "color:#425AEF", "")); setTimeout(Log.bind(console, `%c ${ascll2[0]} %c ${ascll2[1]} %c \n${ascll2[2]} %c\n${ascll2[3]}\n`, "color:white; background-color:#4fd953", "", "", 'background:url("https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/tinggge.gif") no-repeat;font-size:450%')); setTimeout(Log.bind(console, "%c WELCOME %c 你好，小笨蛋.", "color:white; background-color:#4f90d9", "")); setTimeout(console.warn.bind(console, "%c ⚡ Powered by obaby@mars %c 你正在访问 小妖精 的博客.", "color:white; background-color:#f0ad4e", "")); setTimeout(console.warn.bind(console, "%c ❶ Blog: %c https://oba.by", "color:white; background-color:#ff7aa4", "")); setTimeout(console.warn.bind(console, "%c ❷ Blog: %c https://nai.dog", "color:white; background-color:#ff7aa4", "")); setTimeout(console.warn.bind(console, "%c ❸ Blog: %c https://zhongxiaojie.com", "color:white; background-color:#ff7aa4", "")); setTimeout(console.warn.bind(console, "%c ❹ Blog: %c https://h4ck.org.cn", "color:white; background-color:#ff7aa4", "")); setTimeout(Log.bind(console, "%c W23-12 %c 你已打开控制台.", "color:white; background-color:#4f90d9", "")); setTimeout(console.warn.bind(console, "%c S013-782 %c 你现在正处于监控中，不要干坏事哦.", "color:white; background-color:#d9534f", "")); } ); </script>
            <script>
                // 消除控制台打印
                var HoldLog = console.log;
                console.log = function() {}
                ;
                let now1 = new Date();
                queueMicrotask( () => {
                    const Log = function() {
                        HoldLog.apply(console, arguments);
                    };
                    //在恢复前输出日志
                    const grt = new Date("08/10/2009 00:00:00");
                    //此处修改你的建站时间或者网站上线时间
                    now1.setTime(now1.getTime() + 250);
                    const days = (now1 - grt) / 1000 / 60 / 60 / 24;
                    const dnum = Math.floor(days);
                    const ascll = [`欢迎访问obaby@mars!`, `爱自己，每天都要开开心心的哦`, `
 ██████  ██████   █████  ██████  ██    ██  ██████  ███    ███  █████  ██████  ███████ 
██    ██ ██   ██ ██   ██ ██   ██  ██  ██  ██    ██ ████  ████ ██   ██ ██   ██ ██      
██    ██ ██████  ███████ ██████    ████   ██ ██ ██ ██ ████ ██ ███████ ██████  ███████ 
██    ██ ██   ██ ██   ██ ██   ██    ██    ██ ██ ██ ██  ██  ██ ██   ██ ██   ██      ██ 
 ██████  ██████  ██   ██ ██████     ██     █ ████  ██      ██ ██   ██ ██   ██ ███████ 
        `, "已上线", dnum, "天", "©2025 By obaby@mars V1.8.16", ];
                    const ascll2 = [`NCC2-036`, `调用前置摄像头拍照成功，识别为【小笨蛋】.`, `Photo captured: `, `🤪`];

                    setTimeout(Log.bind(console, `\n%c${ascll[0]} %c ${ascll[1]} %c ${ascll[2]} %c${ascll[3]}%c ${ascll[4]}%c ${ascll[5]}\n\n%c ${ascll[6]}\n`, "color:#425AEF", "", "color:#ff4f87", "color:#425AEF", "", "color:#425AEF", ""));
                    setTimeout(Log.bind(console, `%c ${ascll2[0]} %c ${ascll2[1]} %c \n${ascll2[2]} %c\n${ascll2[3]}\n`, "color:white; background-color:#4fd953", "", "", 'background:url("https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/tinggge.gif") no-repeat;font-size:450%'));

                    setTimeout(Log.bind(console, "%c WELCOME %c 你好，小笨蛋.", "color:white; background-color:#4f90d9", ""));

                    setTimeout(console.warn.bind(console, "%c ⚡ Powered by obaby@mars %c 你正在访问 小妖精 的博客.", "color:white; background-color:#f0ad4e", ""));
                    setTimeout(console.warn.bind(console, "%c ❶ Blog: %c https://oba.by", "color:white; background-color:#ff7aa4", ""));
                    setTimeout(console.warn.bind(console, "%c ❷ Blog: %c https://nai.dog", "color:white; background-color:#ff7aa4", ""));
                    setTimeout(console.warn.bind(console, "%c ❸ Blog: %c https://zhongxiaojie.com", "color:white; background-color:#ff7aa4", ""));
                    setTimeout(console.warn.bind(console, "%c ❹ Blog: %c https://h4ck.org.cn", "color:white; background-color:#ff7aa4", ""));
                    setTimeout(Log.bind(console, "%c W23-12 %c 你已打开控制台.", "color:white; background-color:#4f90d9", ""));

                    setTimeout(console.warn.bind(console, "%c S013-782 %c 你现在正处于监控中，不要干坏事哦.", "color:white; background-color:#d9534f", ""));
                }
                );
            </script>

至于怎么生成上面的 ascii 字符串，可以使用下面的两个链接：

https://patorjk.com/software/taag/

http://www.network-science.de/ascii/

把上面的代码找个 js 文件写进而去，在页面 header 里面引用即可（我直接将代码添加到了 wp 的页面小工具内）。实际效果：

当然也可以直接 F12 打开开发者工具查看具体效果。嘎嘎。

☆版权☆

* 网站名称：obaby@mars
* 网址：https://h4ck.org.cn/
* 个性：https://oba.by/
* 本文标题： 《定制博客开发者工具控制台个性化输出》
* 本文链接：https://h4ck.org.cn/2025/02/19219
* 短链接：https://oba.by/?p=19219
* 转载文章请标明文章来源，原文标题以及原文链接。请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。

obaby

obaby

爱好广泛的火星小妖精，有问题欢迎留言交流啊~(✪ω✪) 爬虫类工具请先点击这个链接查看用法https://oba.by/?p=12240 闺蜜圈APP下载 https://guimiquan.cn

You may also like

56 comments

  3. Level 4
    Google Chrome 133 Google Chrome 133 Mac OS X 10.15 Mac OS X 10.15 cn中国–河北–保定 联通

    有意思，控制台的主意也打～～～不过你控制台的警告信息有点多了啊。

    回复
  4.  Level 6
    Google Chrome 131 Google Chrome 131 Mac OS X 10.15 Mac OS X 10.15 cn中国–香港 Cloudie_Limited

    人与人之间的思路，就像月球和太阳之间的距离，这么离谱。

    回复
    1. 公主 Queen 
      Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

      不至于，没那么夸张，嘻嘻。
      开始折腾终端的定制化了。

      回复
    1. 公主 Queen 
      Google Chrome 130 Google Chrome 130 Android 10 Android 10 cn中国–山东–青岛 联通

      文章中的两个地址写了啊 一看就没仔细读
      👎

      回复
      1. Level 5
        Microsoft Edge 131 Microsoft Edge 131 Windows 11 Windows 11 cn中国–广东–广州 联通

        哟西，大意了，确实没留意到那2个链接，急急忙忙打开F12看效果了

        回复
  7.   Level 4
    Google Chrome 132 Google Chrome 132 Windows 11 Windows 11 cn中国–江西 移动/数据上网公共出口

    哈哈哈哈 我就是最简单的console.warn

    回复
    1. 公主 Queen 
      Google Chrome 130 Google Chrome 130 Windows 10 Windows 10 cn中国–山东–青岛 联通

      欢迎偷，😄，本来我也是“抄”来的
      貌似你删了篇文章？

      回复
      1. Level 4
        Google Chrome 131 Google Chrome 131 Windows 10 Windows 10 cn中国–山东–济宁 电信

        你咋知道的 对 本来想问问有没有人出售一个主题，后来想想 罢了 不折腾了~~~

        回复
  13. Level 6
    Google Chrome 109 Google Chrome 109 Windows 10 Windows 10 cn中国–上海–上海 腾讯云

    灵妹妹，这个纯属于是花里胡哨了。

    回复
  14. Level 4
    Google Chrome 101 Google Chrome 101 Windows 10 Windows 10 cn中国–湖北–武汉 电信

    之前用hexo搞过，后来就没用了。
    第一张图，不会也是AI的杰作吧

    回复
  17.  Level 4
    Google Chrome 132 Google Chrome 132 GNU/Linux GNU/Linux cn中国–辽宁–沈阳–沈河区 电信

    包的，我的早就弄了，就是有意思

    回复
  19. Level 3
    Google Chrome 133 Google Chrome 133 Mac OS X 10.15 Mac OS X 10.15 cn中国–北京–北京 联通

    很多年前百度就在控制台里展现招聘信息了，没想到现在还有。
    不愧是你，看别人站先打开控制台。

    回复
    1. 公主 Queen 
      Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

      有时候页面一些功能感觉不正常，就会习惯性的开控制台了

      回复
  20. Level 5
    Google Chrome 132 Google Chrome 132 Windows 10 Windows 10 cn中国–台湾 中华电信(HiNet)数据中心

    我这里看你那一堆马赛克没对齐啊。尤其是后面两行。

    回复
        1. 公主 Queen 
          Google Chrome 130 Google Chrome 130 Windows 10 Windows 10 cn中国–山东–青岛 联通

          嗯嗯，的确是的，在mac下写的、没注意windows效果，更新了，嘻嘻。windows换了个文本格式：
          windows乱码修复

          回复
          1. Level 5
            Google Chrome 133 Google Chrome 133 Windows 10 Windows 10 cn中国–香港 OceanblueCloud

            我发现这玩意儿可以加font-family，chrome下设成等宽字体就没事了。chrome以外的console字体可能本来就是等宽的。

            回复
            1. 公主 Queen 
              Google Chrome 132 Google Chrome 132 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

              嗯嗯，是的，就是字体的问题，但是貌似 windows 下这个字体我试了几个不同的浏览器都是乱码，哈哈哈

              回复
              1. Level 5
                Google Chrome 133 Google Chrome 133 Windows 10 Windows 10 cn中国–香港 OceanblueCloud

                我是说给马赛克设颜色的那个字符串参里可以加上“font-family:consolas;”

                回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Close Menu