← Back to Blog
·9 min read

How to Take a Full Page Screenshot in Chrome (3 Methods)

Learn 3 ways to capture a full page screenshot in Chrome — DevTools, extensions, and advanced methods. Solve common problems with lazy loading and fixed headers.

How to Take a Full Page Screenshot in Chrome

Sometimes you need to capture more than what's visible on your screen. A full page screenshot grabs the entire webpage — including everything below the fold that you'd normally scroll to see — and saves it as a single image.

Chrome doesn't have a one-click button for this, but there are three reliable methods. We'll start with the quickest (no extension required) and work up to the most capable.

Method 1: Chrome DevTools (No Extension Required)

This is the fastest way to take a full page screenshot in Chrome without installing anything. It takes about 10 seconds once you know the steps.

  1. Open the webpage you want to capture
  2. Press Ctrl + Shift + I (Windows/ChromeOS) or Cmd + Option + I (Mac) to open DevTools
  3. Press Ctrl + Shift + P (or Cmd + Shift + P) to open the Command Palette
  4. Type screenshot
  5. Select Capture full size screenshot
  6. Chrome saves a full-page PNG to your Downloads folder

That's it. The saved image contains the entire page, from the top of the <html> element to the bottom.

Other DevTools Screenshot Options

While you're in the Command Palette, you'll notice three other screenshot commands:

  • Capture screenshot — captures only the visible viewport (what you see on screen)
  • Capture node screenshot — captures a specific HTML element. Select the element in the Elements panel first, then run this command.
  • Capture area screenshot — lets you drag to select a region of the page

The node screenshot is particularly useful for developers and designers. If you want to capture a specific card, header, or section of a page without any surrounding content, select it in the Elements panel and use this option. The output is perfectly cropped to the element's boundaries.

Limitations of the DevTools Method

The DevTools full-page capture works well for simple, static pages. But it has known issues with more complex sites:

  • Lazy-loaded images may be missing. Most modern sites defer image loading until you scroll to them. The DevTools capture doesn't trigger scrolling, so images below the fold may appear as blank placeholders or low-resolution previews.
  • Fixed headers and footers can repeat. Elements with position: fixed or position: sticky appear in their fixed position in the capture, which can create visual oddities in a long page capture.
  • Complex CSS layouts may render incorrectly. Parallax effects, position: sticky sections, and certain CSS grid layouts can produce unexpected results.
  • No editing. The output is a raw PNG. No annotation, no backgrounds, no cropping interface.

For straightforward pages — documentation, articles, simple web apps — the DevTools method is reliable and fast. For pages with complex dynamic content, an extension will give better results.

Method 2: GoFullPage Extension (Free, One-Click)

GoFullPage is a free Chrome extension that does exactly one thing: captures a full page with a single click.

How it works:

  1. Install GoFullPage from the Chrome Web Store
  2. Navigate to the page you want to capture
  3. Click the GoFullPage extension icon (or use its keyboard shortcut)
  4. The extension automatically scrolls through the entire page, capturing as it goes
  5. A new tab opens with the complete capture, ready to download as PNG, JPEG, or PDF

Why it works better than DevTools for dynamic content:

GoFullPage actually scrolls through the page during capture. This triggers lazy-loaded images, causes scroll-based animations to fire, and captures the page as a real user would see it. The result is generally more accurate than the DevTools method, especially for modern sites with dynamic loading.

Limitations:

  • No editing — the output is a raw image or PDF
  • No area selection or partial captures — it's full page or nothing
  • Some infinite-scroll pages (Twitter, Instagram) will still cause issues since the page has no definitive bottom

Best for: Users who regularly need full-page captures and want a single-click solution with no complexity.

Method 3: Captio (Capture, Edit, and Export)

Captio is a browser extension that includes full-page capture as one of several capture modes, combined with a visual editor for styling the result.

Capture modes:

  • Full page — scrolling capture that stitches the entire page
  • Element — click on any webpage element to capture it individually
  • Area — draw a custom rectangle
  • Viewport — capture what's currently visible

What you can do after capture: The captured image goes into Captio's compositor, where you can add a gradient background, adjust padding, apply shadows and rounded corners, crop to a specific section, place the capture inside a device mockup, add text overlays, or animate and export as video.

Best for: Users who need full-page captures that will be used in presentations, social media, blog posts, or product pages — situations where the raw capture needs to look polished before sharing.

Common Problems With Full Page Screenshots

Lazy-Loaded Images Appear Blank

This is the most frequent issue. Modern websites use lazy loading (the loading="lazy" attribute or JavaScript-based loading) to defer images until they're scrolled into view. Since the DevTools capture doesn't scroll, those images never load.

