今天看`简书`文章，习惯性的打开了开发者工具，于是发现了意见有意思的事，在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. Raspberry Pi 电路图模拟器

    Raspberry Pi 电路图模拟器 Circuit Diagram / Circuit Graph https://fritzing.org/learning/tutorials/building ...

  2. NGK：APP一站式挖矿高收益项目

    NGK是10月中旬刚上线的公链项目,采用手机挖矿形式.NGK数字增益平台,200美金即可入场,收益可观,分为静态和动态两种,投资算力收益超高.邀请好友挖矿还有额外的返佣. NGK立志为所有人创造无差别 ...

  3. 教你玩转CSS Overflow

    CSS 布局 - Overflow CSS overflow 属性用于控制内容溢出元素框时显示的方式. <style> #overflowTest { background: #4CAF5 ...

  4. 18_MySQL之HAVING字句的使用

    本节涉及的sql语句: -- HAVING -- 错误示例 SELECT deptno FROM t_emp WHERE AVG(sal)>=2000 GROUP BY deptno; 因为wh ...

  5. Python数据结构与算法_搜索插入位置（07）

    给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元素. 示例 1: 输入: [1,3,5,6], 5输出 ...

  6. js---it笔记

    typeof a返回的是字符串 vscode scss安装的easy scss中的配置settingjson文件中的css编译生成路径是根目录下的

  7. GET和POST两者的区别

    GET 和 POST 是 HTTP 协议中的两种发送请求的基本方法,对于前端开发者而言,几乎每天都在使用它们,再熟悉不过了,一般也都能说出几点两者的区别. 如果面试中被问到这个问题,先回答一下几点,肯 ...

  8. Vim的基本命令

    Vi vi的两种模式 ①commad命令模式:无法输入任何东西,需要按下i进入编辑模式 ②edit编辑模式:按下esc退出到命令模式,在命令模式下按下wq [文件名] 可以退出并且成功的保存 //一些 ...

  9. springboot源码（4）

    我们上3个篇章写了springboot的自动装配.servlet组件的注入以及web容器实现内嵌的原理,现在我们来看springboot启动过程中到底做了些什么,也就是打开我们的run方法: 这里我们 ...

  10. Hi3559板载u-boot、kernel及rootfs烧录过程及心得

    这一篇随笔讲叙述下基于Hi3559AV100的BOXER-8410AI板载u-boot.kernel及rootfs烧录具体过程及遇到问题的解决方法与心得. 1.前期板载启动测试和烧录手段 1.1.烧写 ...