How to take full page screenshots for free using Chrome DevTools

web page full size screenshot chrome devtools xxl

It’s easy to capture your screen via the usual keyboard commands on a Mac / PC.

As a reminder, here are the basic options on a Mac:

  • To select a specific zone, Command-Shift-4 + use your mouse to select the area (and release to capture)
  • To capture the full (visible) screen, Command-Shift-3
  • To capture the window of the application you’re using, Command-Shift-4 + space bar & click to confirm

But sometimes you might be looking to capture a full size screenshot of the full page of a website opened in your browser, even if that page is very long (as most web pages usually are), far below the fold which sets the limit of what you can grab via the usual keyboard commands.

Here’s an example, from my site

Scroll down to know how to capture such a full size screenshot in a snap. screenshot chrome devtools xl
StickPNG full page screenshot taken with Chrome DevTools

The procedure is very simple. 

First inspect the page / open Chrome DevTools (right click, INSPECT)

right click inspect chrome devtools xl

Then open the command menu via the following shortcut: Cmd – Shift – P.

Search for screenshot in the list (type “screenshot” for instant results). 

capture full size screenshots chrome
capture full size screenshot via Chrome DevTools

Choose capture full size screenshot, hit ENTER.

It will generate a PNG of the whole page. 

Bear in mind that the aspect ratio of the screenshot will depend on the width of the page you see in Chrome DevTools. You can for instance grab a screenshot of the mobile rendering of a website as displayed on an iPhone 11X by choosing the right simulator in DevTools.

iphone screenshot chrome dev tools
This is the simulation of an iphone X in Chrome DevTools

Here’s the rendering for at time of writing.

I’ve converted the PNG to a JPEG and reduced the resolution since the original file was 16Mo, far too heavy for this page. 

Have fun creating your full page screenshots in a snap with Chrome DevTools! iPhone X xl screenshot as seen on an IphoneX (via DevTools)

🚀 Subscribe to my weekly newsletter packed with tips & tricks around AI, SEO, coding and smart automations

☕️ If you found this piece helpful, you can buy me coffee