DEV Community

Cover image for How to Capture a Full-Page Screenshot in Google Chrome
Grabbit profile image Nico Acosta
Nico Acosta for Grabbit

Posted on • Originally published at grabbit.live

How to Capture a Full-Page Screenshot in Google Chrome

#javascript #webdev #tutorial #programming

The fastest way to capture a full-page screenshot in Chrome needs no extension at all: open DevTools, run one command, and Chrome stitches the entire scrolling page into a single image. This guide covers that built-in method, the extension route if you want a one-click button, and how to automate full-page captures once you need them for more than one page at a time.

The built-in DevTools method (no extension)

Chrome ships a full-page capture inside Developer Tools. It is the method most "scrolling screenshot" guides eventually point you to, and it works on every desktop platform:

  1. Open the page you want to capture.
  2. Open DevTools: F12, or Ctrl+Shift+I on Windows and Linux, or Cmd+Option+I on Mac.
  3. Open the Command Menu: Ctrl+Shift+P on Windows and Linux, or Cmd+Shift+P on Mac.
  4. Type screenshot, then select Capture full size screenshot.

Chrome scrolls the whole page, stitches it into one tall PNG, and downloads it to your default folder. This captures the entire document height, not just the part visible in the window, which is the difference between this and a normal screenshot.

If you only want the visible area, the same menu offers Capture screenshot, and Capture node screenshot grabs a single selected element from the Elements panel.

The extension route

If you would rather click a button than open DevTools each time, a full-page screenshot extension adds one to the toolbar. GoFullPage is the most widely used, and ScreenshotOne and similar tools offer browser extensions too. The trade-off: an extension can see the pages you capture, so for sensitive or internal pages the built-in DevTools method keeps everything local.

Save as PDF instead

If you need a document rather than a PNG, Chrome's print dialog does full-page export:

  1. Press Ctrl+P (Windows/Linux) or Cmd+P (Mac).
  2. Set the destination to Save as PDF.
  3. Click Save.

This captures the full page as vector text where possible, which is better than an image if the page is mostly type.

When the manual method stops scaling

Everything above is one page at a time, by hand. That is fine for a handful of captures. It falls apart the moment you need full-page screenshots:

  • across dozens or hundreds of URLs (a sitemap audit, competitor research),
  • on a schedule (visual monitoring, change detection),
  • inside CI (visual regression tests on every deploy),
  • or generated on demand (social preview images per page).

For any of those, you want an API call instead of a person and a keyboard. A screenshot API runs a real Chromium render on its side and returns a hosted image, so you script the capture instead of performing it.

Automating full-page captures

Here is the same full-page capture as a single request to Grabbit. Set full_page to true and you get the entire scrolling page back, exactly like the DevTools command:

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

The response includes a hosted image_url you can store or display directly:

{
  "id": "grb_01jx...",
  "status": "done",
  "image_url": "https://cdn.grabbit.live/grabs/grb_01jx....webp",
  "width": 1280,
  "format": "webp",
  "bytes": 47120,
  "execution_ms": 1240
}
Enter fullscreen mode Exit fullscreen mode

To capture many pages, loop over your list of URLs and send one request each. Width accepts 320 to 1920, format is png, jpeg, or webp, and delay_ms (0 to 10000) waits for late-rendering content before the shot fires. If a page lazy-loads sections, delay_ms plays the same role as scrolling the page yourself in DevTools.

Which method to use

Reach for the DevTools Command Menu for a quick one-off capture: it is built in, local, and needs nothing installed. Reach for an extension if you want a permanent toolbar button and the pages are not sensitive. Reach for an API when capturing is a repeated or automated job and doing it by hand no longer makes sense.

For the cross-tool breakdown of full-page capture (including Firefox, Edge, and code approaches), see how to take a full-page screenshot. If you are already scripting captures in code, full-page screenshots in Puppeteer covers the same job in Node.

Originally published on the Grabbit blog.

Top comments (0)