Home

Advanced styling of browser console.log

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.

Asked on July 16, 2020 in CSS.
Add Comment
Cancel
1 Answer(s)

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
Cancel
Answered on July 16, 2020.
Add Comment
Cancel

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.