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

Question

今天我在Facebook上的Chrome控制台"摇摇晃晃".
令人惊讶的是,我在控制台中收到了此消息.

现在我的问题是:
这怎么可能？
我知道控制台有一些"漏洞利用"方法,但是如何在控制台中进行这种字体格式化呢？(它是console.log吗？)

Answer 1

是的,您可以使用以下内容格式化console.log():

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

请注意%c第一个参数中的文本和第二个参数中的样式规范.文本看起来就像你的例子.

有关详细信息,请参阅Google的"带CSS的样式控制台输出"或FireBug的控制台文档.

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

Answer 2

试试这个:

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

引用文档,

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

资料来源:https: //developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

Answer 3

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

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

Answer 4

来自Google的网站:网站

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