为控制台输出定义样式

180 阅读1分钟

参考资料:

Console - Web API 接口参考 | MDN

使用 %c 为打印内容定义样式

// 指令前的文本不会受到影响,但指令后的文本将会使用参数中声明的 CSS 样式。
console.log("This is a %c message", "color: #f00; font-size: 18px;");

Console

%c 语法可用的属性如下

  • background 与其全写版本。
  • border 与其全写版本。
  • border-radius
  • box-decoration-break
  • box-shadow
  • clear 和 float
  • color
  • cursor
  • display
  • font 与其全写版本。
  • line-height
  • margin
  • outline 与其全写版本。
  • padding
  • text-transform 这类 text-* 属性
  • white-space
  • word-spacing 和 word-break
  • writing-mode

注意: 控制台信息的默认行为与行内元素相似。为了应用 padding, margin 这类效果,你应当这样设置display: inline-block.。