How to take a full-page screenshot in Chrome, Safari, Firefox and Edge
Capture a whole web page, top to footer, without an extension. The hidden menu in every browser, plus the iPhone trick nobody knows about.
A normal screenshot gets you what’s on screen. For a landing page, that’s the hero and nothing else, which is the least interesting part. Every browser can capture the whole page. They just all hide it.
Chrome (and Brave, Arc, Edge’s DevTools)
- Open DevTools: ⌘ + Option + I on a Mac, Ctrl + Shift + I on Windows.
- Open the command menu: ⌘ + Shift + P (or Ctrl + Shift + P).
- Type screenshot and pick Capture full size screenshot.
It saves a PNG to your Downloads. Want the phone version? Click the device toolbar icon in DevTools (or ⌘ + Shift + M), pick an iPhone, then run the same command.
Firefox
The easy one. Right-click anywhere on the page, pick Take Screenshot, then Save full page. No DevTools needed.
Edge
Press Ctrl + Shift + S (or ⌘ + Shift + S on a Mac) to open Screenshot, then pick Capture full page. You can draw on it before you save it.
Safari (Mac)
- Turn on the Develop menu if you haven’t: Safari → Settings → Advanced → Show features for web developers.
- Open the Web Inspector: ⌘ + Option + I.
- In the Elements tab, right-click the
<html>line at the very top and pick Capture Screenshot.
iPhone (the one nobody knows)
- Take a normal screenshot in Safari (side button + volume up).
- Tap the thumbnail that pops up in the corner.
- Tap Full Page at the top.
- Save it. It saves as a PDF of the whole page to Files.
It’s a PDF, not an image, but for keeping a mobile landing page that’s often better anyway.
When it goes wrong
Full-page captures break in predictable ways:
- Sticky headers get repeated, or float in the middle of the page. DevTools usually handles this. The iPhone trick usually doesn’t.
- Lazy-loaded images show up as grey boxes, because they hadn’t loaded when the capture ran. Scroll to the bottom of the page slowly first, then capture.
- Scroll animations leave sections blank or half-faded. Same fix: scroll through first. Or turn on “reduce motion” in your OS settings, which a lot of sites respect.
- Cookie banners end up in every capture. Accept or close them first.
- Really long pages come out as huge files, and very long ones can get cut off at the bottom.
If you do this for work
If you’re screenshotting landing pages for a swipe file or a competitor teardown, the DevTools dance gets old fast. What you actually want: paste a URL and get the whole page at desktop and phone widths, saved with the link, the date and the text on it.
That’s what Savepad does when you save a page. It renders the full page on our servers at desktop and phone widths, keeps it as a snapshot so the page is still there after they redesign, and reads the text so you can search it. On Pro it can watch a page and keep a new snapshot every month it changes.
For putting a screenshot in a nice browser frame for a LinkedIn teardown post, there’s a free screenshot mockup tool. And if the screenshots are piling up on your desktop, read how to organize screenshots on a Mac.