用艺术点缀代码：五彩缤纷的Console.log

2024-02-23 09:51:22

前台的同行们一定对console.log很熟悉，但也许和我一样，你们一直只用过最常规的用法——在控制台中打印一条message。然而，今天我发现，原来我们还可以给console.log应用样式呢！如果你们不知道，那就和我一起往下看吧。

Console.log的艺术之旅

使用多彩的console.log，就像在代码中添加了艺术点缀，让调试和日志记录变得赏心悦目。你可以通过在浏览器控制台中使用不同的样式代码，轻松地为输出的消息着色。

操作步骤：

打开浏览器的开发者工具，通常可以通过按键盘快捷键"Ctrl+Shift+I"或"Cmd+Option+I"来打开。
找到"Console"选项卡。
在控制台输入"console.log"，然后在括号中输入你想打印的消息。
在"console.log"后面添加样式代码，通常以"%c"开头，后面跟着样式字符串。
样式字符串可以包含文本颜色、背景颜色、字体大小等信息，使用分号分隔不同的样式属性。

示例：

console.log("%cHello, world!", "color: red; font-size: 20px;");

输出：

Hello, world!

文字以红色显示，字体大小为20像素。

更多示例：

console.log("%cSuccess!", "color: green; background-color: black;");
console.log("%cWarning!", "color: orange; font-weight: bold;");
console.log("%cError!", "color: red; font-size: 30px;");

输出：

Success!
Warning!
Error!

自定义样式代码：

你还可以创建自己的样式代码，并将其保存在变量中，以便在不同的控制台消息中重用。

const successStyle = "color: green; background-color: black;";
const warningStyle = "color: orange; font-weight: bold;";
const errorStyle = "color: red; font-size: 30px;";

console.log("%cSuccess!", successStyle);
console.log("%cWarning!", warningStyle);
console.log("%cError!", errorStyle);