Take website screenshots from command line on Mac

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
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 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