美化console打印：定制你的输出样式-优快云博客

本文链接：https://blog.youkuaiyun.com/H_c_l/article/details/90599890

本文将介绍如何使用JavaScript的console对象来创建丰富多彩的打印样式，让你的开发输出不再单调，提升代码可读性和调试体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试打印样式</title>
</head>

<body>


    <script>
        //格式化输出
        /*
        	console.log支持的格式标志有:
        	%s       占位符
        	%d 或 %i    整数
        	%f       浮点数
        	%o%O     object对象
        	%c       css样式
        */


        // console.log() 这个应该是最常用的
        // console.error() 输出错误信息 会以红色显示
        // console.assert(bool,”info”) 如果bool为false 打印出info 否则不打印
        // console.warn() 打印警告信息 会以黄色显示
        // console.info() 打印一般信息
        // console.clear();//清空上面的console显示










        var e = "%c";

        var n =
            "color:red;text-shadow:5px 5px 2px #fff, 5px 5px 2px #373E40, 5px 5px 5px #A2B4BA, 5px 5px 10px #82ABBA;font-weight:bolder;font-size:55px"

        var r = "color:#495A80;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 1px 0 #bbb;font-size:20px";
        var red = "color:red;"


        console.info(e + "哈哈", n);

        console.info(e + "你知道,你在干什么?:-)\r\n", r);

        console.log(
            '同学，祝贺你喜提彩蛋~或许你们还在犹豫是否加入， 我会坦诚的告诉你我们超酷； 在这里大家都用无人车代步， AI音箱不仅播放还可以交互； 人工智能是发展的核心技术， 做自己让未来不只领先几步； 在这里做自己， 欢迎来到百度！ '
        )

        console.log(e + '百度2019校园招聘简历提交：http://dwz.cn/XpoFdepe （你将有机会直接获得面试资格）', red);

        console.log("%c%s",
            "color: red; background: yellow; font-size: 24px;",
            "警告！");
    </script>

</body>

</html>