如何在 JS 控制台日志输出中添加颜色?

3,973 阅读1分钟

前言

为了使控制台长输出更容易查看,我们可以为 JavaScript 的控制台日志添加颜色。

通过本文,你将了解如何在浏览器开发控制台的控制台日志输出中添加颜色。

将 CSS 样式添加到控制台日志输出

我们可以使用 %c 标签将 CSS 样式添加到控制台日志输出。

例如,可以这样写:

console.log('%c hello world ', 
'background: #222; color: #bada55');

添加 %c 标签,以便我们可以将第二个参数中的 CSS 样式应用于 hello world 文本。 设置 background 属性来设置背景颜色。 设置 color 属性来改变文本颜色。

console.error 方法

console.error 方法让我们用红色背景记录事情。

这让我们以更明显的方式显示数据。 例如,可以这样写:

console.error("hello world");

来使用该方法。

console.warn 方法

console.warn 方法让我们在黄色背景上记录事情。

要使用它,可以这样写:

console.warn("hello world");

Bash 颜色标志

此外,console.log 允许我们添加 Bash 颜色标志来设置文本的颜色。

例如,可以这样写:

console.log('\x1B[31mhello\x1B[34m world');

\x1B[31 表示红色。 而 \x1B[34m 是蓝色的。

另外,可以通过写来设置文本的背景颜色:

console.log('\x1b[43mhighlighted');

\x1b[43m 将背景颜色设置为黄色。

最后

我们可以使用各种技巧将彩色文本记录到浏览器开发控制台。 一些控制台方法让我们可以以各种方式改变颜色。

那么,在你的网站上 投放一些带颜色的招聘广告信息吧~