How do I create formatted javascript console log messages

Question

I 'waddled' by the Console in Chrome on Facebook today.
Surprisingly I got this message in the console.

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?)

Smern · Accepted Answer · 2017-10-05T16:12:28.597

153

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

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.

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

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

edited Oct 05 '17 at 16:12

answered Mar 03 '14 at 19:53

Smern

18,746
21
72
90

You might want to check that a compatible browser is in use before trying to use format strings in `console.log`, since older browsers might stop your script with an exception. [caniuse says](https://caniuse.com/#feat=mdn-api_console_log_substitution_strings) it was introduced in Firefox 9 and Edge 79; Chrome started supporting it evidently some time before Chrome 83 but we don't know exactly when. – Silas S. Brown Jun 24 '20 at 13:58

score 44 · Answer 2 · edited Apr 06 '17 at 18:03

44

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.

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

edited Apr 06 '17 at 18:03

biphobe

4,525
3
35
46

answered Mar 03 '14 at 19:52

blurfus

13,485
8
55
61

10

Hi downvoter, any comments to add? - it's hard to improve an answer (that you think is not good) when you don't leave comments explaining yourself. :) – blurfus Jul 26 '18 at 18:15

score 36 · Answer 3 · answered Nov 24 '16 at 11:28

36

You can also format substrings.

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

answered Nov 24 '16 at 11:28

Krzysztof Boduch

675
9
12

4

Note that it is only possible to style within the first argument of `console.log` and the styles must follow immediately. – Qwerty Apr 06 '18 at 12:09

score 10 · Answer 4 · edited Apr 06 '17 at 18:11

10

From Google's website: site

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

edited Apr 06 '17 at 18:11

biphobe

4,525
3
35
46

answered Mar 03 '14 at 19:54

Jonathan

8,771
4
41
78

score 3 · Answer 5 · answered Oct 29 '21 at 03:50

Just extending other answers and you can reuse the existing css style of selector, class, element. Try this in SO console window.

const customLog = (message, cssSelector) =>
  console.log(
    `%c${message}`,
    Object.entries(getComputedStyle(document.querySelector(cssSelector)))
      .map(([k, v]) => `${k}:${v}`)
      .join(";")
  );

customLog("Hello StackOverflow", "#question-header > div > a");

customLog("Hello StackOverflow", "strong");

customLog("Hello StackOverflow", "a");

How do I create formatted javascript console log messages

5 Answers5

Linked

Related