如何创建格式化的JavaScript控制台日志消息

91

我今天在Facebook上的Chrome浏览器中“摇摇欲坠”。
令人惊讶的是，我在控制台中收到了此消息。

现在我的问题是：
这怎么可能？
我知道控制台有几种“利用”方法，但是如何在控制台中进行这种字体格式化？（它是console.log吗？）

javascript html google-chrome webkit exploit

— 安德斯·凯杰森（Anders Kjeldsen）
source

131

是的，您可以使用以下格式设置console.log()：

console.log("%cExtra Large Yellow Text with Red Background", "background: red; color: yellow; font-size: x-large");

请注意%c第一个参数中的前面的文本和第二个参数中的样式规范。文本看起来像您的示例。

文档链接还包括其他一些巧妙的技巧，例如在控制台日志中包括对象链接。

— 达拉斯
source

在尝试使用中的格式字符串之前，您可能需要检查是否正在使用兼容的浏览器console.log，因为较早的浏览器可能会异常停止您的脚本。 caniuse说它是在Firefox 9和Edge 79中引入的；Chrome显然早于Chrome 83就开始支持它了，但我们不知道确切的时间。

— 西拉斯·布朗

38

试试这个：

console.log("%cThis will be formatted with blue text", "color: blue");

引用文档，

您可以使用％c格式说明符将自定义CSS规则应用于使用console.log（）或相关方法写入控制台的任何字符串。

— 模糊
source

7

嗨，downvoter，有什么要补充的吗？-当您不发表评论解释自己时，很难改善答案（您认为不好）。:)

— blurfus

30

您还可以格式化子字符串。

var red = 'color:red';
var blue = 'color:blue';
console.log('%cHello %cWorld %cfoo %cbar', red, blue, red, blue);

— 克日斯托夫·博杜奇（Krzysztof Boduch）
source

4

请注意，只能在的第一个参数内console.log设置样式，并且样式必须立即跟随。

— Qwerty

9

从Google网站：site

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

— 乔纳森
source