Skip to content
Capturing web pages

How to Take a Full Page Screenshot in Chrome

Chrome has no full-page screenshot button, but you can still capture a whole page in one image. Here is how to do it with DevTools or with InnoShot, and how to fix results that look wrong.

By InnoShot team 7 min read

Chrome on desktop shows you the whole of a web page, but none of its menus will save that page as one image. Your operating system's screenshot shortcut, such as Win+Shift+S on Windows or Cmd+Shift+4 on macOS, only captures what fits in the window. For a landing page, a long article or a report, you usually need everything from the header to the footer.

There are two practical ways to get that in Chrome. The first is built in, but hidden inside Chrome DevTools. The second uses InnoShot, an extension that scrolls the page, captures it screen by screen, stitches the pieces together and opens the result in an editor. This guide covers both, explains where each one struggles, and lists the problems you are most likely to run into.

Method 1: Chrome DevTools

DevTools is the set of developer tools that ships with Chrome. You do not need to be a developer to use its screenshot commands; you only need to know where they are.

  1. Open the page you want to capture and wait for it to finish loading.
  2. Open DevTools with F12, or with Ctrl+Shift+I on Windows and Linux (Cmd+Option+I on macOS).
  3. Open the Command Menu with Ctrl+Shift+P (Cmd+Shift+P on macOS).
  4. Type screenshot.
  5. Choose Capture full size screenshot.

Chrome saves a PNG file to your Downloads folder. The same list also offers Capture screenshot for the visible area, Capture area screenshot for a region you drag, and Capture node screenshot for a single element selected in the Elements panel.

Capturing the mobile layout with Device Mode

To capture the page as it looks on a phone or tablet, press Ctrl+Shift+M (Cmd+Shift+M on macOS) while DevTools is open to turn on Device Mode. Pick a device or width in the toolbar above the page, then open the toolbar's three-dot menu. It offers Capture screenshot and Capture full size screenshot at that size.

Where DevTools falls short

DevTools is a good fit for a quick, unedited file, but it has real limits:

  • There is no editor. To crop, annotate, blur or add a background, you open the PNG in another program.
  • Capture full size screenshot expands the page, not the areas inside it that have their own scrollbar. A chat panel, data table or sidebar is captured only as far as it is currently scrolled.
  • Fixed and sticky elements, such as headers and cookie bars, can render oddly, and lazy-loaded images can be missing.
  • Very long pages can come out incomplete.
  • You repeat the same five steps every time, which adds up if you capture pages often.

Method 2: InnoShot

InnoShot is a free Chrome extension for capturing and editing screenshots. Full-page capture is one of its four main capture modes, next to visible area, selected area and element. Everything runs locally in your browser: there is no account, nothing is uploaded, and exports carry no watermark.

Install the extension

InnoShot is coming to the Chrome Web Store; the download page links to the listing once it is live. After installing, open Chrome's Extensions menu (the puzzle-piece icon) and pin InnoShot so its icon stays in the toolbar.

Capture the whole page

  1. Open the page and let it load.
  2. Start a full-page capture in one of three ways:
    • Click the InnoShot icon in the toolbar and choose the full-page capture.
    • Press Alt+Shift+F. On macOS, Chrome shows this as Option+Shift+F.
    • Right-click the page and choose InnoShot's full-page capture from the context menu.
  3. InnoShot scrolls through the page one screen at a time and shows its progress. Press Esc at any point to cancel.
  4. When it finishes, it restores your original scroll position and opens the capture in the editor in a new tab.

The full-page capture guide in the docs covers every option in detail.

Why it takes a few seconds

Chrome allows an extension to capture the visible part of a tab at most twice per second. InnoShot works within that rule, so it needs roughly half a second per screen. A short page takes a couple of seconds; a page 20 screens tall takes about 11 seconds.

Using that standard capture method is also why InnoShot needs so few permissions. Each capture starts from something you do, such as clicking the icon, pressing the shortcut or using the context menu, and that gesture gives InnoShot access to the current tab only. It has no host permissions, so Chrome never shows a "read and change all your data on all websites" warning for it.

