DEV Community

Cover image for How to Screenshot an Entire Web Page on Any Device
Grabbit profile image Nico Acosta
Nico Acosta for Grabbit

Posted on • Originally published at grabbit.live

How to Screenshot an Entire Web Page on Any Device

#webdev #javascript #tutorial #programming

Full-page screenshots are straightforward on desktop but awkward on mobile, and totally different again when you need them from code. This guide covers the real methods for each situation so you can pick the right one.

The quickest cross-device method

If you are writing code, running a CI job, or building a tool that needs to capture pages from a server or agent, a screenshot API is the only method that works everywhere. The browser runs in the cloud, not on your device.

curl https://api.grabbit.live/v1/grabs \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "width": 1280,
    "full_page": true,
    "format": "webp"
  }'
Enter fullscreen mode Exit fullscreen mode

Setting full_page: true tells the renderer to scroll to the bottom of the page and stitch all the sections into one image. The response contains a hosted image_url you can write directly to your database or pass to a front end. No browser install, no Puppeteer, no scrolling logic to maintain.

For a broader look at programmatic capture, see how to screenshot a website from a URL.

On desktop: Chrome DevTools

Chrome includes a full-page screenshot command that requires no extensions.

  1. Open DevTools: F12 on Windows or Linux, Cmd + Opt + I on Mac.
  2. Open the command palette: Ctrl + Shift + P on Windows, Cmd + Shift + P on Mac.
  3. Type full size screenshot and press Enter.
  4. Chrome saves a PNG of the full page to your Downloads folder.

The capture uses the same Chromium engine as most screenshot APIs, so the result looks accurate. The limitation is that it only works from a desktop browser and cannot be scripted. For more detail on this method, see how to capture a full-page screenshot in Chrome.

On desktop: Firefox

Firefox exposes its screenshot tool without DevTools.

  1. Right-click anywhere on the page and choose Take Screenshot.
  2. Click Save full page.
  3. Firefox downloads a PNG of the entire scrollable page.

No keyboard shortcuts to remember and no extensions needed. The output is always PNG.

On Mac: Safari

Safari has no native full-page screenshot shortcut. Your options are:

  • Use Chrome on the same machine (the DevTools method above).
  • Install a browser extension such as GoFullPage or Nimbus Capture.
  • Use Cmd + Shift + 4 to capture the visible area, then scroll and repeat (tedious and imprecise).

If Safari is a hard requirement, a browser extension or the API is the path of least resistance.

On Windows: built-in tools

The Windows Snipping Tool (Win + Shift + S) captures the visible viewport only. There is no built-in way to scroll and stitch from the OS level. Use the Chrome DevTools method or a browser extension to get the full page.

On iPhone (iOS)

iOS 13 and later include a built-in full-page screenshot option inside Safari.

  1. Take a regular screenshot: Side button + Volume Up on Face ID iPhones, or Home + Power on older models.
  2. Tap the thumbnail that appears in the lower-left corner.
  3. Tap Full Page at the top of the edit view.
  4. Tap Done and save to Files.

Two things to know: the capture is saved as a PDF, not a PNG or WebP, and this only works in Safari, not Chrome or Firefox on iOS. If you need an actual image file, use a browser extension or the API.

On Android

Android does not have a single universal answer here.

  • Samsung Galaxy: Take a screenshot normally (Power + Volume Down), then tap Scroll capture in the overlay that appears at the bottom. Samsung stitches the scrolled sections automatically into one image.
  • Google Pixel and most stock Android: No built-in scrolling screenshot. The closest native option is Share > Print > Save as PDF in Chrome, which has the same PDF limitation as iOS.
  • All Android browsers: Several extensions for Chrome on Android (such as GoFullPage) add a one-tap full-page screenshot. This is the practical choice on non-Samsung devices.

Choosing the right method

Situation Best method
Desktop, one-off manual capture Chrome DevTools
Desktop, Firefox user Firefox right-click > Save full page
iPhone, one-off iOS Safari full page (saves as PDF)
Samsung Android Scroll capture in the screenshot overlay
Other Android Browser extension
Server, script, or CI Screenshot API (full_page: true)
Mobile device, need an image file Screenshot API
AI agent or automated workflow Screenshot API

The pattern that works everywhere and in every format: the API. Native browser tools are fine for manual one-off captures but differ by platform, change with browser updates, and cannot be automated.

Wrapping up

Chrome DevTools and Firefox cover desktop. iOS gives you full pages but only as PDFs in Safari. Android is split: Samsung has scrolling capture built in, everyone else needs an extension. For anything automated, cross-device, or outside a desktop browser, a screenshot API with full_page: true is the consistent answer. Start capturing full pages programmatically with Grabbit's screenshot API.

Originally published on the Grabbit blog.

Top comments (0)