Updated August 9, 2019
Pageres still works. For Mac OSX use the latest version of Node.js (currently 10.16.2). The author of Pageres has released another screen capture tool with more options of interacting with the code of the page, Capture Page CLI. This tool is not as handy for taking a list of screenshots right from the command line. However, it has features that might be more useful to you if you’re building the screen capture engine into your app.
Now that webkit2png is no longer being supported, I had to find a better way of 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 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 1366×768 1600×900 –no-crop ] [ todomvc.com 1024×768 480×320 ] –crop
Provide a custom filename template
pageres todomvc.com 1024×768 –filename='<%= date %> – <%= url %>’
Capture a specific element
pageres yeoman.io 1366×768 –selector=’.page-header’
Hide a specific element
pageres yeoman.io 1366×768 –hide=’.page-header’
Capture a local file
pageres unicorn.html 1366×768