How it handles sticky headers and lazy images

Two things commonly spoil stitched screenshots, and InnoShot deals with both:

  • Sticky and fixed bars. A header that stays at the top while you scroll would otherwise appear on every screen of the stitched image. InnoShot shows top-anchored bars once, in the first part of the capture, and bottom-anchored bars once, in the last part.
  • Lazy-loaded images. Many pages load images only when you scroll close to them. An optional pre-scroll pass steps through the page first so those images are loaded before capture begins.

There is also an option to pause animations during capture, which helps on pages with scroll-triggered effects.

Edit and export the result

The editor opens with the full page ready to work on. You can crop to the part you need, add arrows and text, hide private details, or place the capture on a background. When you are done, export it as PNG, JPEG or WebP with your choice of quality and scale, or copy it to the clipboard as a PNG.

Tall pages are often easier to read as a PDF. InnoShot's PDF export splits a tall capture into readable A4 or Letter pages instead of shrinking it onto one; the guide to turning a long screenshot into a PDF walks through it. Every capture is also kept in InnoShot's local history, so you can reopen it later.

Which method should you use

Both methods are free, so the choice comes down to how you work:

  • Use DevTools when you cannot install extensions on the computer you are using, or you need one quick PNG with no editing.
  • Use Device Mode in DevTools when you specifically need the page at a phone or tablet width.
  • Use InnoShot when you capture pages regularly, need sticky headers and lazy images handled, or want to edit, annotate and export the image without switching programs.

Common problems and fixes

The page cannot be captured, or only partly. Chrome restricts extensions on certain pages. They include chrome:// pages, the Chrome Web Store, other extensions' pages, view-source: pages and the New Tab page. Local files opened with a file:// address work only after you turn on "Allow access to file URLs" on InnoShot's details page in chrome://extensions. The docs list all restricted pages.

The shortcut does nothing. Alt+Shift+F is a suggested shortcut. If another extension already uses it, Chrome does not assign it to InnoShot. Open chrome://extensions/shortcuts to check which key is active or to choose a different one.

Part of the page is missing. If the content you wanted lives in a panel with its own scrollbar, full-page capture records the page, not the inside of that panel. Use InnoShot's "Capture scrollable region" instead; the guide to capturing a scrollable div explains how.

The capture stopped before the end. Pages with infinite scroll keep adding content as you reach the bottom, so they have no real end. InnoShot stops at a maximum capture height, 40,000 CSS pixels by default, and the editor tells you when that happened.

Something looks out of place. Parallax backgrounds, scroll-triggered animations and long lists that load and unload rows as you scroll can draw differently while the page is being captured. Turn on the pause animations option and try again. InnoShot also reports when the page height changed during capture. More fixes are in the full-page troubleshooting guide.

The page is extremely long. Browsers limit how large a single image can be. InnoShot stores very long captures in segments instead of cutting them off, and if an export would exceed the limit, it offers to split it into numbered files, scale it down or save it as a PDF. Nothing is cropped silently.

Wrapping up

If you need one quick image, DevTools' Capture full size screenshot is already in your browser. If you capture pages often, InnoShot turns the job into one click or Alt+Shift+F, deals with sticky headers and lazy images, and gives you an editor for the result. Some pages are harder than others, especially endless feeds and pages that change as you scroll; the guide to taking a screenshot of a scrolling page explains what is going on with those and how to get a clean capture anyway.

  • full page screenshot
  • chrome devtools
  • chrome extension

6 min read

How to Capture a Scrollable Div in Chrome

Chat threads, side panels and data tables often scroll inside their own box, so normal screenshots miss most of the content. Here is how to capture all of it with DevTools or InnoShot.

7 min read

How to Take a Screenshot of a Scrolling Page

Long feeds, infinite scroll and lazy-loaded images make scrolling screenshots tricky. Learn why, how scroll-and-stitch capture works, and how to get a clean long screenshot on any desktop.

6 min read

How to Capture a Specific Element on a Webpage

Need just one chart, card or table from a page? Learn how to screenshot a single element with Chrome DevTools or with InnoShot's element picker, and what to do when the capture comes out wrong.