今天看`简书`文章，习惯性的打开了开发者工具，于是发现了意见有意思的事，在console面板，发现了如下的日志：

??? 这 ... 有点意思。

如果上面的图片，不能引起你的兴趣，那么你可以再看看这个：

我用 console.log 不是一次两次了，但从来没有意识到，或者曾经知道，后来却忘记了，原来，我们可以通过参数指定 console.log 记录信息样式。

下面，我们来聊聊console.log格式化那点事。通过 console.log 的 MDN 文档(https://developer.mozilla.org/en-US/docs/Web/API/Console)，我们看到，记录日志的时候，可以通过 '%c' 字符串替换，来修改 console 输出的样式，可用的样式属性列表如下：

  • background and its longhand equivalents.

  • border and its longhand equivalents

  • border-radius

  • box-decoration-break

  • box-shadow

  • clear and float

  • color

  • cursor

  • display

  • font and its longhand equivalents

  • line-height

  • margin

  • outline and its longhand equivalents

  • padding

  • text-* properties such as text-transform

  • white-space

  • word-spacing and word-break

  • writing-mode

举个例子:

console.log( "%cMy document: %o", "color: red;", document );

以上代码，我们通过 '%c' 指定了 'My document:' 文本的颜色，'%o' 表示输出一个对象，即将 document 以对象形式输出。其中，后面两个参数的顺序，要和前面字符串替换标识的顺序保持一致。

将上面代码输入命令行，可以看到输出如下：

我们可以看到，'My document:' 为红色，并且 document 显示了其结构。接下来，让我们试试其他属性:

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>

    用 CSS 控制 console.log() 的输出样式

  </title>

</head>

<body>

  <h1> 用 CSS 控制 console.log() 的输出样式 </h1>

  <script type="text/javascript">

  console.log(

    "%c修改文本颜色",

    "color: orange;"

  );

  console.log(

    "%c这个就是%c文章开始时的效果",

    "padding: 1px;" +

    "border-radius: 3px 0 0 3px;" +

    "color: #fff;" +

    "background: #606060;",

    "padding: 1px;" +

    "border-radius: 0 3px 3px 0;" +

    "color: #fff;" +

    "background: #42c02e;"

  );

  console.log(

    "%c改个背景试试",

    "display: inline-block ; background-color: #606060;" +

    "background-size: cover ; padding: 10px 175px 158px 10px ; " +

    "border: 2px solid black ; font-size: 11px ; line-height: 11px ; " +

    "font-family: monospace ;"

  );

</script>

</body>

</html>

上面代码，再 chrome 中运行结果如下：

目前看起来，效果还算不错，对吧，但是，对于日志样式，我们可以做的更多，目前来看，我们要把css字符串传入 console.log 函数中，显得有点冗长，幸运的是，我们是程序员，可以封装一下。封装的第一步，是先做一个能够替换基础 console 各个函数的对象，他应该有如下函数（可以更多）：

  • echo.log()

  • echo.error()

  • echo.warn()

  • echo.trace()

  • echo.group()

  • echo.groupEnd()

而且，就像 console 相关函数，echo 对象的函数也是动态的，可以接收多个参数的。不同之处在于，echo 可以有很多的扩展函数，用于将输入格式化为需要的样式，如：

  • echo.asAlert()

  • echo.asWarning()

接下来，让我们实现它:

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>

    用 CSS 控制 console.log() 的输出样式

  </title>

</head>

<body>

  <h1> 用 CSS 控制 console.log() 的输出样式 </h1>

  <script type="text/javascript">

  // 提供特殊格式日志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);

    }

    // 为 console 函数提供一个 echo-based 代理

    // 本函数使用了一个内部队列用在调用日志函数之

    // 前的预处理日志格式。

    function using(consoleFunction) {

      function consoleFunctionProxy() {

        // 遍历传入参数，我们要构建一个输入参数数组input和

        // 一个字符串参数输入数组modifiers。

        // 在最后，input 数组中的元素将被合并为一个字符串，

        // 用作目标函数的第一个参数，modifiers

        // 数组中的元素将回被作为目标函数的后面的参数。

        //

        // 注意：对于每一个input和modifiers对，我们都要添加

        // 一个重置标识，以不至于影响之后输出的样式。

        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 ({

      // Console(ish) 相关函数.

      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

    });

  })();

</script>

</body>

</html>

上面代码做的事可能不是很容易识别。简单的描述一下就是格式化函数asAlert() 和 asWarning() 把输入的字符串值以及其样式信息存储对象添加到了一个内部的队列中，然后代理函数通过解析队列中的值，并生成格式化字符串以及其他参数，然后将其传入 console 相关函数中。

如果我们在 Chrome 中运行上面页面的时候，输入如下代码：

// 试试多种格式连接输出

echo.log(

  echo.asAlert("This is great!"),

  "Right!", {

    "I am" : "an object"

  },

  null,

  ["an array"],

  function amAnFunction() {},

  echo.asWarning("I mean, right?!?!")

);

echo.log();

// 再试试其他样例

echo.group(echo.asWarning("Arnold Schwarzenegger Movies"));

echo.log("The Running Man");

echo.log(

  "Terminator 2",

  echo.asAlert("Amazing!"),

  echo.asWarning("TOP 100")

);

echo.log("Predator");

echo.log("Twins", echo.asWarning("TOP 50"));

echo.groupEnd();

echo.log();

echo.log(

  echo.asAlert("Winner Winner"),

  "Chicken dinner!"

);

