ScreenshotNeo

BlogHow-to

How to Capture a Scrolling Screenshot in Chrome DevTools

Capture a full-page screenshot in Chrome DevTools with the Command Menu or Device Mode, and learn how to troubleshoot missing content.

By the ScreenshotNeo team4 October 20265 min read

To capture a scrolling screenshot of a webpage in Chrome, open DevTools, press Ctrl+Shift+P on Windows or Linux (or ⌘+Shift+P on Mac), type screenshot, then choose Capture full size screenshot. That command captures the page beyond the visible viewport. Capture screenshot captures only what is currently visible.

Capture a full-page screenshot from the Command Menu

  1. Open the page you want to capture in Chrome.
  2. Open DevTools. For example, right-click the page and choose Inspect.
  3. Open the Command Menu with Ctrl+Shift+P on Windows or Linux, or ⌘+Shift+P on Mac.
  4. Type screenshot in the menu.
  5. Select Capture full size screenshot.

Chrome saves the resulting image as a download. The command includes page content outside the current viewport. Choose the full-size option, not the similarly named viewport-only Capture screenshot command.

Use the Device Mode menu

You can also capture the full page from Device Mode:

  1. Open DevTools and turn on the device toolbar.
  2. Open the device toolbar’s More options menu.
  3. Choose Capture a full size screenshot.

Menu labels and their presentation can vary slightly across Chrome versions. Select the option that explicitly says full size. Chrome’s [Device Mode documentation](https://developer.chrome.com/docs/devtools/device-mode/) describes this route for capturing the whole page, including content not currently visible in the viewport.

Choose the right capture command

Command What it captures Use it when
Capture screenshot The currently visible viewport You need an image of the page as it appears on screen.
Capture full size screenshot The page beyond the current viewport You need a scrolling or full-page image.

The Command Menu is also available from DevTools’ Customize and control DevTools menu by choosing Run command.

What to check if content is missing

A full-size capture can only include content that the page has rendered and loaded for capture. If part of the result is missing, first check whether that content appeared on the page before you took the screenshot.

  • Scroll through the page first. Some pages load images or sections as you approach them. Check that the missing material has actually appeared before capturing.
  • Check for infinite scroll. A feed may fetch more items only after you reach its current end. Load the items you need before taking the screenshot.
  • Check whether the page reuses elements. Some virtualized lists render only the items near the viewport. If an item is not rendered when capture happens, it may not appear in the image.
  • Check that loading has finished. Wait for the missing content to appear, then capture again.

These are page-specific diagnostics, not guarantees about how every site behaves. Chrome’s documentation explains the full-size command but does not promise that every dynamic page architecture will be captured identically.

Automate capture with the Chrome DevTools Protocol

For browser automation, the Chrome DevTools Protocol (CDP) exposes Page.captureScreenshot. Its options include PNG, JPEG, or WebP output and a captureBeyondViewport parameter. This protocol command is for automation; these settings are not all exposed as controls in the standard DevTools screenshot menu. See the [Page.captureScreenshot protocol reference](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-captureScreenshot).

{
  "id": 1,
  "method": "Page.captureScreenshot",
  "params": {
    "format": "png",
    "captureBeyondViewport": true
  }
}

This is a CDP command message, not a standalone shell command: an automation client must connect to a Chrome debugging session, enable the Page domain as needed, send the command over the session’s protocol connection, and save the returned image data. The DevTools menu is the simplest option for a one-off manual capture.

Or skip the browser setup

If you need screenshots from code or repeated captures, ScreenshotNeo returns a screenshot from one GET request. See the ScreenshotNeo API documentation for the available options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
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)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

Sign up for 1,000 free screenshots a month, with no card required.

Troubleshooting

Problem Likely cause What to do
The image shows only the visible screen area. You chose Capture screenshot, the viewport-only command. Open the Command Menu again and select Capture full size screenshot.
You cannot find the command. The Command Menu may not be open, or the search term may not match. Open DevTools, press the platform shortcut, and type screenshot. You can also open DevTools’ Customize and control menu and choose Run command.
Images or sections are absent. They may not have loaded or rendered before capture. Scroll to the content, wait for it to appear, then capture again. For feeds, load the needed items first.
The full-size option is not where you expect in Device Mode. Menu presentation can vary by Chrome version. Look in the device toolbar’s More options menu for the full-size screenshot option, or use the Command Menu.

Performance and reliability notes

  • A full-page image contains more page area than a viewport capture, so its dimensions and file size can be larger.
  • Let the page finish rendering and loading the content you need before capture. Dynamic content can change while a page is loading or scrolling.
  • For repeatable automated captures, use a browser automation client with CDP and control the page’s loading and capture steps. CDP supports format selection and capture beyond the viewport, while the DevTools UI is intended for manual use.

FAQ

Does Chrome’s full-size command capture below the fold?

Yes. Capture full size screenshot is the command for capturing the whole page, including content outside the visible viewport.

Is “Capture screenshot” the same as “Capture full size screenshot”?

No. The first captures the current viewport; the second captures the full page.

Can I choose PNG, JPEG, or WebP in the DevTools menu?

The CDP Page.captureScreenshot method supports PNG, JPEG, and WebP. Do not assume those protocol options are available as settings in the standard DevTools menu.

Can I use this for a page that keeps loading more content?

Load the content you need and confirm that it has rendered before capture. Infinite-scroll and virtualized pages can behave differently depending on how they load and render content.