HTML特效篇-五、console.log()花样打印

写前端代码，肯定是离不开console.log()调试的。但是，你们知道其实还能使用CSS来设置控制台打印的日志。所以这篇为大家介绍一下如何花样打印日志。

如果查看Mozilla Developer文档Console，你会看到该Console对象支持一些漂亮的功能，例如字符串替换和CSS样式。这两个功能都通过在第一个console.log()参数内使用特殊标记，然后使用一系列用于修改第一个参数的后续参数来工作。

字符串替换，我们可以%o像这样插入一个对象：

console.log("我的document是:%o", document);

CSS样式插入，我们可以使用以下方式设置相同的日志语句的样式%c：

console.log( "%c我的document是: %o", "color: red ;", document );

打印的字体变成了红色。请注意，第二个和第三个参数分别用于修改%c和%o。在这种情况下，color: red影响会影响后面的所有内容%c。

下面我们来看看更多的玩法吧！




    
    
          content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    控制打印样式

我们只是试图在各种语句中投放大量CSS，console.log()以查看它们所支持的内容。并且，当我们在Chrome中运行上述代码时，在控制台输出如下：

为了让这个更好用一点，我将创建一个echo对象来代替console。意思是，它将具有受控制台启发的方法，例如：

// 创建一个日志记录API，其中包含一些特殊的格式信息。
var echo = (function () {
    var queue = [];
    var ECHO_TOKEN = {};
    var RESET_INPUT = "%c ";
    var RESET_CSS = "";
    function alertFormatting(value) {
        
        queue.push({
            value: value,
            css: "display: inline-block ; background-color: #e0005a ; color: #ffffff ; font-weight: bold ; padding: 3px 7px 3px 7px ; border-radius: 3px 3px 3px 3px ;"
        });
        return (ECHO_TOKEN);
    }
    function warningFormatting(value) {
        queue.push({
            value: value,
            css: "display: inline-block ; background-color: gold ; color: black ; font-weight: bold ; padding: 3px 7px 3px 7px ; border-radius: 3px 3px 3px 3px ;"
        });
        return (ECHO_TOKEN);
    }

    function using(consoleFunction) {
        function consoleFunctionProxy() {
            var inputs = [];
            var modifiers = [];
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] === ECHO_TOKEN) {
                    var item = queue.shift();
                    inputs.push(("%c" + item.value), RESET_INPUT);
                    modifiers.push(item.css, RESET_CSS);
                    // 对于其他所有参数类型，直接输出值。
                } else {
                    var arg = arguments[i];
                    if ((typeof (arg) === "object") || (typeof (arg) === "function")) {
                        inputs.push("%o", RESET_INPUT);
                        modifiers.push(arg, RESET_CSS);
                    } else {
                        inputs.push(("%c" + arg), RESET_INPUT);
                        modifiers.push(RESET_CSS, RESET_CSS);
                    }
                }
            }
            consoleFunction(inputs.join(""), ...modifiers);
            // 全部输出后，清空队列。
            queue = [];
        }
        return (consoleFunctionProxy);
    }

    return ({
        // 控制台功能。
        log: using(console.log),
        warn: using(console.warn),
        error: using(console.error),
        trace: using(console.trace),
        group: using(console.group),
        groupEnd: using(console.groupEnd),
        // 格式化功能。
        asAlert: alertFormatting,
        asWarning: warningFormatting
    });

})();
// 混合打印
echo.log(
    echo.asAlert("我是错误"),
    "哈哈哈",
    {"我": "是一个对象"},
    null,
    ["我是一个数组"],
    function amAFunction() { //方法
    },
    echo.asWarning("我是警告")
);
echo.log();
// 测试打印
echo.group(echo.asWarning("周星驰·功夫"));
echo.log("主演：周星驰");
echo.log("类型", echo.asAlert("喜剧!"), echo.asWarning("动作"));
echo.log("2004年");
echo.log("票房", echo.asWarning("1.73亿"));
echo.groupEnd();
echo.log();
echo.log(echo.asAlert("多重打印"), "我是外层");

基本方法是，格式化方法asAlert()和asWarning()会将值和CSS推送到内部队列中。然后，console代理方法将内部队列合并为单个console调用。

正如你所看到的，这种echo抽象使得它封装成一个简单好调用的方法，然后将所有可变参数代理函数传递给它即可。

希望这些有趣的东西可以带给你快乐。

以上就是整篇的所有内容了。

html特效

HTML特效篇-五、console.log()花样打印

相关

标签