Headless Chrome has shipped with Chrome 59 in Mac and Linux and Chrome 60 in Windows. It essentially allows you to programmatically control Chrome without a GUI. This is especially useful when running automated tests, web scraping, taking screenshots of pages, generating PDFs, outputting traces, and much more!

While there are tons of use cases, in this article we'll briefly cover:

  • How to use Puppeteer, a Node library developed by the Chrome team to control Chrome via a high-level API
  • How to emulate devices to see how the page is rendered on devices such as the iPhone 6, iPad, etc...
  • How to take screenshots, both full-screen and within the viewport

First things first, let's create an empty directory and install our dependencies:

mkdir headless-chrome && cd headless-chrome
npm init -y && npm install --save puppeteer

Now, let's put together a simple script that will emulate a variety of devices to render the webpage on and capture a full-page screenshot:

// capture.js

const puppeteer = require('puppeteer')
const devices = require('puppeteer/DeviceDescriptors')

const captureScreenshots = async () => {
  const devicesToEmulate = [
    'iPhone 6',
    'iPhone 6 landscape',
    'iPhone 6 Plus',
    'Nexus 5',
    'Nexus 6',
    'iPad Pro'
  ]

  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  // capture a screenshot of each device we wish to emulate (`devicesToEmulate`)
  for (let device of devicesToEmulate) {
    await page.emulate(devices[device])
    await page.goto('https://stackoverflow.com/')
    await page.screenshot({path: `${device}.png`, fullPage: true})
  }

  await browser.close()
}

captureScreenshots()

Run node capture.js and you should see a number of screenshots appear in the directory a few seconds later with the filename of each of the devices we're emulating (e.g.: iPhone 6.png). Omitting fullPage: true will result in screenshots being taken of the visible portion of the page only.

You can find the list of devices that are available for emulation here. Alternatively, you can set the viewport size if you wish to specify the height and width dimensions yourself.

There's a lot more you can do with the Puppeteer library like programmatically filling in forms, triggering events on DOM elements such as clicks, emulating various media types for CSS, waiting for specific events to occur, injecting files into the page, and generating traces...the list is endless! Explore the Puppeteer API for yourself and tune in for more articles on using headless Chrome for various tasks!