47

Recently I logged into my FB account on Chrome Browser. When I opened the developer tools, I saw something like this:

enter image description here

Now I know that it is possible to add anything to console using the javascript console.log function. But my question is -- how did they add style to the text? E.g. "Stop!" is written in red tahoma font with black border and larger size. How did they do it?

Hashem Qolami
  • 88,138
  • 25
  • 132
  • 151
Ruchir Gupta
  • 870
  • 3
  • 9
  • 18

1 Answers1

71

Addy Osmani has a good explanation:

https://plus.google.com/+AddyOsmani/posts/TanDFKEN9Kn (archive.org)

Styled console logging in the Chrome DevTools (Canary)

Thanks to Mr. +Mike West, you can now add style to your console log via %c, just like you can in Firebug. e.g

console.log("%cBlue!", "color: blue;");

Blocks such as console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;'); are also now supported :)

Whilst most people will probably use this for practical purposes, it's also possible to have a little fun with it :) (see below)

Not to be outdone, here's what +Mike West came up with a few days ago

;)

Relevant change: http://trac.webkit.org/changeset/130941

Basically, you can use the %c paramater to pass in CSS styling. For an example, try the following in your chrome console:

console.log("%cBlue! %cGreen", "color: blue; font-size:15px;", "color: green; font-size:12px;");
Timo Tijhof
  • 9,597
  • 6
  • 31
  • 45
khalid13
  • 2,487
  • 2
  • 28
  • 44
  • 3
    This is correct but generally it's preferred that you at least paraphrase the link, just in case the link ever goes down. – Mike Cluck Jul 18 '14 at 15:05
  • 3
    @MikeC Added in an edit :) – khalid13 Jul 18 '14 at 15:08
  • @khalid13 Got it. One more thing I learnt from this post. This is how Chrome shows a warning to the web developers for using `dppx` instead of `dpi` in the media queries. [link] (http://imgur.com/5UGcVOw) – Ruchir Gupta Jul 18 '14 at 15:12
  • @MikeC sorry, I am new in StackOverflow. What is "paraphrasing" a link? I'm asking so that I can keep it in mind while answering to someone else. – Ruchir Gupta Jul 18 '14 at 15:14
  • 2
    @RuchirGupta Paraphrasing just means to sum up the information. Basically, you take the important information from the link and write it in the answer. – Mike Cluck Jul 18 '14 at 15:19
  • Ty! Just to add, line breaks `(\n)` work as well, any other secrets? :) – NiCk Newman Aug 28 '15 at 00:51
  • 1
    is there a way to set the default style for console messages – ArUn Nov 28 '16 at 18:27
  • 3
    This is not supported in all browsers. Chrome and FF are OK. IE11 is not. Don't know about others. Is there a way to sniff for this feature? – Okonomiyaki3000 Jan 24 '17 at 06:50
  • 1
    This only seems to work in the first parameter, i.e `console.log('%cyellow', 'background: yellow')` works, but not `console.log(123, '%cyellow', 'background: yellow')`. Is there a trick to do that? – ᆼᆺᆼ Sep 26 '17 at 17:49
  • A bit late, but `%_` for any `_` is a formatting placeholder, these only work in the first position. For the above case, `console.log('%d %cyellow', 123, 'background: yellow')` works. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/console#Outputting_text_to_the_console) has more info. – Simon Buchan Jul 17 '18 at 01:46
  • 5
    Link is now broken because Google+ has closed. – Anwar Apr 06 '19 at 08:47
  • 1
    @Anwar Thanks. I've added an archive.org link now, and copied it main text into a blockquote here. – Timo Tijhof Apr 30 '20 at 23:44