How to take full-size website screenshots

Sometimes you may need to take a full-size screenshot of a website (yours of your competitor's). That's useful for design reviews, or when you want to make a few design changes, see how they'd look (and A/B-test these versus the original) without changing the code.

Yes, there are quite a few tools, which allow you to do that. Most are paid, add a watermark logo on the screenshot, reduce its quality, and upload it immediately to third-party servers.

There's actually an embedded feature in Chrome browser that allows you to take a high-quality screenshot of an entire page of a website without a need for any plugins. Here's how to use it.

For desktop

1. Open “Developer Tools” in Chrome either through its menu under “More Tools”, or by simply pressing F12 key:

Screenshot of Chrome browser launching Developer Tools

2. If you want to take screenshot of a desktop website – on the right side of the newly-opened panel click on the 3-dots symbol and select “Run Command”:

Screenshot of Chrome browser with Developer Tools panel open

3. Type in “screenshot” and select “Capture full size screenshot” option from the drop-down menu:

Screenshot of Chrome browser with Full-size Screenshot command being run

Wait a bit... and there you have it – saved in your “Downloads” folder:

Full size screenshot of The School of UX website

For mobile

For mobile screenshot there's a quicker way – no need to run a command if you've already enabled “Toggle Device Toolbar” mode (by pressing on the icon of a mobile phone and tablet in the left corner of the Developer Tools). Instead there's a shortcut in the menu under 3-dots icon in mobile view:

Screenshot of Chrome browser Developer Tools taking full-size screenshot in mobile

And here's your full-height screenshot of a mobile website:

Screenshot of a full-height screenshot of a mobile website made using Chrome