Guides → How to Capture a Full Page Screenshot

How to Capture a Full Page Screenshot in Chrome

Last updated: February 2025 · 8 min read

Capturing a screenshot of an entire web page — not just the visible portion — is a common need for developers, designers, testers, and content creators. Unfortunately, the standard screenshot shortcuts on Windows (Print Screen) and macOS (Cmd+Shift+3) only capture what's currently visible on screen. If the web page extends below the fold, you need a different approach.

In this guide, we'll cover four different methods to capture full page screenshots in Google Chrome, from built-in developer tools to dedicated browser extensions. Each method has its own strengths and limitations, so you can choose the one that fits your workflow best.

Method 1: Chrome DevTools (Built-in)

Chrome has a built-in full page screenshot feature hidden inside DevTools. It works without installing anything, making it a good option for quick one-off captures.

Steps:

1. Open the web page you want to capture.
2. Open DevTools by pressing F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac).
3. Open the Command Menu by pressing Ctrl+Shift+P (Windows) / Cmd+Shift+P (Mac).
4. Type "Capture full size screenshot" and select it from the list.
5. Chrome will capture the entire page and download it as a PNG file.

Pros:

• No extension or software installation needed
• Works on any website accessible in Chrome
• Captures the full page width and height

Limitations:

• Does not handle fixed/sticky headers well — they may appear only at the top or repeat throughout the capture
• Scrollable sidebars and independently scrollable panels are not expanded — only the initially visible portion is captured
• Pages with lazy-loaded images may show blank areas where images haven't loaded yet
• The capture resolution is limited to the current viewport width, which may differ from the actual display resolution on HiDPI screens
• No preview — the file downloads directly without a viewer

DevTools screenshot works by rendering the page at its full scroll height in a single pass. This means it doesn't actually scroll the page, which avoids some issues but creates others. Elements that rely on scroll position (like lazy-loaded content or scroll-triggered animations) won't be captured properly.

Method 2: Chrome DevTools with Device Emulation

For more control over the capture dimensions, you can use Chrome's device emulation mode in DevTools.

Steps:

1. Open DevTools (F12).
2. Click the device toolbar icon (or press Ctrl+Shift+M) to enable device emulation.
3. Set your desired viewport width at the top of the page.
4. In the three-dot menu of the device toolbar, select "Capture full size screenshot".

This method lets you control the exact viewport width, which is useful when you need screenshots at specific breakpoints (e.g., 1440px for desktop, 768px for tablet, 375px for mobile).

Method 3: Using a Chrome Extension

Chrome extensions designed for full page screenshots solve many of the limitations of the DevTools approach. They work by actually scrolling through the page and capturing each viewport frame, then stitching them together.

How extensions capture pages:

1. The extension injects a content script into the active tab.
2. The script scrolls the page to the top and begins capturing frames.
3. For each frame, it scrolls to the next position and uses Chrome's captureVisibleTab API to capture the visible viewport.
4. After all frames are captured, they are stitched together into a single image.
5. The final image is displayed in a viewer or downloaded directly.

Advantages over DevTools:

• Fixed element handling — Good extensions detect fixed headers and navigation bars, capturing them once and hiding them in subsequent frames to prevent duplication.
• Lazy-loaded content — Because the extension actually scrolls the page, lazy-loaded images and content have time to load before being captured.
• Scrollable panels — Advanced extensions can detect independently scrollable regions (like sidebars) and expand them so all content is visible.
• HiDPI support — Extensions can capture at the device's native pixel ratio, producing sharper images on Retina displays.
• Integrated viewer — Most extensions provide a viewer where you can preview, download, or copy the screenshot.

Things to watch for:

• Extensions require browser permissions — check that the extension only requests the minimum permissions needed.
• Some free extensions have limitations on image resolution or add watermarks.
• Privacy-conscious users should verify that the extension processes images locally rather than uploading to a server.

Method 4: Online Screenshot Services

Several web-based services allow you to enter a URL and receive a full page screenshot. These work by loading the page in a headless browser on a remote server and capturing the result.

How they work:

1. You enter the target URL on the service's website.
2. The service loads the page in a headless Chrome instance on their server.
3. It captures the full page and provides a download link.

Pros:

• No installation required — works from any browser
• Can capture pages on different devices and screen sizes
• Some services offer API access for automated screenshots

Cons:

• Privacy concern — The URL and page content are sent to a third-party server. Do not use these services for pages with sensitive or private information.
• Cannot capture pages that require authentication (unless the service supports cookie injection).
• May not render JavaScript-heavy pages correctly depending on the headless browser configuration.
• Free tiers often have resolution limits, watermarks, or daily capture quotas.

Comparison Table

Which Method Should You Choose?

For quick, occasional captures: Use Chrome DevTools. It's already built in and works without any setup. Good enough for simple pages without complex layouts.

For regular use with modern websites: A dedicated extension is the best choice. It handles fixed elements, lazy loading, scrollable panels, and HiDPI displays — all the edge cases that trip up simpler methods.

For automated or API-based captures: An online service with an API is ideal if you need to capture screenshots programmatically, such as for monitoring, testing, or generating thumbnails.

For authenticated pages or sensitive content: Always use a local method (DevTools or extension) rather than an online service, since the page content stays on your machine.

Common Issues and Solutions

Blank or white areas in the screenshot

This usually happens with lazy-loaded images. When using DevTools, the page doesn't actually scroll, so images below the fold never load. The solution is to scroll through the entire page manually before capturing, or use an extension that scrolls automatically.

Repeated fixed headers

Fixed position elements (like navigation bars) stay in place as the page scrolls. When capturing by scrolling and stitching, these elements appear in every frame, creating visible repetition. Extensions with smart fixed-element detection solve this by identifying fixed elements and hiding them after the first frame.

Cut-off sidebar content

On sites like YouTube, the sidebar has its own scroll — it scrolls independently from the main page. Standard screenshot tools only capture the visible portion of these sidebars. Advanced extensions detect these independently scrollable regions and expand them to their full height before capturing.

Blurry screenshots on Retina displays

If your screenshots look blurry, the tool may be capturing at 1x resolution on a 2x display. Look for a tool that captures at the device's native pixel ratio (devicePixelRatio). The resulting image will be larger (e.g., 2880px wide for a 1440px viewport on a 2x display) but much sharper.

← Back to all guides