你是否在开发一个大型网站或者应用时，需要把许多日志输出到浏览器的控制台上？本文将介绍如何用 %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
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
