5 ms·

Console.image - Images in Chrome Dev tools

116 points by adriancooney 13y ago

level09 13y ago
What would be some real use cases for this (except for the fun part of it) ?
- tekmate 13y ago
  maybe if you build urls to images that are hard to parse with the eye as text only
  - jffry 13y 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.
    - gngeal 13y ago
      Or he's just trying to make Chrome behave more like the Lisp Machines.
      - S4M 13y ago
        Actually, if you could port that to Node.js, and call Node from the shell...
- joshguthrie 13y ago
  "For science!" Related: http://xkcd.com/54/ http://xkcd.com/54/
flgr 13y 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-background-images http://updates.html5rocks.com/2012/12/Canvas-driven-backgrou...
- deleted 13y ago
  [deleted]
  - deleted 13y ago
    [deleted]
- ycitm 13y ago
  Looks like it: `console.image(canvas.toDataURL());`
- FWeinb 13y ago
  To bad that it is not working with a background canvas. http://codepen.io/FWeinb/pen/0378ed8ad8a56f4f989ed8085baf5cdc http://codepen.io/FWeinb/pen/0378ed8ad8a56f4f989ed8085baf5cd...
- adriancooney 13y ago
  Check out a new sister project! https://github.com/dunxrion/console.snapshot https://github.com/dunxrion/console.snapshot
Tichy 13y 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 http://fractality.neocities.org/memes.html
- jffry 13y ago
  Like this? http://consoleimagememe.neocities.org/ http://consoleimagememe.neocities.org/
  - Tichy 13y ago
    Yes :-)
- thejosh 13y 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.
jffry 13y 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,...");
- adriancooney 13y 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.
  - jffry 13y ago
    Thanks for the tip!
egeozcan 13y 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.)
- jffry 13y ago
  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/onmiijbokejkiadcplidhkcmocffepjm 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.
  - egeozcan 13y ago
    This is perfect, thank you.
  - egeozcan 13y ago
    instant image gallery for every page: [].splice.call(document.querySelectorAll("img"), 0).forEach(function(i) { console.image(i.src) })
secure 13y ago
Upvoting for the meme support. Also, it could be occasionally useful even. :)
jyz 13y ago
The meme generator is beyond epic
jameswyse 13y 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 :/

116 points by adriancooney 13y ago

level09 13y ago

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

tekmate 13y ago
maybe if you build urls to images that are hard to parse with the eye as text only
- jffry 13y 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.
  - gngeal 13y ago
    Or he's just trying to make Chrome behave more like the Lisp Machines.
    - S4M 13y ago
      Actually, if you could port that to Node.js, and call Node from the shell...
joshguthrie 13y ago
"For science!" Related: http://xkcd.com/54/ http://xkcd.com/54/

flgr 13y 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-background-images http://updates.html5rocks.com/2012/12/Canvas-driven-backgrou...

deleted 13y ago
[deleted]
- deleted 13y ago
  [deleted]
ycitm 13y ago
Looks like it: `console.image(canvas.toDataURL());`
FWeinb 13y ago
To bad that it is not working with a background canvas. http://codepen.io/FWeinb/pen/0378ed8ad8a56f4f989ed8085baf5cdc http://codepen.io/FWeinb/pen/0378ed8ad8a56f4f989ed8085baf5cd...
adriancooney 13y ago
Check out a new sister project! https://github.com/dunxrion/console.snapshot https://github.com/dunxrion/console.snapshot

Tichy 13y 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 http://fractality.neocities.org/memes.html

jffry 13y ago
Like this? http://consoleimagememe.neocities.org/ http://consoleimagememe.neocities.org/
- Tichy 13y ago
  Yes :-)
thejosh 13y 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.

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

adriancooney 13y 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.
- jffry 13y ago
  Thanks for the tip!

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

jffry 13y ago
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/onmiijbokejkiadcplidhkcmocffepjm 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.
- egeozcan 13y ago
  This is perfect, thank you.
- egeozcan 13y ago
  instant image gallery for every page: [].splice.call(document.querySelectorAll("img"), 0).forEach(function(i) { console.image(i.src) })

secure 13y ago

Upvoting for the meme support. Also, it could be occasionally useful even. :)

jyz 13y ago

The meme generator is beyond epic

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