今天看`简书`文章，习惯性的打开了开发者工具，于是发现了意见有意思的事，在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. how to convert Map to Object in js

    how to convert Map to Object in js Map to Object just using the ES6 ways Object.fromEntries const lo ...

  2. Swift 5.1

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

  3. Techme INC解读基因魔剪，带来的是机遇还是风险？

    10月7日,诺贝尔化学奖颁给了法国美国生物学家Jennifer Doudna和生物化学家Emmanuelle Charpentier,以表彰她们对新一代基因技术CRISPR的贡献,全网沸腾. CRIS ...

  4. 创建gitHub账户并配置秘钥

    1. 登录注册地址 https://github.com/ 2.点击注册 Sign up 3.输入邮箱 密码 进行注册 4.注册成功后,登录邮箱验证 .然后通过邮箱和密码登录gitHub.设置 set ...

  5. 03.Jupyter Notebook高级-魔法命令

    %run %run C:\Users\User\Desktop\hello.py hello world %timeit %timeit L = [i for i in range(1000)] 29 ...

  6. 25_MySQL 数据操作语言：UPDATE语句

    -- UPDATE 把每个员工的编号和上司的编号都加1,用 ORDER BY 完成 UPDATE t_emp SET empno=empno+1,mgr=mgr+1 ORDER BY empno DE ...

  7. 为什么Linux默认页大小是4KB

    本文转载自为什么 Linux 默认页大小是 4KB 导语 我们都知道 Linux 会以页为单位管理内存,无论是将磁盘中的数据加载到内存中,还是将内存中的数据写回磁盘,操作系统都会以页面为单位进行操作, ...

  8. AttributeError: 'function' object has no attribute 'as_view'

    我的描述:当我启用jwt_required来进行token验证的时候,我提示错误; 解决方案: 修改前代码: 修改后代码: 多看书.多多了解.多看看世界...

  9. 1102 Invert a Binary Tree——PAT甲级真题

    1102 Invert a Binary Tree The following is from Max Howell @twitter: Google: 90% of our engineers us ...

  10. js中国标准时间转换成datetime格式

    var format = function (time, format) { var t = new Date(time); var tf = function (i) { return (i < ...