Take website screenshots from command line on Mac

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
pageres google.com
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 --hide='.page-header'.

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