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?
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.
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?
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.)
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.
