Capture Full Size Webpage Scrolling Screenshots in Chrome

Apr 4, 2022 - Leave a Comment

Capture full page screenshot in Chrome

The Google Chrome browser offers two ways to capture full size webpage screenshots. This can be necessary or useful for many web workers, whether they’re developers, designers, editors, managers, writers, analysts, or just about any other possible web-based gig.

The approaches we’ll cover to capture full size webpage screen shots with Chrome require the full version of Chrome for any desktop-level device, which includes Mac, Windows, Linux, and Chromebook. There are no plugins required, as we’ll be using built-in developer tools with Chrome.

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

How to Capture Full Size Scrolling Screenshots in Chrome

Ready to snag 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 down through the entire web page so that all images load (this is important to capture lazy-load images, a common technique used to speed up webpages)*
  6. Click the three vertical dots in the upper right corner of the Responsive Design tool and choose “Capture full size screenshot”
  7. Capture 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 manually changed that.

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

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

Capturing Full Page Screenshots in Chrome via Console

Another way to take full page screenshots in Chrome is to use the developer console ‘Run’ command, and type “screenshot”, then choose to “Capture full size screenshot” from the options that appear. Be sure to scroll through 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 who are less familiar with command lines.

Are these methods for Chrome easier than what’s available in Safari for Mac with Developer Tools? Or the super simple method of taking full webpage screenshots on the Mac with Firefox? Or the even easier way of taking full page screenshots using iPhone or iPad? That’s up to you to decide, and it also likely depends on what browser you use most often, and your proficiency with each of them.


Related articles:

Posted by: Paul Horowitz in Mac OS, Tips & Tricks

Leave a Reply


Shop on and help support OSXDaily!

Subscribe to OSXDaily

Subscribe to RSS Subscribe to Twitter Feed Follow on Facebook Subscribe to eMail Updates

Tips & Tricks


iPhone / iPad



Shop on Amazon to help support this site