This hack is simultaneously beautiful and horrifying.

  So now, I had to find a solution where only the whitelisted
  properties are used but in the it was fairly simple.
  
  I used the padding, line-height and font-size properties. I
  set the padding on the left and right to half the width and
  the top and bottom to the half the height of the image. I
  then set the font-size to 1px to ensure it doesn't distort
  the width. Since padding on an inline element has no effect
  on it's dimensions, I used the line-height to manually set
  the height and that displayed the images.

Maybe this could be useful if you're doing some stuff drawing onto a canvas off-screen and you want to blit some intermediate buffer into your console?

  console.image("data:image/png;base64,...");

That's a great idea! Although, you know the Dev tools has a canvas inspector built-in? Check out chrome://flags and enable the "Enable Developer Tools experiments.". Pop open the console and then Settings (bottom right corner cog) > Experiments > Canvas inspector. This enables the ability to profile a canvas and view the different states between draw functions. It's really nifty.

Thanks for the tip!

I can actually see myself enjoying this, for example outputting some cat pictures to soothe the pain of debugging.

Is there an overview of all the memes? I feel like I could update my internet knowledge a lot through this.

Edit: I put up a version that logs all the included memes at http://fractality.neocities.org/memes.html

Pretty much just knowyourmeme.com, most memes are completely stupid but a few are quite funny in the right context/when they originally happened.

Image macros though are also fascinating, they seemed to have branched out to the general public over the last year or so.

Like this? http://consoleimagememe.neocities.org/

Yes :-)

Would it be possible to use this to render the current state of a canvas to the console? That's something I'd find very useful for debugging.

Edit 1: Looks like they build the memes exactly that way. It still needs to convert the canvas to a data: url first, however, which might be a bit slow?

Edit 2: Looks like there might be a better, but non-standard and non-portable way of achieving that in WebKit browsers: http://updates.html5rocks.com/2012/12/Canvas-driven-backgrou...

Check out a new sister project!

https://github.com/dunxrion/console.snapshot

Looks like it: `console.image(canvas.toDataURL());`

To bad that it is not working with a background canvas. http://codepen.io/FWeinb/pen/0378ed8ad8a56f4f989ed8085baf5cd...

OK, now who's working on the chrome extension? Should be fairly simple to inject this to every page, I guess? (I need this. I don't know why but I know I do.)

Here's the source for a Chrome extension: https://github.com/jffry/console.image-chrome-extension

I submitted it to the Chrome web store; it should now be available to install via https://chrome.google.com/webstore/detail/onmiijbokejkiadcpl...

If you prefer, you can clone my GitHub repo and install it in Chrome as an unpacked extension via the "Developer Mode" option in the extensions tab.

instant image gallery for every page: [].splice.call(document.querySelectorAll("img"), 0).forEach(function(i) { console.image(i.src) })

This is perfect, thank you.

On a related node I've been making use of `console.table` a lot recently - Very useful for debugging JS apps with a lot of calculations and financial formulas.

Unfortunately it only supports 5 columns :/

What would be some real use cases for this (except for the fun part of it) ?

"For science!"

Related: http://xkcd.com/54/

maybe if you build urls to images that are hard to parse with the eye as text only

Or if you're doing some sort of multi-stage manipulation of a <canvas>, you could log out intermediate states.

It's a stretch, I know.

Or he's just trying to make Chrome behave more like the Lisp Machines.

Actually, if you could port that to Node.js, and call Node from the shell...

Upvoting for the meme support.

Also, it could be occasionally useful even. :)

The meme generator is beyond epic