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

【问题标题】：JavaScript - adding style to the text of console log [duplicate]JavaScript - 为控制台日志的文本添加样式[重复]
【发布时间】：2014-09-09 18:35:54
【问题描述】：

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

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

【问题讨论】：

标签： javascript css console.log

【解决方案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+ 已关闭。