我们在开发面包中就可以看到如下输出：

到此为止，我们发现，再也不用为怎么拼接样式感到烦心了，所有样式都被封装到了代理对象中。

最近准备发奋了，要多写些东西分享了，欢迎关注下面公众号：

更多文章，期待之后的相遇。

等不及要告诉你的一件事-console.log可以指定样式的更多相关文章

  1. 女朋友会 Python 是多么可怕的一件事！

    ​ 阅读文本大概需要 8 分钟. 1 目 标 场 景 女朋友会 Python 是多么可怕的一件事! 一位朋友告诉忽略了一件事,假设女朋友会 Python 的话,那岂不是要翻车?如果是这样的话,女朋友发 ...

  2. 【转载】在IT界取得成功应该知道的10件事

     在IT界取得成功应该知道的10件事 2011-08-11 13:31:30 分类: 项目管理 导读:前面大多数文章都是Jack Wallen写的,这是他的新作,看来要成为NB程序员还要不停的自我总结 ...

  3. 安装完CentOS 7 后必做的七件事

    CentOS是最多人用来运行服务器的 Linux 版本,最新版本是 CentOS 7.当你兴趣勃勃地在一台主机或 VPS 上安装 CentOS 7 后,首要的工作肯定是加强它的安全性,以下列出的七件事 ...

  4. A/B 测试之前必须要了解的 10 件事

    如今,转化率优化(CRO)已是营销人员必须具备的技能,并且与 ROI 直接挂钩.但是在优化网页的转化率方面又有太多因素要考量,如果你已经不堪其忧,请专心做一件事-- A/B 测试. A/B测试,即你设 ...

  5. <转>离婚前夜悟出的三件事

    文/铁眼(简书作者)原文链接:http://www.jianshu.com/p/832be4f659a0?utm_campaign=hugo&utm_medium=reader_share&a ...

  6. 安装完CentOS 7 后必做的七件事[转]

    CentOS是最多人用来运行服务器的 Linux 版本,最新版本是 CentOS 7.当你兴趣勃勃地在一台主机或 VPS 上安装 CentOS 7 后,首要的工作肯定是加强它的安全性,以下列出的七件事 ...

  7. 关于 Java 性能监控您不知道的 5 件事，第 1 部分

    责怪糟糕的代码(或不良代码对象)并不能帮助您发现瓶颈,提高 Java? 应用程序速度,猜测也不能帮您解决.Ted Neward 引导您关注 Java 性能监控工具,从5 个技巧开始,使用Java 5 ...

  8. react.js 你应知道的9件事

    React.js 初学者应该知道的 9 件事   本文假定你已经有了一下基本的概念.如果你不熟悉 component.props 或者 state 这些名词,你最好先去阅读下官方起步和手册.下面的代码 ...

  9. 安装 CentOS 7 后必做的七件事

    原文 安装 CentOS 7 后必做的七件事 CentOS 是最多人用来运行服务器的 Linux 版本,最新版本是 CentOS 7.当你兴趣勃勃地在一台主机或 VPS 上安装 CentOS 7 后, ...

随机推荐

  1. VS Code All in One

    VS Code All in One Visual Studio Code All in One https://github.com/xgqfrms/vscode/ VS Code Shift + ...

  2. element ui 停止维护了

    ️‍♂️ element ui 停止维护了 最近看到有人说 element ui 已经停止维护了,还有点不相信; 不过到 github 验证一下,好像是真的呀 4 个月,没有任何更新了 https:/ ...

  3. JavaScript Semicolon Insertion

    JavaScript Semicolon Insertion https://blog.izs.me/2010/12/an-open-letter-to-javascript-leaders-rega ...

  4. NGK：价值对标比特币，上线暴涨4558%，下一个财富暴增风口

    近期,美股行情多变,一直饱受争议的比特币也成了其中的"弄潮儿".看多者认为,机构的兴趣有助于支撑比特币作为对冲美元疲软和通胀的工具. 特别是今年1月底的时候,马斯克将推特简介更改为 ...

  5. 揭秘高倍矿币 Baccarat BGV，为何NGK DeFi的财富效应如此神奇？

    作为区块链4.0代表的NGK公链,这次也将借助它自己的DeFi版块NGK Baccarat,开启属于它自己的千倍财富之旅. 如果说,比特币能让没有银行账户的人,可以在全球任何时间.地点都能自由进行交易 ...

  6. NGK公链账本技术浅析

    NGK公链账本是一个去中心化加密账本,运行在分布式网络上.分布式账本是区块链技术中最重要的组成部分之一.NGK作为公链资产,在公链中起到桥梁作用,可以促进其他资产(法币.数字资产.股权以及实物资产)交 ...

  7. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  8. Redis与Spring Data Redis

    1.Redis概述 1.1介绍 官网:https://redis.io/ Redis是一个开源的使用ANSIC语言编写.支持网络.可基于内存 亦可持久化的日志型.Key-Value型的高性能数据库. ...

  9. 《Asp.Net Core3 + Vue3入坑教程》-Net Core项目搭建与Swagger配置步骤

    简介 <Asp.Net Core3 + Vue3入坑教程> 此教程仅适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 教程后 ...

  10. socket短连接太多，accept次数很多导致主线程CPU占满，工作线程CPU占用率低

    1.使用epoll的ET模式: 2.开启reuseport方法: Linux 最新SO_REUSEPORT特性:http://www.mamicode.com/info-detail-2201958. ...