JavaScript - 为控制台日志的文本添加样式[重复]

Posted 2023-02-22

【中文标题】JavaScript - 为控制台日志的文本添加样式[重复]

【英文标题】：JavaScript - adding style to the text of console log [duplicate]

【发布时间】：2014-09-09 18:35:54

【问题描述】：

最近我在 Chrome 浏览器上登录了我的 FB 帐户。当我打开开发者工具时，我看到了这样的东西：

现在我知道可以使用 javascript console.log 函数向控制台添加任何内容。但我的问题是——他们是如何为文本添加样式的？例如。 “停止！”用黑色边框和较大尺寸的红色 tahoma 字体书写。他们是怎么做到的？

【参考方案1】：

Addy Osmani 有一个很好的解释：

https://plus.google.com/+AddyOsmani/posts/TanDFKEN9Kn (archive.org)

Chrome DevTools (Canary) 中的样式化控制台日志记录

感谢 +Mike West 先生，您现在可以为控制台日志添加样式 通过 %c，就像在 Firebug 中一样。例如

console.log("%cBlue!", "color: blue;"); 

现在也支持console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;'); 等块:)

虽然大多数人可能会将其用于实际目的，但它是 也可以玩得开心:)（见下文）

不甘示弱，这就是 +Mike West 几天前提出的建议

;)

相关变更：http://trac.webkit.org/changeset/130941

---

基本上，您可以使用%c 参数来传递CSS 样式。例如，在您的 chrome 控制台中尝试以下操作：

console.log("%cBlue! %cGreen", "color: blue; font-size:15px;", "color: green; font-size:12px;");

【讨论】：

这是正确的，但通常最好至少解释一下链接，以防链接失效。

@MikeC 在编辑中添加:)

@RuchirGupta 释义只是总结信息。基本上，您从链接中获取重要信息并将其写在答案中。

并非所有浏览器都支持此功能。 Chrome 和 FF 都可以。 IE11 不是。不知道别人。有没有办法嗅探这个功能？

链接现已断开，因为 Google+ 已关闭。