JS Console.log 颜色

在开发过程中，经常需要查看一些输出以方便调试和追踪程序。在 JavaScript 中，我们通常使用 console.log() 来输出调试信息。但有时输出信息过多，会让开发者很难通过控制台找到所需信息。为了提高开发效率和便利性，我们可以给 console.log() 输出信息添加颜色，以便更好的分类和识别信息。

在 console.log() 中给输出信息添加颜色

在 console.log() 输出信息时，我们可以使用 %c 字符串占位符指定输出信息的颜色。接下来再跟上要输出的信息即可。下面是一个简单的例子：

console.log('%c这是一段红色的文本','color:red')

输出效果如下：

可以看到，被 %c 占位符所包含的文本被设置为了红色。

更换输出信息的文本颜色

除了改变文本颜色，我们还可以对代码等其他类型的信息进行颜色分类。我们只需要修改 %c 后面所跟的 CSS 样式即可。下面是示例 CSS 样式代码：

background-color: #FFCD40;
color: white;
padding: 1px 5px;
font-size: 12px;
border-radius: 3px;

然后将这段 CSS 样式代码作为第 2 个参数传给 console.log() 方法即可。下面以 PHP 为例，将输出信息的文本颜色设置为橙色：

console.log('%c' + 'PHP','background-color: #FFCD40;color: white;padding: 1px 5px;font-size: 12px;border-radius: 3px;', '这是一段 PHP 代码');

输出效果如下：

给输出信息添加背景颜色

在实际开发中，我们经常需要将信息进行分类显示。比如对于错误信息，我们可以给它们添加红色背景色以便更好的识别。下面是一个示例代码：

console.log('%c' + '错误','background-color: red;color: white;padding: 1px 5px;font-size: 12px;border-radius: 3px;', '这是一条错误信息');

输出效果如下：

除了错误信息，我们还可以凭借颜色：比如绿色背景显示成功信息、黄色背景显示提示信息等等。

其他使用案例

标记输出信息

经常在开发中需要标识某些信息，让它们醒目显示。以下代码可以帮助你快速实现这个目的：

console.log('%c' + '标签','background-color: #2DB7F5;color: white;padding: 1px 10px;font-size: 14px;border-radius: 10px;', '这是一个标签信息');

显示警告信息

console.log('%c' + '警告','background-color: #D7D7D7;color: #FF5232;padding: 1px 10px;font-size: 14px;border-radius: 10px;', '这是一个警告信息');

显示成功信息

console.log('%c' + '成功','background-color: #5CADAD;color: white;padding: 1px 10px;font-size: 14px;border-radius: 10px;', '这是一个成功信息');

总结

通过给 console.log() 输出信息添加颜色，我们可以快速分类和识别信息，并提高开发效率和便利性。在实际开发中，可以使用不同的颜色表示错误信息、标签信息、提示信息、成功信息等等，便于更好的进行信息分类和识别。