How to Take a Full-Page Screenshot in Chrome Using the Console

Fastest method: open the page in Chrome, press F12 (or Ctrl+Shift+I on Windows/Linux, Command+Option+I on macOS), then open the DevTools Command Menu with Ctrl+Shift+P (Windows/Linux) or Command+Shift+P (macOS). Search for Capture full size screenshot and run it. Chrome downloads a PNG containing content beyond the visible viewport.

The Console helps you inspect page dimensions and state before capture. It is not documented as the normal command that writes the PNG; the supported user-facing action is DevTools’ full-size screenshot command.

1. Capture the whole page in Chrome DevTools

Navigate to the page you want to save.
Wait for the initial content to load. If the page fetches data or images after load, wait for those requests to finish.
Open DevTools with F12, Ctrl+Shift+I, or Command+Option+I.
Open the Command Menu with Ctrl+Shift+P or Command+Shift+P.
Type Capture full size screenshot.
Select the matching command. Chrome saves a PNG of the page, including content below the viewport.

This is Chrome’s built-in workflow and requires no extension or script. It is useful for a one-off capture when you can inspect the result immediately.

2. Use the Console to check page geometry first

Run this in the DevTools Console:

({
  viewportWidth: window.innerWidth,
  viewportHeight: window.innerHeight,
  documentWidth: document.documentElement.scrollWidth,
  documentHeight: document.documentElement.scrollHeight
})

The result tells you whether the document is much taller than the viewport and whether horizontal overflow exists. A large or changing documentHeight usually means content is still expanding, lazy images are loading, or a script has not finished rendering.

Check for unfinished loading

({
  readyState: document.readyState,
  images: [...document.images].map(img => ({
    src: img.currentSrc || img.src,
    complete: img.complete,
    width: img.naturalWidth,
    height: img.naturalHeight
  })),
  pendingFonts: document.fonts ? document.fonts.status : 'Font Loading API unavailable'
})

For a stable capture, look for readyState: "complete", images with nonzero natural dimensions, and pendingFonts: "loaded". These checks diagnose page state; they do not replace the DevTools capture command.

3. Prepare difficult pages before capturing

Lazy-loaded content

Some pages load images only after they approach the viewport. Scroll through the page once, pause at the bottom, then run Capture full size screenshot. If the page keeps growing, repeat the geometry check until documentHeight stops changing.

Fixed headers and sticky controls

A fixed header can appear repeatedly or cover content in a stitched image. Temporarily hide it from the Elements panel or with a temporary style in the Console:

document.querySelectorAll('header, [style*="position: fixed"], [style*="position:sticky"]')
  .forEach(el => el.style.setProperty('display', 'none', 'important'));

Use a narrow selector when possible. This change affects the current page only; reload to restore the original layout.

Dismiss overlays before capture. If a modal blocks the page, use its close control or temporarily hide the specific element in Elements. Verify that hiding it does not remove content you need in the screenshot.

Embedded frames

An iframe is rendered by its own document. The top-level screenshot may include the frame visually, but you cannot inspect cross-origin frame geometry from the parent Console because of browser security rules. Open the frame URL separately when you need a pixel-perfect capture of its contents.

4. Choose the right capture method

Method	Best for	Output and control
DevTools command	One-off manual captures	PNG download; minimal setup
Headless Chrome	Shell scripts and simple automation	Viewport, timeout, and virtual-time controls
Chrome DevTools Protocol	Test harnesses and browser automation	Programmatic capture, including beyond-viewport screenshots
ScreenshotNeo	Repeatable API captures without maintaining a browser	PNG, JPEG, WebP, or PDF plus capture controls

5. Automate with Headless Chrome

Chrome’s headless mode can save a screenshot directly from a URL:

chrome --headless --screenshot --window-size=412,892 https://example.com

This writes screenshot.png in the current directory. Add a delay for pages that need time to render:

chrome --headless --timeout=5000 --screenshot --window-size=1440,900 https://example.com

For time-dependent pages, --virtual-time-budget lets Chrome advance virtual time before capture:

chrome --headless --virtual-time-budget=10000 --screenshot --window-size=1440,900 https://example.com

Headless screenshots are convenient for scripts, but inspect the result when pages use lazy loading, sticky elements, animations, or very large documents. The exact command name may be google-chrome or chromium on your system.

