Phantom.js : awesome tools for web screenshots from the console

Sometimes a web technology comes around and you say "Wow- I didn't know they could do that these days." Early Google maps was one example of that: being able to pan around a larger-than-the-window photo excerpt by mouse dragging was a revelation.

Phantom.js is another example of that. It makes it really easy to make a "headless" web browser, with the full power of WebKit (the engine behind Chrome and Safari.) So you can have a page that will execute all the javascript and other things, and then you can have it make a "screengrab".

I admire how easy they make it to set up and use (I was looking at a bunch of packages for doing simple node/edge chart making, and NONE of them had a simple "here's how you go from zero to Hello World" page.)  The Downloads page was simple enough (I recommend getting Homebrew for OSX if you haven't already) and then the Get Started page walks you through some simple but awesome examples... the second one is a "make a screenshot" and it's as simple as making a "runme.js" file containing

var page = require('webpage').create();
page.open('http://alienbill.com', function () {
    page.render('alienbill.png');
    phantom.exit();
});

and then hitting

phantomjs runme.js

Man, that's great. I can think of a lot of uses for that, like helping to automate testing or just keep track of a webpage's look and feel over time.