How to take a full page screenshot in Chrome

Chrome can save a whole web page as one image, from the top to the footer, and you do not need an extension for it. The option sits in DevTools, where most people never look. This post shows where it is, how to do the same at a phone width, what tends to go wrong, and when a screenshot is the wrong tool.

Open the page you want to capture.
Open DevTools: Command+Option+I on a Mac, Control+Shift+I or F12 on Windows and Linux.
Open the Command menu: Command+Shift+P on a Mac, Control+Shift+P on Windows and Linux.
Type screenshot.
Choose Capture full size screenshot.

Chrome saves a PNG of the full page to your downloads folder.

The same list has three more commands:

Capture screenshot saves only what is on screen now.
Capture area screenshot lets you drag a box over the part you want. It does not work while DevTools is in a window of its own.
Capture node screenshot saves the element that is selected in the Elements panel.

At a phone or tablet width

A full page screenshot is as wide as your browser window. For the mobile layout, use the device toolbar.

With DevTools open, click Toggle device toolbar, or press Command+Shift+M on a Mac and Control+Shift+M on Windows and Linux.
Pick a device at the top of the page, or type a width.
Click the three dots at the right of that toolbar and choose Capture full size screenshot.

The image has the width you picked and the full length of the page.

One element only

For a single card, a header or a pricing table, right-click the element in the Elements panel and choose Capture node screenshot. The image is cropped to that element, also when part of it is off screen.

Do you need an extension?

For a plain image, no. Extensions add things like drawing on the picture or saving it as a PDF, and many of them ask for permission to read the pages you visit. The built-in command asks for nothing.

If you need a PDF, print the page with Command+P or Control+P and choose Save as PDF. That uses the page's print layout, which often looks different from the screen.

What goes wrong

For a full size screenshot Chrome does not scroll through the page. It captures the page in one go, from where you are. Most problems come from that.

Images that load as you scroll. They are still placeholders when the picture is taken. Scroll to the bottom of the page first, go back up, then capture.
Things that appear as you scroll. Text and pictures that fade in when they come into view can be missing or half visible. Scrolling through the page once helps here too.
Cookie banners, chat bubbles and sticky bars. They are in the picture as well. Close them first.
Very long pages. The image can be cut off or have a blank stretch near the end. Capture a long page per section with Capture node screenshot.
It is your browser. The picture shows the page as you see it: logged in, in your language, with your cookie choice.

In other browsers

Firefox has it one step closer: right-click the page, choose Take Screenshot, then Save full page. In Edge, press Control+Shift+S and choose Capture full page.

When a screenshot is the wrong tool

A full page screenshot is a good record. It shows how a page looked on a certain day, which is what you want for a portfolio, an archive, or a before and after.

It is a weak place for feedback. The picture shows one width and one state of the page. The page changes the next day and the picture stays the same. And a comment on a picture does not know which element it is about, so someone has to find that element again on the real page.

For feedback, comment on the live page. I make layernote, so consider the source, but this is what it is for: you paste a URL, click the element you mean and write the note, and a client does the same from a link, without an account. Each note keeps a screenshot of its element, so you still have the picture. How that works is on the website annotation tool page, and the design QA checklist lists what to look for once you are reviewing.