带有颜色的 JS 控制台日志

在 JavaScript 开发中，控制台日志是一个非常有用的调试工具。它可以帮助我们定位问题，并输出一些有用的调试信息。在某些情况下，我们需要为控制台日志添加一些颜色，以便更容易地识别它们。

使用 console.log() 输出带有颜色的信息

可以使用 console.log() 方法在控制台输出文本信息。我们可以通过在文本前加上特殊的样式代码来设置文本的颜色。

console.log('%c 这段文本带有颜色', 'color: red');

上面的代码会将文本的颜色设置为红色。可以通过修改 'color' 属性来更改文本的颜色。可以将其设置为 CSS 所支持的任何颜色名称、十六进制值或 RGB 值。

我们还可以在样式代码中添加其他样式属性，如下面的例子所示：

console.log('%c 这段文本带有颜色和粗体字', 'color: orange; font-weight: bold;');

以上代码将文本颜色设置为橙色，并将其字体设置为粗体。

输出错误信息

当我们在代码中遇到错误时，会自动在控制台中输出错误信息。然而，我们也可以自己输出错误信息，并为其设置不同的样式代码。

console.error('%c 这是一个错误信息', 'color: red;');

上面的代码将输出一个带有红色文本的错误信息。

输出警告信息

类似地，我们也可以使用 console.warn() 方法输出一个带有警告样式的警告信息。

console.warn('%c 这是一个警告信息', 'color: yellow; background-color: black;');

上面的代码将输出一个带有黄色文本和黑色背景的警告信息。

定制样式代码

除了在样式代码中设置颜色和字体之外，我们还可以设置其他样式，如下所示：

console.log('%c 这段文本带有多个样式', 'color: blue; background-color: yellow; font-size: 20px; padding: 5px;');

上面的代码将为文本设置蓝色颜色、黄色背景、20 像素的字体大小和 5 像素的填充。

结论

使用带有颜色的控制台日志可以让开发人员更轻松地识别日志消息。使用 console.log()、console.error() 和 console.warn() 方法可以轻松地输出带有样式的文本信息。我们可以使用 CSS 样式设置任何样式属性，使日志消息更具吸引力和易于阅读。