Capture full-size web page screenshots in Chrome

The Google Chrome browser offers two ways to capture full-size web page screenshots. 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-based job.

The approaches we’ll cover for taking full-size webpage screenshots with Chrome require the full version of Chrome for each desktop-level device, including Mac, Windows, Linux, and Chromebook. No plugins are required as we use built-in developer tools with Chrome.

Note that we’re covering the Chrome browser for 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 take a full-size screenshot of a webpage in Chrome? Here’s what to do:

  1. Open the Chrome developer tools (View > Developer > Developer tools)
  2. Go to the Chrome developer tools

  3. In the Developer Tools drawer, click the Responsive Design Mode button
  4. Responsive Design mode in Chrome developer tools

  5. Scroll down through the entire webpage so that all images load (this is important to catch lazy load images, a common webpage speedup technique)*
  6. Click the three vertical dots in the top-right corner of the responsive design tool and select “Take full-size screenshot”.
  7. Take full size screenshot in Chrome

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

On Mac, you can find the full-size screenshot of the webpage under User Downloads unless you’ve changed it manually.

The dimensions of the captured screenshot depend on which device you have selected in responsive mode. For example, if you selected iPad Air and took a full-size scrolling screenshot from the home page, your screenshot might be around 2084 × 16439 pixels. Obviously, the longer a page is formatted or

* Unless you scroll through an entire webpage, any lazy-loading images will not be captured by the screenshot, making the full-page screenshot incomplete and unrepresentative of what a user sees on the page.

Taking full-page screenshots in Chrome from the console

Another way to capture full-page screenshots in Chrome is to use the developer console’s “Run” command, type in “screenshot” and then select “Take full-size screenshot” from the options that appear. Make sure you scroll through the entire site before you do this too.

Run Screenshot command to take full size screenshot on Mac

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

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

About Willie Ash

Check Also

Thunderbird 102 includes an improved import tool

The team that develops the Thunderbird email client has been working on the next major …