Why full-page screenshots matter

The standard Mac screenshot shortcuts — ⌘ + Shift + 3 and ⌘ + Shift + 4 — only capture what's visible on screen. But web pages scroll. When you need to capture an entire landing page for a design review, document a long form for QA, or archive a page before a redesign, you need the full page from top to bottom in a single image.

Every major browser on Mac has a built-in way to do this. No extensions required.

Method 1: Chrome DevTools — Capture full-size screenshot

Chrome has a built-in command that captures the entire page, including content below the fold:

  1. Open the page you want to capture in Chrome.
  2. Open DevTools: press ⌘ + ⌥ + I (or right-click > Inspect).
  3. Open the Command Menu: press ⌘ + Shift + P.
  4. Type screenshot and select Capture full size screenshot.

Chrome scrolls through the entire page internally and stitches everything into a single PNG. The file downloads automatically. This captures the page at whatever viewport width DevTools is currently using, so resize the browser window first if you need a specific width.

Bonus commands in the same menu:

  • Capture screenshot — captures only the visible viewport.
  • Capture node screenshot — captures a specific DOM element. Select the element in the Elements panel first, then run this command. Useful for capturing a single component without any surrounding page content.
  • Capture area screenshot — lets you drag a selection rectangle over the page.

Method 2: Chrome DevTools — Emulate a device and capture

If you need a full-page screenshot at a specific device width (for responsive design reviews or documentation):

  1. Open DevTools (⌘ + ⌥ + I).
  2. Click the device toolbar icon (or press ⌘ + Shift + M) to toggle device emulation.
  3. Select a device preset (iPhone, iPad, etc.) or set custom dimensions.
  4. Open the Command Menu (⌘ + Shift + P) and run Capture full size screenshot.

This gives you a full-page screenshot rendered at exactly 375px wide (or whatever device width you chose), which is invaluable for mobile design reviews without needing an actual phone.

Method 3: Safari Web Inspector

Safari doesn't have a single-click full-page capture command like Chrome, but Web Inspector can do it:

  1. Enable the Develop menu: go to Safari > Settings > Advanced and check Show features for web developers.
  2. Open the page you want to capture.
  3. Go to Develop > Show Web Inspector (or press ⌘ + ⌥ + I).
  4. In the Elements tab, select the <html> or <body> element.
  5. Right-click the element and choose Capture Screenshot.

Safari renders the entire element — including the parts below the fold — into a single PNG file. This works on any element, so you can also capture a specific <section> or <div> without the rest of the page.

Method 4: Firefox — Built-in screenshot tool

Firefox has the most user-friendly full-page screenshot feature of any browser:

  1. Open the page in Firefox.
  2. Right-click anywhere on the page and select Take Screenshot.
  3. Click Save full page in the top-right corner of the overlay.

Firefox captures the entire page and lets you either download it or copy it to your clipboard. You can also select Save visible to capture only the viewport, or drag to select a custom region.

Alternatively, use the keyboard shortcut ⌘ + Shift + S to open the screenshot tool directly.

Method 5: Command line with webkit2png

For automated or scriptable full-page captures, webkit2png is a Python-based tool that renders a page using WebKit and saves the full-page result:

# Install via Homebrew
brew install webkit2png

# Capture full page
webkit2png --fullsize -o mypage https://example.com

This produces three files: a thumbnail, a clipped version (viewport only), and a full-size render of the entire page. The --fullsize flag ensures you get the complete page.

For more modern sites that rely heavily on JavaScript rendering, consider using Puppeteer or Playwright instead:

# Using Playwright (install: npm install playwright)
npx playwright screenshot --full-page https://example.com screenshot.png

Playwright launches a real Chromium browser, waits for the page to fully render (including JavaScript-generated content), then captures the entire page. This is the most reliable method for dynamic single-page apps, dashboards, and pages with lazy-loaded content.

Method 6: screencapture with scrolling (manual approach)

If you can't use DevTools and don't want to install anything, there's a manual workaround using macOS itself:

  1. Zoom out in the browser (⌘ + -) until the entire page fits in the viewport.
  2. Use ⌘ + Shift + 3 to capture the screen.

The obvious downside is reduced readability at high zoom-out levels. This works for quick visual references but isn't suitable for documentation or design review where you need readable text.

Quick comparison

Method Browser Best for Captures JS content
Chrome DevTools Chrome / Edge Developers, responsive testing Yes
Safari Web Inspector Safari Element-level captures Yes
Firefox Screenshot Firefox Fastest, non-technical users Yes
webkit2png WebKit (headless) Scripting, batch jobs Limited
Playwright Chromium (headless) CI/CD, automated testing Yes

Common issues and fixes

Sticky headers and footers appear multiple times. Chrome DevTools scrolls the page internally, and fixed-position elements (sticky navs, cookie banners, floating CTAs) get rendered at every scroll position. To fix this: open the Elements panel, find the sticky element, and temporarily set position: static or display: none before capturing. Undo the change after.

Lazy-loaded images show as blank. If images only load when scrolled into view, Chrome's internal scroll may not trigger them. Scroll through the entire page manually first, then run the capture command. Or use Playwright with a scroll-and-wait script.

The screenshot is extremely tall and the file is huge. Full-page captures of long pages can produce images that are 20,000+ pixels tall. Consider converting to PDF for easier viewing (see our screenshot to PDF guide), or crop to the sections you actually need.

Dark mode isn't captured correctly. Chrome DevTools captures the page as-is. If you need a dark mode version, toggle it before capturing: open the Command Menu and run Emulate CSS prefers-color-scheme: dark.

When to use full-page screenshots vs. scrolling capture

macOS scrolling screenshot apps (like the ones covered in our scrolling screenshot guide) physically scroll the window and stitch frames together. Browser-native full-page capture is different — it renders the entire DOM at once. The browser method is more reliable because it doesn't depend on scroll timing, avoids artifacts from animations, and works with sticky elements (when handled correctly).

Use browser-native capture when you're working with web pages. Use scrolling capture apps when you need to capture non-browser content like long documents in Preview, email threads in Mail, or chat histories in Messages.

Annotate full-page screenshots before sharing

A raw 10,000-pixel-tall screenshot isn't useful to anyone. Before sharing, crop to the relevant section and annotate what you're trying to show — circle the bug, arrow to the misaligned element, highlight the text that needs to change. This turns a screenshot from a file into a communication tool.

LazyScreenshots makes this fast: capture your screen, annotate with arrows, boxes, and text, and share the result in seconds. For full-page captures, take the browser screenshot using the methods above, then open the image in LazyScreenshots for quick annotation before dropping it into a GitHub issue or Slack thread.

LazyScreenshots captures, annotates, and shares screenshots in one step. Stop wasting time with Preview and Markup. $29 one-time.

Try LazyScreenshots — $29 one-time