Sometimes a normal screenshot isn't enough. You need the whole page, top to bottom: for a bug report, a design review, or to save a landing page before someone changes it.
Chrome can do this without installing anything. The option is just well hidden. Here are three ways to do it, from fully built-in to one click.
Way 1: DevTools "Capture full size screenshot"
This is built into Chrome and works on Windows, Mac and Linux.
- Open the page you want to capture.
- Open DevTools with Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac). F12 also works on most Windows machines.
- Open the Command Menu with Ctrl+Shift+P (or Cmd+Shift+P on Mac).
- Type
screenshot. - Choose Capture full size screenshot.
Chrome saves a PNG of the whole page to your Downloads folder. There's no dialog. It just appears.
The same menu has three other screenshot commands, and their names confuse people:
- Capture screenshot captures only the visible part of the page (the viewport).
- Capture area screenshot gives you a crosshair to drag around one region.
- Capture node screenshot captures one element. Select it in the Elements panel first.
Tip: some pages only load images when you scroll to them. If parts of your capture come out blank, scroll to the bottom of the page and back to the top, then capture again.
Good for: a quick one-off capture with nothing to install.
Not so good for: doing it many times a day (it's five steps every time), or when you need to mark something up. You'll still need another app to add an arrow or hide an email address.
Way 2: DevTools device mode, for a phone or tablet width
If you're checking a responsive layout, you often want the full page at a mobile width. DevTools can do that too.
- Open DevTools (Ctrl+Shift+I / Cmd+Option+I).
- Turn on the Device Toolbar with Ctrl+Shift+M (or Cmd+Shift+M).
- Pick a device from the dropdown, or choose Responsive and type a width.
- Reload the page so the layout settles at that width.
- Open the three-dot menu at the right end of the device toolbar and choose Capture full size screenshot.
You get a full-height PNG at the width you set.
Watch out for device pixel ratio. Device presets often use a pixel ratio of 2 or 3, so the image comes out two or three times wider in pixels than the width you picked. Set it to 1 if you need exact pixel sizes.
Good for: responsive QA without any extra tools.
Way 3: An extension (Capture by RATdeck)
Disclosure: I'm part of the RATdeck team, and we make this one.
If you take full page screenshots often, or you nearly always need to mark them up, an extension saves a lot of clicks. Capture by RATdeck is a free Chrome extension built for this job.
- Install Capture from the Chrome Web Store and pin it to your toolbar.
- Open the page and click the Capture icon, then choose Full page. Or just press Ctrl+Shift+1 (Command+Shift+1 on Mac).
- Capture scrolls the page, joins it into one image and opens it in an editor.
A few things it handles that are fiddly in DevTools:
- Panels that scroll on their own. Chats, tables and sidebars often scroll inside the page. "Pick scroll area" captures just that panel's full content.
- Sticky headers. The header is not repeated down the image.
- Very tall pages. These are saved as ordered parts. If you stop a long capture early, you keep what was already captured.
- Responsive presets. Widths from 1440 down to 360 px are built in.
- Delay. A 3, 5 or 10 second timer lets you open a menu or hover over a button first.
The editor has arrows, lines, shapes, pen, highlighter, text and crop, plus blur and pixelate for names, emails and account details. When you're done, copy the image or download it as PNG, JPG or WebP.
The free plan includes all of the above, with unlimited downloads, no watermark and no ads. Capture, editing and export happen in your browser, and normal screenshots aren't uploaded. Pro ($3/month or $12/year) adds things like PDF export and bulk capture of many URLs, if you need them.
More details: https://capture.ratdeck.com
One limit applies to every extension: Chrome doesn't let them capture protected pages like chrome://settings or the Chrome Web Store. For incognito windows, turn on "Allow in incognito" for the extension.
Which one should you use?
| You want to… | Use |
|---|---|
| Grab one full page, once, with nothing installed | Way 1: DevTools Command Menu |
| Check a page at phone or tablet width | Way 2: DevTools device mode (or Capture's presets) |
| Capture often and add arrows, text or blur before sharing | Way 3: an extension like Capture |
| Capture a chat or table that scrolls inside the page | Way 3 ("Pick scroll area") |
Wrapping up
If you only need a full page screenshot now and then, the DevTools method is all you need. Learn Ctrl+Shift+P → "screenshot" and you're set. If screenshots are a daily part of your work, especially for bug reports or client feedback, an extension that goes straight from capture to markup saves time every single day.
What's your current way of doing this? Let me know in the comments if there's a trick I missed.
Top comments (0)