今天看`简书`文章，习惯性的打开了开发者工具，于是发现了意见有意思的事，在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. Promise console.log All In One

    Promise console.log All In One 同步事件/异步事件 微任务/宏任务 js 事件循环原理 先执行 同步事件 在执行,异步事件的所有微任务队列,按照时间顺序 最后执行,异步事 ...

  2. ES-Next @Decorator All In One

    ES-Next @Decorator All In One @装饰器 import { logged } from "./logged.mjs"; class C { @logge ...

  3. Open Collective

    Open Collective Open Collective is an online funding platform for open and transparent communities. ...

  4. MySQL 8.x

    MySQL 8.x SQL & NoSQL $ mysql --version # mysql Ver 8.0.21 for osx10.15 on x86_64 (Homebrew) # M ...

  5. how to disabled prefers-color-scheme in js & dark theme

    how to disabled prefers-color-scheme in js dark theme https://developer.mozilla.org/en-US/docs/Web/C ...

  6. js function call hacker

    js function call hacker you don't know javascript function https://developer.mozilla.org/en-US/docs/ ...

  7. alipay 小程序 & online IDE & demos

    alipay 小程序 & online IDE & demos system-info iOS / Andriod https://opendocs.alipay.com/mini/a ...

  8. uniapp设置不同的主题(Theme)

    App.vue: <style lang="stylus"> @css { html { --primary: blue; --bg-image: url(https: ...

  9. Swift 5.1

    Swift 5.1 WebView & WKWebView https://developer.apple.com/swift-playgrounds/ https://developer.a ...

  10. c++ 遍历当前程序的线程

    #include <iostream> #include <Windows.h> #include <Psapi.h> #include <TlHelp32. ...