6. Automate with the Chrome DevTools Protocol

For browser automation, call Page.captureScreenshot and set captureBeyondViewport: true. The method returns base64-encoded image data. A minimal Node.js example using a running remote-debugging Chrome instance is:

import fs from 'node:fs/promises';

const response = await fetch('http://localhost:9222/json');
const [target] = await response.json();
const ws = new WebSocket(target.webSocketDebuggerUrl);
let id = 0;
const pending = new Map();

ws.addEventListener('message', event => {
  const message = JSON.parse(event.data);
  const resolve = pending.get(message.id);
  if (resolve) {
    pending.delete(message.id);
    resolve(message.result);
  }
});

const send = method => new Promise(resolve => {
  const requestId = ++id;
  pending.set(requestId, resolve);
  ws.send(JSON.stringify({ id: requestId, method }));
});

await new Promise(resolve => ws.addEventListener('open', resolve, { once: true }));
const result = await send('Page.captureScreenshot');
await fs.writeFile('screenshot.png', Buffer.from(result.data, 'base64'));
ws.close();

In production automation, navigate the target first, wait for a selector or network idle condition, and handle protocol errors and disconnected targets. CDP is the most flexible option when your test runner already controls Chrome.

7. Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server. It can capture full pages, load lazy images, use device presets or custom viewports, apply dark mode and retina scale, wait for a selector, delay, or network idle, click an element, hide selectors, block ads or selected resource types, set headers, cookies, user agents, authorization, timezone, and geolocation, and return PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for the complete option list.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests

r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify the page verdict and whether the shot was billed. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

8. Troubleshooting

Problem	Likely cause	Fix
Screenshot stops at the viewport	The wrong command was selected or an automation tool used a normal viewport capture	Run Capture full size screenshot, or use CDP with `captureBeyondViewport: true`.
Images are blank	Lazy loading or slow image requests	Scroll through the page, wait, confirm image dimensions in the Console, then capture again.
Page height changes between checks	Client-side rendering, ads, or deferred content	Wait for the page to settle; capture after the height remains stable.
Content is hidden under a header	Fixed or sticky positioning	Dismiss or temporarily hide the header and verify the resulting layout.
Cookie dialog covers the page	Consent overlay is still active	Accept or reject the banner, close it, then capture.
Cross-origin iframe cannot be inspected	Same-origin policy	Capture the iframe’s source URL separately or rely on the visual inclusion in the parent screenshot.
Headless command fails	Chrome binary name or flags differ by installation	Try `google-chrome` or `chromium`, run the command with an absolute binary path, and verify the URL is quoted.
CDP returns a protocol or connection error	Chrome is not running with remote debugging or the target closed	Launch Chrome with remote debugging enabled, refresh the target list, and retry with reconnect handling.

9. Performance, reliability, and cost considerations

Performance: Full-page images contain every pixel, so very tall pages take longer and produce larger files. Reduce unnecessary page content, wait only as long as required, and choose a sensible viewport.
Reliability: Dynamic pages can change while Chrome stitches or renders the capture. Disable animations where practical, wait for fonts and images, and repeat the geometry check before saving.
Repeatability: Headless Chrome and CDP make viewport and timing explicit. Record the URL, viewport, wait condition, and browser version with automated artifacts.
Cost: Local DevTools, Headless Chrome, and CDP have no service charge but require your own browser runtime and maintenance. ScreenshotNeo charges only for clean shots; failed loads, bot checks, blank pages, timeouts, and cache hits are free, and its plans include all features.

10. FAQ

Can I run one Console command that exports the full-page PNG?

Chrome’s documented workflow uses the DevTools Command Menu action Capture full size screenshot. The Console is useful for inspecting dimensions and readiness; automation should use Headless Chrome or CDP.

Does full-page capture include content below the fold?

Yes. The DevTools full-size command captures the document beyond the visible viewport.

What format does DevTools save?

The built-in full-size screenshot is downloaded as a PNG.

Use CDP when a script, test harness, or CI job must control navigation, waiting, output naming, and error handling.

Can I capture a PDF with the same workflow?

DevTools’ full-size screenshot command produces a PNG. Use a browser print-to-PDF flow or an API such as ScreenshotNeo when PDF output and page options are required.