Capture Full Size Webpage Scrolling Screenshots 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:
- Open Chrome Developer Tools (View > Developer > Developer Tools)
- Click the Responsive Design Mode button in the developer tools drawer
- 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)*
- Click the three vertical dots in the upper right corner of the Responsive Design tool and choose “Capture full size screenshot”
- 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 osxdaily.com 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.
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.
