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

Jecelyn Yeen

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

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

设置控制台消息的格式

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

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

例如，

  1. 打开控制台

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

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

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

以下是 Chrome 开发者工具目前支持的格式说明符列表。

说明符 输出
%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 (Not-A-Number)。

设置控制台消息的样式

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

使用格式说明符的样式

您可以使用 %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 消息。 您好！

以下是开发者工具支持的颜色代码列表。

前景 背景 浅色主题 深色主题
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

下面列出了开发者工具中支持的样式设置代码。

参数 含义
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;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 重置color property
48;2;R;G;B 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