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

I 'waddled' by the Console in Chrome on Facebook today.
Surprisingly I got this message in the console.
如何创建格式化的javascript控制台日志消息
Now my question is:
How is this possible?
I know that there are a few 'exploit' methods for the console, but how can you make such font formatting in the console? (and is it console.log?)

今天，我在Facebook的Facebook上“摇摇欲坠”。令人惊讶的是，我在控制台得到了这个消息。现在我的问题是:这怎么可能?我知道控制台有一些“利用”的方法，但是如何在控制台中创建这种字体格式呢?(console.log吗?)

4 个解决方案

#1

Yes, you can format the console.log() with something like this:

是的，您可以将console.log()设置为以下内容:

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

Note the %c preceding the text in the first argument and the style specifications in the second argument. The text will look like your example.

注意第一个参数中的文本前面的%c和第二个参数中的样式规范。文本将类似于您的示例。

See Google's "Styling Console Output with CSS" or FireBug's Console Documentation for more details.

更多细节请参见谷歌的“CSS样式控制台输出”或FireBug的控制台文档。

The documentation links also include some other neat tricks like including object links in a console log as well.

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

#2

Try this:

试试这个:

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

Quoting the docs,

引用的文档,

You use the %c format specifier to apply custom CSS rules to any string you write to the Console with console.log() or related methods.

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

Source: https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

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

#3

You can also format substrings.

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

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

#4

From Google's website: site

从谷歌的网站:网站

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

#1