JS Console.log 颜色重置 - Javascript

在日常的前端开发中，我们经常使用 console.log() 来打印一些信息或者调试代码。但是默认情况下 console.log() 打印出来的信息都是以黑色字体显示的。当输出信息较多时，不同类型的信息可能会让我们感到混乱。那么，有没有办法改变 console.log() 打印信息的颜色呢？下面让我们来一一介绍。

基础用法

我们可以使用 %c 占位符表示要使用的样式。例如：

console.log('%c Hello World ', 'color: #fff; background: #f00; font-size: 16px;');

上述代码会在控制台打印出“Hello World”，并且文本颜色为白色，背景颜色为红色，字体大小为 16px。

其实我们可以将上述代码封装为一个函数，以便于调用：

function logWithColor(text, css) {
  console.log('%c ' + text + ' ', css);
}

常用样式

以下是一些常用的样式：

• 颜色：color: #fff（#fff 为白色，可以使用任何颜色值）
• 背景色：background: #f00（#f00 为红色，可以使用任何颜色值）
• 字体大小：font-size: 16px（16px 为字体大小，可以使用任何数字）
• 字体粗细：font-weight: bold（bold 表示加粗，可以使用其他值）
• 斜体：font-style: italic（italic 表示斜体，可以使用其他值）
• 下划线：text-decoration: underline（underline 表示下划线，可以使用其他值）

示例

下面是一些示例：

// 粗体红色
logWithColor('Error occurred!', 'color: #fff; background: #f00; font-weight: bold;');

// 加粗黄色
logWithColor('Warning!', 'color: #000; background: #FFCC00; font-weight: bold;');

// 状态信息，灰色
logWithColor('Ready.', 'color: #B8B8B8; background: #000; font-size: 14px;');

// 链接，蓝色并带下划线
logWithColor('Visit my website at http://www.example.com', 'color: #00F; text-decoration: underline;');

以上就是使用 console.log() 改变颜色的方式，不过需要注意的是并非所有浏览器均支持自定义颜色，因此我们需要做好相应的兼容处理。

参考资料：

• MDN Web Docs