chrome控制台中console的格式和样式

设置控制台消息的格式

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

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

例如

  1. 打开控制台
  2. 输入以下控制台命令。
js 复制代码
const tools = 'Chrome DevTools'; 
console.warn('%s is awesome.', tools);
  1. 上述命令会生成 Chrome DevTools is awesome. 消息。

下面列出了 Chrome 开发者工具目前支持的 格式说明符

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

应用多个格式说明符

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

输入以下控制台命令。

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

上述命令会生成 The total weight of 3 apples and 2 oranges is 432.4 grams. 消息。

了解类型转换

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

输入以下控制台命令。

js 复制代码
console.log('I have %i apples and %d oranges.', 2, 3.5);

上述命令会生成 I have 2 apples and 3 oranges. 消息。

  1. 输出内容为 3 oranges,而不是 3.5 oranges%d 表示值应该/将会转换为整数。

以下示例说明了类型转换无效时会出现什么情况。

输入以下控制台命令。

js 复制代码
console.log('Jane has %i kiwis.', 'two');

上述命令会生成 Jane has NaN kiwis. 消息。

  1. %i 表示值应该/将会转换为整数,但实参是字符串。因此,它会返回 NaN (Not-A-Number)

设置控制台消息样式

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

带有格式说明符的样式

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

输入以下控制台命令。

js 复制代码
const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'

console.log("%cHooray", style);

上述命令会生成应用了 CSS 样式的 Hooray

要点 :为了防止数据泄露和绕过安全政策,采用此格式的 url() CSS 函数仅支持 data: 网址架构。 例如,您可以通过以下方式设置背景图片: css background: url(data:image/png;base64,iVBORw...); 其中 iVBORw... 是采用 base64 编码的 PNG 图片。

使用 ANSI 转义序列进行样式设置

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

Node.js 开发者经常会借助 ANSI 转义序列为日志消息着色,这往往要借助一些样式库,例如 chalkcolorsansi-colorskleur

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

\x1B[𝘗1;...;𝘗nm

其中:

  • 𝘗1𝘗nSGR(选择图形呈现)参数的有效子序列。
  • 𝘗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); 
  1. 上述命令会生成一条具有 3 种不同样式的 Hello World 消息。

更多案例

我们看看 b站的:

js 复制代码
console.info("%c%s", "line-height: 30px; color: #FF6699", "bili-fe-mirror:".concat(S))

掘金:

js 复制代码
console.log('%c想要加入稀土掘金?投递简历:https://job.toutiao.com/s/idq6X5rb', 'color:#1e80ff;');

百度

js 复制代码
 window.console && window.console.log && (console.log("这是一个最好的时代,\n科技的发展给予了每个人创造价值的可能性;\n这也是一个最充满想象的时代,\n每一位心怀梦想的人,终会奔向星辰大海。\n百度与你们一起仰望星辰大海,携手共筑未来!\n"),
    console.log("%c百度2023校园招聘简历投递:https://talent.baidu.com/jobs/list", "color:red"))
相关推荐
生椰拿铁You几秒前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生12 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap26 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish34 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记2 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali2 小时前
记录一个奇怪的前端布局现象
前端