打开网易新闻 查看精彩图片

你是否在开发一个大型网站或者应用时，需要把许多日志输出到浏览器的控制台上？本文将介绍如何用 %c识别符为这些日志增加样式以方便区分和调试。

为日志增加样式可以标记那些重要的日志，以免被众多其他日志淹没。这点非常重要，可以帮你从控制台中快速定位到所需的调试信息。

首先我们以百度首页为例，打开浏览器的控制台会看到如下信息：

打开网易新闻 查看精彩图片

在上图中我们可以看到日志中包含了红色字体，可以醒目地提醒你把简历发送给他们 :D

我们首先来实现同样的效果：

打开网易新闻 查看精彩图片

什么是 %c ？

%c指令会为输出到控制台的日志应用CSS样式，具体的样式需要作为console.log() 函数的第二个参数传递进去。

你可以在控制台中输入如下代码：

打开网易新闻 查看精彩图片

在这个例子中：

l %c 是console.log()第一个参数中的识别符。它会把第二个参数中的CSS样式应用到日志上。

l ‘Hello World’是日志信息

l 'color: cyan; background: pink; font-size: x-large' 是CSS样式

打开网易新闻 查看精彩图片

使用多个 %c

如果你想使用多个样式，那么需要使用多个 %c ，同时需要增加对应的样式。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

支持的CSS属性

  • background 及其全写格式
  • border 及其全写格式
  • border-radius
  • box-decoration-break
  • box-shadow
  • clear 和 float
  • color
  • cursor
  • display
  • font及其全写格式
  • line-height
  • margin
  • outline及其全写格式
  • padding
  • text-* 属性，例如 text-transform
  • white-space
  • word-spacing 和 word-break
  • writing-mode

如上是可以在 console.log 中使用的CSS属性，不同的浏览器可能存在细微差异。默认情况下日志信息展示时会类似行内元素的方式展示。要看到 padding, margin 等效果，需要设置日志的display属性值，例如 display: inline-block。

其他 console 消息

不只是 console.log 可以应用 %c，还可以应用到：

  • console.info
  • console.warn
  • console.error

打开网易新闻 查看精彩图片