Solutions:

  • Manually scroll through the entire page before using the DevTools method (this triggers the images to load into the browser's cache)
  • Use a scrolling extension like GoFullPage, which scrolls automatically during capture
  • For individual important images, use the DevTools node screenshot to capture them separately

Fixed and Sticky Headers

Elements with position: fixed (like navigation bars) stay in the same position as you scroll. In a full-page capture, this means the header appears correctly at the top, but it also "floats" over the rest of the captured content in ways that look wrong.

Solutions:

  • Before capturing, open DevTools, find the fixed element, and temporarily set position: static or display: none
  • Some extensions detect and handle fixed elements during scrolling capture
  • Crop the header out of the final image if it's not needed

Infinite Scroll Pages

Pages like Twitter, Instagram, or Pinterest load more content as you scroll — there is no bottom of the page. A full-page capture on these sites will either hang, crash, or produce an extremely long image that stops wherever the extension gave up.

Solutions:

  • Scroll to the desired content depth before capturing
  • Use viewport or area capture instead of full page
  • For social media feeds, screenshot the specific posts you need individually

Very Long Pages

Chrome has a maximum canvas size of approximately 16,384 pixels in either dimension. A full-page capture of a very long page may be cut off at this limit. At 1920px width, this allows for roughly an 8:1 aspect ratio — long, but not unlimited.

Solutions:

  • Capture the page in sections and combine them manually
  • Use an extension that handles tiling for very long pages
  • Consider whether you really need the entire page, or just key sections

CSS Layout Issues

Some CSS features don't capture well in full-page screenshots:

  • Parallax scrolling — background elements that move at different scroll rates can appear misaligned
  • CSS position: sticky — similar issues to fixed elements
  • Scroll-snapping — pages with scroll-snap-type may capture at unexpected positions
  • Complex animations — CSS animations may be captured mid-animation

There's no universal fix for these. The rendering depends on how the browser constructs the full-page image internally. If specific sections are problematic, capture them individually with viewport or area capture.

Full Page Screenshots in Other Browsers

Firefox (Easiest Method)

Firefox has the best built-in full-page screenshot support of any major browser:

  1. Press Ctrl + Shift + S (or right-click the page and select Take Screenshot)
  2. Click Save full page in the top-right corner
  3. The full-page screenshot appears in a preview — click Download to save

This is simpler than Chrome's DevTools method and doesn't require an extension. Firefox's capture also handles some dynamic content better than Chrome's DevTools approach.

Microsoft Edge

Edge uses the same Chromium engine as Chrome, so the DevTools method works identically:

  1. Press Ctrl + Shift + I to open DevTools
  2. Press Ctrl + Shift + P for the Command Palette
  3. Select Capture full size screenshot

Edge also has a built-in Web Capture feature: press Ctrl + Shift + S to open it. Select Capture full page for a scrolling capture that opens in Edge's basic editor with crop and drawing tools.

Safari

Safari's Web Inspector has a screenshot capability:

  1. Enable the Develop menu in Safari > Settings > Advanced > Show Develop menu
  2. Open the Web Inspector with Cmd + Option + I
  3. Click the element selector, select the <body> element
  4. Right-click the element in the Inspector and choose Capture Screenshot

This captures the full page. The process is less streamlined than Chrome or Firefox.

Chromebooks

Chromebooks run a full Chrome browser, so the DevTools method works exactly the same as on desktop Chrome. All Chrome extensions (GoFullPage, Captio, etc.) also work identically on ChromeOS. For more on Chromebook screenshots, see our complete ChromeOS screenshot guide.

How to Beautify Full Page Screenshots

Raw full-page captures are often very tall and unwieldy. They're useful as references, but they rarely look good when shared directly. A few quick improvements make a significant difference:

Crop to key sections. You rarely need the entire page. Crop to the header and hero, a specific feature section, or the part that's relevant to what you're sharing.

Add a background. A gradient or solid color background with padding around the cropped screenshot adds visual context and makes the image feel intentional rather than raw.

Set an aspect ratio. If the screenshot is going on social media, a blog post, or a slide deck, match the platform's preferred aspect ratio — 16:9 for Twitter and presentations, 1:1 for Instagram, 4:3 for general use.

The free Captio screenshot editor handles all of this in your browser — upload any screenshot, add a background, adjust padding and border radius, and export a polished PNG. No account needed.

Frequently Asked Questions

How do I screenshot an entire webpage in Chrome?

Open Chrome DevTools with Ctrl + Shift + I, press Ctrl + Shift + P to open the command palette, type "screenshot," and select Capture full size screenshot. Chrome saves a full-page PNG to your Downloads folder. For better results with dynamic content, use a full-page capture extension.

Why is my full page screenshot missing images?

Most modern websites use lazy loading — images only load when you scroll to them. The Chrome DevTools method doesn't trigger scrolling, so images below the fold may appear as blank placeholders. Full-page capture extensions scroll through the page first, which triggers lazy-loaded content to appear.

Can I take a full page screenshot without an extension?

Yes. In Chrome, open DevTools (Ctrl + Shift + I), press Ctrl + Shift + P, and select "Capture full size screenshot." In Firefox, press Ctrl + Shift + S and choose "Save full page." Both methods work without any extension installed.

What is the maximum size of a full page screenshot in Chrome?

Chrome has a maximum canvas size of approximately 16,384 pixels in either dimension. Very long pages may be cut off at that limit. If your page exceeds this, consider capturing it in sections or using an extension that handles stitching at manageable sizes.

How do I take a scrolling screenshot in Chrome?

Chrome does not have a native scrolling screenshot shortcut. Use the DevTools method (Ctrl + Shift + I, then Ctrl + Shift + P, then "Capture full size screenshot") for a quick capture. For one-click scrolling screenshots with better handling of dynamic content, install a full-page capture extension like GoFullPage.

Does Firefox have built-in full page screenshots?

Yes. Firefox has a native full-page screenshot feature. Press Ctrl + Shift + S (or right-click the page and select "Take Screenshot") and choose "Save full page." This is easier than Chrome's DevTools method and works without any extension.

How do I take a full page screenshot on a Chromebook?

Chromebooks run Chrome, so the DevTools method works exactly the same: press Ctrl + Shift + I, then Ctrl + Shift + P, then select "Capture full size screenshot." You can also install any full-page capture extension from the Chrome Web Store — extensions work identically on ChromeOS.

Next Steps

Related Articles

Best Screen Capture Extensions for Chrome in 2026Read article →How to Edit Screenshots: Best Free Tools & Methods for Every PlatformRead article →Best Free Screen Recorders 2026 (No Watermark, No Time Limit)Read article →