
Console.image - Images in Chrome Dev tools - adriancooney
https://github.com/dunxrion/console.image
======
jffry
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,...");

~~~
adriancooney
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.

~~~
jffry
Thanks for the tip!

------
Tichy
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](http://fractality.neocities.org/memes.html)

~~~
jffry
Like this?
[http://consoleimagememe.neocities.org/](http://consoleimagememe.neocities.org/)

~~~
Tichy
Yes :-)

------
flgr
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...](http://updates.html5rocks.com/2012/12/Canvas-driven-background-
images)

~~~
adriancooney
Check out a new sister project!

[https://github.com/dunxrion/console.snapshot](https://github.com/dunxrion/console.snapshot)

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

~~~
jffry
Here's the source for a Chrome extension:
[https://github.com/jffry/console.image-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...](https://chrome.google.com/webstore/detail/onmiijbokejkiadcplidhkcmocffepjm)

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.

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

------
jameswyse
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 :/

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

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

~~~
jffry
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.

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

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

------
secure
Upvoting for the meme support.

Also, it could be occasionally useful even. :)

------
jyz
The meme generator is beyond epic

