Stylized console logging

Question

When I'm on Facebook and have the console open, I see this image below. How do they do this?

enter image description here

Duplicate? http://stackoverflow.com/questions/22687459/console-message-javascript-with-green-checkmark. Or at least I'd assume this is how it's done. — Felix Kling, Oct 09 '14 at 17:19

score 55 · Accepted Answer · edited Feb 05 '19 at 21:23

55

Just like in Firebug you can use %c to style console log output. Look how we could implement Facebook's example:

console.log("%cStop!", "color: red; font-family: sans-serif; font-size: 4.5em; font-weight: bolder; text-shadow: #000 1px 1px;");

Facebook's example

Since it supports CSS properties, we can even "draw" images in there:

(function(url) {
  // Create a new `Image` instance
  var image = new Image();

  image.onload = function() {
    // Inside here we already have the dimensions of the loaded image
    var style = [
      // Hacky way of forcing image's viewport using `font-size` and `line-height`
      'font-size: 1px;',
      'line-height: ' + this.height + 'px;',

      // Hacky way of forcing a middle/center anchor point for the image
      'padding: ' + this.height * .5 + 'px ' + this.width * .5 + 'px;',

      // Set image dimensions
      'background-size: ' + this.width + 'px ' + this.height + 'px;',

      // Set image URL
      'background: url('+ url +');'
     ].join(' ');

     // notice the space after %c
     console.log('%c ', style);
  };

  // Actually loads the image
  image.src = url;
})('https://i.cloudup.com/Zqeq2GhGjt-3000x3000.jpeg');

Displaying an image on console log

edited Feb 05 '19 at 21:23

BrunoLM

97,872
84
296
452

answered Oct 09 '14 at 19:09

2

Works in Chrome 54.0.2840.100 (64-bit) – Eugene Pankov Nov 25 '16 at 15:35
3

+1 for the background-image example. Any idea why it's also logging 'undefined'? I can't seem to get rid of that. – Tim Cooke Mar 31 '17 at 00:04
3

@Olivier try doing -> `'%c '`, notice the space. I looks like because you are not rendering any text, there is nothing for it to style. – Keith Dec 19 '18 at 15:44
1

Example will log the image to console twice, not quite sure why. Using chromium 71 – Anticom Mar 06 '19 at 15:49
2

Nice, it work. In my case i have 2 image (repeated). Any idea why? – Andrea_86 Apr 02 '19 at 14:25
For those getting repeating, try this: `background: no-repeat url(${url})` – BayssMekanique Feb 07 '20 at 17:20
This stopped working, any idea why ? – Wonay Feb 03 '23 at 10:15
@Wonay use data URI instead of image URL – Amin Rahimi Apr 01 '23 at 13:04

VasilSlavchev · Answer 2 · 2020-07-24T10:18:50.943

3

For those who have two images, repeated, add background no-repeat as @BayyMekenique says but also change this line:

code 'line-height: ' + this.height + 'px;', code

to this:

code 'line-height: ' + this.height % 2 + 'px;', code

edited Jul 24 '20 at 10:18

answered Jul 24 '20 at 10:01

VasilSlavchev

111
2

This stopped working, any idea why ? – Wonay Feb 03 '23 at 10:15

score 1 · Answer 3 · answered Sep 21 '20 at 15:16

1

I wrapped this solution in a nice library:

https://www.npmjs.com/package/console-log-img

It can also display images from a Canvas or Image element, ImageBitmap and more!

answered Sep 21 '20 at 15:16

dmitru

371
3
12

Stylized console logging

3 Answers3

Linked