Capture full-size web page scrolling screenshots in Chrome

The Google Chrome browser offers two ways to capture screenshots of full size web pages. This can be necessary or useful for many web workers, whether they are developers, designers, editors, managers, writers, analysts, or just about any other possible web job.

The approaches we’ll cover for capturing full-size webpage screenshots with Chrome require the full version of Chrome for any desktop-level device, including Mac, Windows, Linux, and Chromebook. No plugins are required, as we will be using developer tools integrated with Chrome.

Note that we are covering the Chrome browser for the desktop here. You can also take full-page screenshots with Firefox, Safari on Mac, and Safari for iPhone and iPad, if you need or prefer.

How to Capture Full Size Scrolling Screenshots in Chrome

Ready to capture a full size screenshot of a webpage in Chrome? Here’s what to do:

  1. Open Chrome Developer Tools (View > Developer > Developer Tools)
  2. Enter Chrome Developer Tools

  3. Click the Responsive Design Mode button in the developer tools drawer
  4. Responsive Design Mode in Chrome Developer Tools

  5. Scroll the entire web page so that all images load (this is important for capturing lazy-loading images, a common technique used to speed up web pages)*
  6. Click on the three vertical dots in the upper right corner of the responsive design tool and choose “Full size screenshot”
  7. Capture a Full Size Screenshot in Chrome

  8. The full size screenshot will appear in your default Chrome downloads folder

On the Mac, you’ll find the full-size screenshot of the webpage available in User Downloads, unless you’ve edited it manually.

The dimensions of the captured screenshot vary depending on the device you chose in responsive mode, for example if you chose the iPad Air and took a full size scrolling screenshot of the homepage, your screenshot may be around 2084×16439 pixels. Obviously, the more the style of a page or

* If you don’t scroll through an entire web page, lazy loaded images will not be captured by the screenshot, making the screenshot of the full page incomplete and not representative of what a user sees on the page.

Capture Full Page Screenshots in Chrome via Console

Another way to take full-page screenshots in Chrome is to use the “Run” command in the Developer Console and type “screenshot”, then choose “Capture Full Size Screenshot ” from the options that appear. Be sure to scroll the entire webpage before* doing this as well.

Run screenshot command to capture full size screenshot on Mac

This may be a better option for some users, but it’s a bit more complex for those less familiar with command lines.

Are these methods for Chrome easier than those available in Safari for Mac with Developer Tools? Or the super easy way to take full screenshots of web pages on Mac with Firefox? Or the even easier way to take full-page screenshots using an iPhone or iPad? That’s up to you, and it also probably depends on which browser you use most often and how proficient you are with each one.

Comments are closed.