在控制台中设置消息格式和样式

Jecelyn Yeen

本指南介绍了如何在 Chrome 开发者工具控制台中设置消息的格式和样式。如需了解如何将消息记录到控制台，请参阅日志消息使用入门。

本指南假定您了解 Web 开发的基础知识，例如如何使用 JavaScript 为网页添加交互性。

设置控制台消息的格式

您可以使用格式说明符设置控制台消息的格式。

格式说明符以百分比字符 (%) 开头，以“类型字符”结尾，该字符表示数据类型（整数、浮点数等）。

例如，

  1. 打开控制台

  2. 输入以下控制台命令。

    const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);

  3. 上述命令会生成 Chrome DevTools is awesome. 消息。格式字符串值

下面列出了 Chrome DevTools 目前支持的格式说明符。

说明符 输出
%s 将值格式化为字符串
%i 或 %d 将值设置为整数格式
%f 将值的格式设置为浮点值
%o 将值格式化为可展开的 DOM 元素
%O 将值格式化为可展开的 JavaScript 对象
%c 将 CSS 样式规则应用到第二个参数指定的输出字符串

应用多个格式说明符

您可以在一条消息中使用多个格式说明符。

  1. 输入以下控制台命令。

    console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);

  2. 上述命令会生成 The total weight of 3 apples and 2 oranges is 432.4 grams. 消息。多个格式说明符

了解类型转换

输出消息将根据格式说明符进行转换。

  1. 输入以下控制台命令。

    console.log('I have %i apples and %d oranges.', 2, 3.5);

  2. 上述命令会生成 I have 2 apples and 3 oranges. 消息。设置整数值的格式

  3. 输出为 3 oranges，而不是记录 3.5 oranges。%d 表示该值应/将转换为整数。

以下示例展示了类型转换无效时会出现的情况。

  1. 输入以下控制台命令。

    console.log('Jane has %i kiwis.', 'two');

  2. 上述命令会生成 Jane has NaN kiwis. 消息。控制台消息中显示 NaN

  3. %i 表示该值应/将转换为整数，但参数是字符串。因此，它会返回 NaN（非数字）。

为控制台消息设置样式

您可以通过两种方式在开发者工具中设置控制台消息的样式。

使用格式说明符设置样式

您可以使用 %c 格式说明符通过 CSS 设置控制台消息的样式。

  1. 输入以下控制台命令。

    const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);

  2. 上述命令会生成应用了 CSS 样式的 Hooray。 使用 CSS 设置输出样式

使用 ANSI 转义序列设置样式

您可以使用 ANSI 转义序列为控制台消息设置样式。

Node.js 开发者通常会通过 ANSI 转义序列为日志消息着色，通常会借助 chalk、colors、ansi-colors、kleur 等一些样式库。

不过，您可以使用 ANSI 转义序列设置消息样式，而无需使用任何库。语法如下：

\x1B[𝘗1;…;𝘗nm

其中：

  • 𝘗1 到 𝘗n 是 SGR（选择图形渲染）参数的有效子序列。
  • 可以省略 𝘗1 到 𝘗n 中的任何参数，在这种情况下，系统会假定其值为零。
  • \x1B[m 是 \x1B[0m 的简写形式，其中会重置显示属性。

例如，

  1. 输入以下控制台命令。

    console.log('\x1B[41;93;4mHello\x1B[m');

  2. 上述命令会生成一个背景为红色、文本为黄色且带下划线的 Hello 消息。您好！

下面列出了 DevTools 中支持的颜色代码。

前景 背景 浅色主题 深色主题
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
#55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

下面列出了 DevTools 中支持的样式代码。

参数 含义
0 重置所有显示属性
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 将 underline 添加到 text-decoration 属性
9 将 line-through 添加到 text-decoration 属性
22 重置 font-weight 属性
23 重置 font-style 属性
24 从 text-decoration 属性中移除了 underline
29 从 text-decoration 属性中移除了 line-through
38;2;𝑅?;𝐺?;𝐵? color: rgb(𝑅,𝐺,𝐵)
39 重置color property
48;2;𝑅?;𝐺?;𝐵? background: rgb(𝑅,𝐺,𝐵)
49 重置background property
53 将 overline 添加到 text-decoration 属性
55 从 text-decoration 属性中移除了 overline

下面是一个包含多种样式的更复杂的示例。

  1. 输入以下控制台命令。

    const hello = '\x1B[41;93;4mHello';
const space = '\x1B[m ';
const world = '\x1B[34;102;9mWorld';

console.log(hello + space + world);

  2. 上述命令会生成 3 种不同样式的 Hello World 消息。 Hello World