在 Chrome 和 Firefox 中设计 JavaScript 控制台的样式

在当今的 Web 开发领域，JavaScript 控制台已成为调试错误不可或缺的工具并显示信息。然而，当尝试区分不同类型的消息时，标准单色输出可能会受到限制。这个问题解决了一个常见问题：JavaScript 控制台能否显示颜色，允许开发人员自定义错误、警告和常规日志消息的外观？

对于 Chrome 和 Firefox，答案是肯定的。事实证明，这些浏览器提供了方便的 CSS 机制，允许开发人员向 console.log 消息添加样式。通过将 CSS 样式注入日志输出，您可以对不同类型的消息进行颜色编码，使它们更具视觉吸引力且更易于区分。

例如，如果您希望错误以红色显示，警告以橙色显示，并且 console.log 消息为绿色，您只需在控制台中执行以下代码即可：

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

这将在控制台中输出一条带有红色背景和橙色文本的消息，有效地突出显示错误。您可以使用此技术自定义任何类型日志消息的外观，从而更轻松地导航和查明问题或检索特定信息。