google chrome console, print image

Question

About year ago i created a plugin to enhance console logs, main idea was to print images in console, so for example You could add some icons or glyphs.

It was working pretty nice, i saw that there is many of those available online right now. The problem is that none of them are working atm.

I noticed it after last chrome update i think. currently i have version 49.0.2623.112.

All of those plugins including mine works in the same way:

console.log("%c" + dim.string, dim.style + "background: url(" + url + "); background-size: " + (this.width * scale) + "px " + (this.height * scale) + "px; color: transparent;");

For example this one: plugin link on github

Does anyone know how we can print images in console in newer versions of chrome ?

In the lastest documentation, therre's nothing new about displaying images in the console: https://developers.google.com/web/tools/chrome-devtools/debug/console/console-write#string-substitution-and-formatting — ADreNaLiNe-DJ, Apr 27 '16 at 09:31
yes but something has happened that its not possible anymore to print them. — Mevia, Apr 27 '16 at 09:32

score 55 · Accepted Answer · edited Nov 18 '21 at 18:08

55

Try a code example with console F12:

console.log('%c ', 'font-size:400px; background:url(https://pics.me.me/codeit-google-until-youfinda-stackoverflow-answerwith-code-to-copy-paste-34126823.png) no-repeat;');

edited Nov 18 '21 at 18:08

coreyward

77,547
20
137
166

answered Jul 06 '17 at 19:37

KingRider

2,140
25
23

4

It may be useful add `backdround-size: contain;` so the image is fully shown. – Aureliano Far Suau Apr 08 '20 at 14:45
2

@AurelianoFarSuau g -> d typo – tejasvi88 May 04 '21 at 07:20
7

It doesn't seem to work anymore in Chrome 101 – pumbo May 06 '22 at 09:33

score 10 · Answer 2 · answered May 13 '22 at 15:14

10

It appears that Chrome removed support for background images in the console in Chrome 101 and Edge 101.

I don't believe it has ever worked in Firefox (at least it does not in Firefox 100).

By contrast, it still works in Safari 15.4.

I have been trying to find an article that explains why this functionality was removed from Chrome/Edge but so far haven't come across any.

answered May 13 '22 at 15:14

Matt

101
1
5

5

It still works with data64, I guess pulling image from a url was seen as a vulnerability. I would also love to know why it happened. – Robin Goupil Jun 25 '22 at 18:00
Confirmed that works. `const img = new Image();` `img.onload = (): void => {` `const c = document.createElement('canvas');` `const ctx = canvas.getContext('2d');` `if (ctx) {` `c.width = imageObject.width;` `c.height = imageObject.height;` `ctx.drawImage(imageObject, 0, 0);` `const dataUri = c.toDataURL('image/png');` `const style = '...background-image: url(' + dataUri + '});...';` `console.log('%c ', style);` `}` `};` `imageObject.src = urlOfImageFile;` – Matt Jul 07 '22 at 20:19

score 9 · Answer 3 · answered Jul 28 '19 at 04:41

I've been searching for a while for one that can print out the whole image without cutting it, and make it resizeable, and I came up with basically this:

console.image = function(url, size = 100) {
  var image = new Image();
  image.onload = function() {
    var style = [
      'font-size: 1px;',
      'padding: ' + this.height/100*size + 'px ' + this.width/100*size + 'px;',
      'background: url('+ url +') no-repeat;',
      'background-size: contain;'
     ].join(' ');
     console.log('%c ', style);
  };
  image.src = url;
};

and then just use console.image(URL[, size]); to print out the image. The URL needs to be a valid URL and the size is basically percentage, with 100 being the default value. It can get shrunk down if the value is lower than 100, and expanded if the value is higher than 100.

score 1 · Answer 4 · edited May 23 '17 at 10:29

I ran into your console.image GitHub repository as a matter of fact while looking into the same issue. Although the post is quite old, I learned from the horse's mouth that it works in Chrome Canary. In fact, I tried your plugin demo in Canary and was able to see the spinning chicken. I still haven't found out why it suddenly stopped working in Chrome. The feature still works in Firebug for Firefox. The console.log() documentation for Chrome on this only showcases text-based styling.

I found one SO example where they load the image first and then apply the styling using console.log("%c....", "...");. Unfortunately, that still didn't work in "standard" Chrome.

So, short answer, it looks like Canary for now supports images in the console.

score 0 · Answer 5 · answered Dec 04 '22 at 12:08

From a Web Worker, document, Image, and Canvas are not available. If the image is an ImageData, it can be printed to the console using OffscreenCanvas:

function debugImage(imageData) {
  try {
    const c = new OffscreenCanvas(imageData.width, imageData.height);
    const ctx = c.getContext("2d");
    if (ctx) {
      ctx.putImageData(imageData, 0, 0);
      c.convertToBlob().then((blob) => {
        const dataUri = new FileReaderSync().readAsDataURL(blob);
        const style = `font-size: 300px; background-image: url("${dataUri}"); background-size: contain; background-repeat: no-repeat;`;
        console.log("%c     ", style);
      });
    }
  } catch (e) {
    console.error(e);
  }
}

Tested with Chrome 108.

google chrome console, print image

5 Answers5

Linked