Advanced styling of browser console.log

user_270274 0
Viewed 1130

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.

devtools console.log google-chrome-devtools css javascript
1 Answers

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
user_5500560
Related