How to create formatted javascript console log messages

Question

Now I switched to the console in Chrome on Facebook.

Surprisingly, I received this message in the console.


Now my question is:
How is this possible?
I know that there are several “exploit” methods for the console, but how can you do this font formatting in the console? (and is it console.log?)

Answer 1

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

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

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

See Google Styling Connectors Using CSS or the FireBug Console Documentation for more details.

Documentation links also include some other neat tricks, such as including object references in the console log.

Answer 2

Try the following:

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

Quoting documents

You use the% c format specifier to apply custom CSS rules to any string that you write to the console using console.log () or its associated Methods.

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

Answer 3

You can also format substrings.

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

Answer 4

On Google website : website

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