Keep on going never give up.

Let's Go

console.log()花样输出/屏蔽输出(胶囊样式、彩色文字、图片等)

随笔Lonely2020-02-24 18:31:0036次0条

在开发的环境下,经常需要console出一些debug信息,以方便开发,一般debug完后都会删除掉这些输出,但难免有时会粗心大意忘记删除。而在生产环境中,又不合适在浏览器的console中输出那么多的调试信息。因此,就需要屏蔽禁用console输出的信息。所以自己最近封装了一个console.log()输出工具,用于方便自己输出调试信息或者在生产环境屏蔽输出信息。

先来看一波效果图:

image.png

image.png


由上图可见,唯一的缺陷就是在控制台中不能显示真正调用处的行号了,显示的而是封装JS中的行号,对于这个问题,我暂时还不知道如何去解决,有想法的同学可以告诉我。


不多说,直接上代码,Html代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Console</title>
</head>
<body>
    F12打开控制台查看效果

    <script src="util.log.js"></script>
    <script>
 
        console.capsule("App", "v2.5.6", "default");
        console.capsule("App", "v2.5.6", "primary");
        console.capsule("App", "v2.5.6", "success");
        console.capsule("App", "v2.5.6", "warning");
        console.capsule("App", "v2.5.6", "error");
 
        console.default("default");
        console.primary("primary");
        console.success("success");
        console.warning("warning");
        console.error("error");

        console.colorful("自定义样式", "color:#660cf2;font-size:2em;");
        console.text3D("text3D");
        console.rainbow("彩色文字"); //Chrome不生效
        console.picture("console.gif", "112px 150px;");

        let obj = {
            C1: {
                "名称": "小型汽车和C2、C3",
                "学费": 3800,
            },
            C2: {
                "名称": "小型自动挡汽车",
                "学费": 3200,
            },
            C3: {
                "名称": "低速载货汽车和C4",
                "学费": 2500,
            },
            C4: {
                "名称": "三轮汽车",
                "学费": 1500,
            },
        };

        console.groupBy("机动车", obj);

        console.print(obj);

        console.dir(console);


        var char = "%c";
        var s1    = "font-size:5em;color:red;font-weight:bolder;text-shadow:5px 5px 2px #fff, 5px 5px 2px #373E40, 5px 5px 5px #A2B4BA, 5px 5px 10px #82ABBA;"
        var s2    = "color:#495A80;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 1px 0 #bbb;font-size:20px";
        console.info(char + "哈哈", s1);

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

    </script>
</body>
</html>

JS文件代码:

 /*
 * 描 述:Util.Log 控制台日志输出
 */

; !(function (console, isDebug) {
    "use strict";

    /**
     * @description 获取样式的颜色值
     * @param {String} type - 样式名称 [ primary | success | warning | error | text ]
     * @return {String} String - 返回颜色值
     */
    function typeColor(type) {
        type = type || '';
        let color = '';       
        switch (type) {
            case 'primary': color = '#2d8cf0'; break; //蓝
            case 'success': color = '#19be6b'; break; //绿
            case 'warning': color = '#ff9900'; break; //黄
            case 'error': color = '#ed4014'; break; //红
            case 'text': color = '#000000'; break; //黑
            default: color = '#515a6e'; break; //灰
        }
        return color;
    }

    /**
    * @description 打印一个 [ title | text ] 胶囊型样式的信息
    * @param {String} title - title text
    * @param {String} info - info text
    * @param {String} type - style
    */
    console.capsule = function (title, info, type = 'primary', ...args) {
        //Js字符串拼接 ${ }
        console.log(
            `%c ${title} %c ${info} %c`,
            'background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;',
            `background:${typeColor(type)}; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff;`,
            'background:transparent', ...args
        );
    };

    /**
    * @description 打印丰富多彩的文字
    * @param {String} value - 打印值
    * @param {String} style - style样式
    */
    console.colorful = function (value, style,...args) {
        console.log(
            `%c ${value || ""}`, `${style || ""}`, ...args
        );
    };

    /**
    * @description 打印 default 样式的文字
    * @param {String} value - 打印值
    */
    console.default = function (value, ...args) {
        console.colorful(value, `color: ${typeColor("default")};`,...args);
    };

    /**
    * @description 打印 primary 样式的文字
    * @param {String} value - 打印值
    */
    console.primary = function (value, ...args) {
        console.colorful(value, `color: ${typeColor("primary")};`, ...args);
    };

    /**
    * @description 打印 success 样式的文字
    * @param {String} value - 打印值
    */
    console.success = function (value, ...args) {
        console.colorful(value, `color: ${typeColor("success")};`, ...args);
    };

    /**
    * @description 打印 warning 样式的文字
    * @param {String} value - 打印值
    */
    console.warning = function (value, ...args) {
        console.colorful(value, `color: ${typeColor("warning")};`, ...args);
    };

    /**
    * @description 打印 error 样式的文字
    * @param {String} value - 打印值
    */
    console.error = function (value, ...args) {
        console.colorful(value, `color: ${typeColor("error")};`, ...args);
    };

    /**
    * @description 打印 3D 样式的文字
    * @param {String} value - 打印值
    */
    console.text3D = function (value, ...args) {
        //let style = "font-size:5em;color:red;font-weight:bolder;text-shadow:5px 5px 2px #fff, 5px 5px 2px #373E40, 5px 5px 5px #A2B4BA, 5px 5px 10px #82ABBA;"
        let style = "color: #393D49;font-size:2.5em;font-weight:bolder;text-shadow: 0 1px 0 #fff,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,.1),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.colorful(value, style, ...args);
    };

    /**
    * @description 打印 彩色 样式的文字
    * @param {String} value - 打印值
    */
    console.rainbow = function (value, ...args) {
        let style = '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;';
        console.colorful(value, style, ...args);
    };

    /**
    * @description 打印 图片
    * @param {String} imgUrl - 图片路径
    * @param {String} padding - padding值
    */
    console.picture = function (imgUrl, padding, ...args) {
        let style = `padding:${padding || "0px"};background:url('${imgUrl || ""}') no-repeat center;`;
        console.log(
            `%c `, `${style || ""}`, ...args
        );
    };

    /**
    * @description 打印 分组 console.group
    * @param {String} groupName - 组名
    * @param {Array} obj - 对象
    */
    console.groupBy = function (groupName, obj, ...args) {
        obj = obj || {};
        //#9E9E9E #03A9F4  #4CAF50 #6a6b6d
        let style = `color: #9E9E9E; font-weight: bold`;

        console.group(`${groupName}`);
        for (let key in obj) {
            console.log(`%c ${key} :`, `${style || ""}`, obj[key], ...args);
        }
        console.groupEnd();
    };

    /**
    * @description 打印 Object和Array等引用类型,打印的是该类型的值,而不是打印引用地址的值([object Object] 、[object Array])
    */
    console.print = function (...args) {
        try {
            let arr = [];
            arr.push(...args);
            arr.forEach((item, index) => {
                if (Object.prototype.toString.call(item) === '[object Object]' || Object.prototype.toString.call(item) === '[object Array]') {
                    arr[index] = JSON.parse(JSON.stringify(item));
                }
            });
            console.log(...arr);
        } catch (e) {
            console.error(`logger error: ${e}`);
        }
    };


    //是否调试模式,非调试模式不输出
    isDebug = isDebug || false;
    if (!isDebug) {
        for (let key in console) {
            console[key] = function () { };
        }
        return;
    }

})(window.console, true); //不需要输出信息时,改为false即可



暗锚,解决锚点偏移

文章评论

    嘿,来试试登录吧!