Now that webkit2png is no longer being supported, I had to find a better way to taking screenshots of web pages. I still use Evernote for some screenshots and I have the Nibmus Chrome extension installed. But as a developer faced with researching hundreds of website each month I find myself needing something faster.
I started using pageres-cli, a Node.js cli tool for capturing website screenshots. If you’re on Tutorial Shares, then you probably already have node.js installed and NPM. If not, you’ll need to install node.js first.
Pageres is super easy to install and use. Here’s the my terminal commands to install and an example of use.
Install pageres-cli via npm
npm install -g pageres-cli
Basic usage of the command
The screenshot image file saves to your current directory.
The best part about pageres-cli is that you can hide selectors. So if a site has a sticky nav bar that messing up you screenshots, you can exclude it with a flag like this
Here’s a bunch of examples from Github.
# Basic multi-url, multi-resolution usage
pageres todomvc.com yeoman.io 1366x768 1600x900
Override outer option within group
pageres [ yeoman.io 1366x768 1600x900 --no-crop ] [ todomvc.com 1024x768 480x320 ] --crop
Provide a custom filename template
pageres todomvc.com 1024x768 --filename='<%= date %> - <%= url %>'
Capture a specific element
pageres yeoman.io 1366x768 --selector='.page-header'
Hide a specific element
pageres yeoman.io 1366x768 --hide='.page-header'
Capture a local file
pageres unicorn.html 1366x768