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

杰瑟琳·耶恩 (Jecelyn Yeen)
Jecelyn Yeen
Twitter GitHub 首页

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

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

设置控制台消息的格式

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

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

例如，cHTML（适用于特定类型的移动设备）和HTML（通常用于台式计算机）的内容类型皆为

  1. 打开控制台
  2. 输入以下控制台命令。 js 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. 输入以下控制台命令。 js 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. 输入以下控制台命令。 js 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. 输入以下控制台命令。 js console.log('Jane has %i kiwis.', 'two');
  2. 上述命令会生成 Jane has NaN kiwis. 消息。 控制台消息中的 NaN
  3. %i 表示值应该/将会转换为整数，但实参是字符串。因此，它会返回 NaN (Not-A-Number)。

设置控制台消息样式

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

带有格式说明符的样式

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

  1. 输入以下控制台命令。 js 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. 输入以下控制台命令。 js 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. 输入以下控制台命令。 ```js 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