6

The output of console.log can be styled and the basics are covered at the StackOverflow question Colors in JavaScript console.


Basic Styling

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

enter image description here


Advanced Styling

What about advanced styles? How far can console.log be styled?

How about images? Using background-image doesn't seem to work.

How about display: block? It seems that setting display: block has no effect.

How about custom fonts? font-family seems to work but how to use custom fonts?

For my use case, I only need Chrome support.


Edit

I managed to implement images. The trick is to use a padding to set the size of the image. For example:

var style = [
  'background-image: url("https://media.giphy.com/media/3o85xoi6nNqJQJ95Qc/giphy.gif")',
  'background-size: contain',
  'background-repeat: no-repeat',
  'color: #000',
  'padding: 20px 20px',
  'line-height: 0px'
  ].join(';');
console.log('%c ', style);

Edit 2

Firefox blocks external images in console styles, but supports dataURIs: https://bugzil.la/1134512. Also, Firefox let's you simply display: block entries, see the list of properties supported by Firefox.

brillout
  • 7,804
  • 11
  • 72
  • 84
  • https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css – Arthur Rubens Jul 08 '20 at 11:27
  • @ArthurRubens I know about this but it is, unfortunately, nowhere close to a full spec. – brillout Jul 08 '20 at 11:41
  • 2
    You can inspect the source code of devtools frontend, it's in JS. – wOxxOm Jul 08 '20 at 11:43
  • @wOxxOm Do you mean reading the source code of Chromium, or inspecting the DOM of the console? I'd love to insepct the DOM and I tried but didn't get there. Thanks! – brillout Jul 08 '20 at 11:46
  • 1
    You can do both. For the second thing see [How do you inspect the web inspector in Chrome?](https://stackoverflow.com/q/12291138) – wOxxOm Jul 08 '20 at 11:49
  • 1
    Note (to self): Firefox blocks external images in console styles, but supports dataURIs. https://bugzil.la/1134512 (Also, Firefox let's you simple `display:block` entries.) – myf Jul 10 '20 at 11:51
  • Also note MDN has nice list of *properties usable along with the `%c` syntax **at least in Firefox** browser* https://developer.mozilla.org/en-US/docs/Web/API/Console#Styling_console_output – myf Jul 10 '20 at 11:56
  • https://stackoverflow.com/a/23320779/10002142 This might help. – Prabesh Gouli Jul 11 '20 at 06:20

1 Answers1

12

Chrome / Chromium seems to allow CSS properties beginning with any of the following prefixes:

  • background
  • border
  • color
  • font
  • line
  • margin
  • padding
  • text
  • -webkit-background
  • -webkit-border
  • -webkit-font
  • -webkit-margin
  • -webkit-padding
  • -webkit-text

For completeness' sake, @myf has already linked to the properties supported by Firefox. They are:

  • background and its longhand equivalents.
  • border-radius
  • border and its longhand equivalents
  • box-decoration-break
  • box-shadow
  • clear and float
  • color
  • cursor
  • display
  • font and its longhand equivalents
  • line-height
  • margin
  • outline and its longhand equivalents
  • padding
  • text-* properties such as text-transform
  • white-space
  • word-spacing and word-break
  • writing-mode
Niels Ganser
  • 2,320
  • 1
  • 16
  • 13