Console.image - Images in Chrome Dev tools

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

by adriancooney • 13 years ago

116 24 13 years ago

github.com

level09• 13 years ago

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

tekmate• 13 years ago

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

jffry5• 13 years ago

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.

joshguthrie• 13 years ago

"For science!"

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

flgr• 13 years ago

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

ycitm• 13 years ago

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

FWeinb• 13 years ago

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

adriancooney2• 13 years ago

Check out a new sister project!

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

Tichy2• 13 years ago

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

jffry5• 13 years ago

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

Tichy2• 13 years ago

Yes :-)

thejosh• 13 years ago

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.

jffry5• 13 years ago

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,...");

adriancooney2• 13 years ago

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.

jffry5• 13 years ago

Thanks for the tip!

egeozcan3• 13 years ago

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

jffry5• 13 years ago

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.

egeozcan3• 13 years ago

This is perfect, thank you.

egeozcan3• 13 years ago

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

secure• 13 years ago

Upvoting for the meme support.

Also, it could be occasionally useful even. :)

jyz• 13 years ago

The meme generator is beyond epic

jameswyse• 13 years ago

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

Console.image - Images in Chrome Dev tools

Related Stories