Why Does Chrome DevTools Screenshot Crop the Bottom of a Web Page?

Short answer: Chrome DevTools’ regular Capture screenshot captures the visible viewport. To include content below it, choose Capture a full size screenshot in Device Mode’s More options menu. If you are capturing through the Chrome DevTools Protocol, inspect the Page.captureScreenshot request and set captureBeyondViewport as needed; its documented default is false. A cropped bottom alone does not identify one universal bug—the capture mode and page or automation setup matter. Chrome’s Device Mode guide and the DevTools Protocol documentation describe these options.

Choose the capture scope that matches your goal

Chrome screenshots can target different areas. First identify which one you need:

Capture scope	What it includes	Use it when
Viewport	The area currently visible in the browser’s viewport	You need a screenshot of the current screen or device preview
Full page	The page beyond the visible viewport	You need the whole document, including below-the-fold content
Inspected node	The selected DOM element	You need one component or region rather than the whole page

In Device Mode, Chrome documents Capture screenshot as capturing the visible viewport and Capture a full size screenshot as including content outside it. These are separate commands. A node screenshot is also a separate operation; Chrome 89’s DevTools release notes describe node screenshots that include content below the fold.

Fix it in Chrome DevTools

Open the page in Chrome and open DevTools.
Turn on Device Mode if it is not already enabled.
Open the Device Mode More options menu.
Select Capture a full size screenshot when you need the whole page. Use Capture screenshot for only the visible viewport.

If you intended to capture one inspected element, use the node screenshot command for that element and check that the selected node is the one you want. Do not assume a node capture and a full-page capture have the same scope.

Full-page capture through the DevTools Protocol

For automation that calls Page.captureScreenshot, check the request parameters. The protocol documents captureBeyondViewport with a default of false. When you need content beyond the current viewport, set it explicitly to true and provide the rest of the parameters appropriate to your capture. Here is the relevant request shape; send it through your existing DevTools Protocol connection after attaching to the page target:

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

This snippet shows the protocol method and the setting relevant to off-viewport capture; it is not a standalone WebSocket client. Your automation must establish a DevTools Protocol session and send the request to the correct page target. Consult the protocol method reference for the current parameter definitions and any additional options your client needs.

What the setting does—and does not tell you

captureBeyondViewport controls whether the protocol capture can include content beyond the viewport. It does not, by itself, prove why a particular page was cropped, nor does a cropped screenshot establish that the protocol default caused the problem. Confirm the capture method, request parameters, and target before changing code.

If a full-size screenshot still crops content

Once you have selected full-page capture, collect enough detail to distinguish a scope issue from a page- or version-specific problem:

Record the Chrome version and the exact command or API method used.
Confirm whether the capture targets the whole page, an element, or the visible viewport.
For protocol-based capture, record the relevant request parameters, especially captureBeyondViewport.
Identify which region is missing and whether the result is consistently cropped.
Reduce the page to a minimal reproduction if you need to investigate a page-specific rendering issue.

The available documentation establishes the difference between viewport and full-size capture and documents the protocol option’s default. It does not establish one cause for every report of a cropped bottom, so avoid diagnosing a specific page without those details.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Make one GET request with the page URL to return a screenshot; use the options in the ScreenshotNeo API documentation to configure capture, including full-page screenshots.

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}`);

Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Response headers report the page verdict and billing status.
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 a month with no card. Paid plans start at $5 for 3,000 screenshots.

Other capture options and practical considerations

Pick the smallest scope that meets the need

For a screenshot of what a user sees at a particular viewport, use viewport capture. For an entire document, use full-page capture. For a component, capture its inspected node. Matching scope to the task makes the result easier to interpret and avoids treating a viewport screenshot as a failed full-page screenshot.

Automation and configuration

When automating, make the capture scope explicit in the method or request, and check the protocol’s current parameter definitions. If your tool wraps the DevTools Protocol, verify how it exposes captureBeyondViewport rather than assuming that a default wrapper setting matches your intended result. The official sources here document the capture modes and protocol default; they do not provide universal performance or cost figures for full-page capture.

Reliability and cost

The built-in DevTools remedy is to select the full-size command; protocol-driven workflows should inspect the request and explicitly configure off-viewport capture when required. The cited Chrome documentation does not state a universal reliability guarantee, speed comparison, or cost for these methods. For a particular page, preserve the version, target, request, and missing-region details so the result can be investigated rather than attributed to an unsupported universal cause.

Troubleshooting checklist

Symptom	Likely check	Action
Screenshot ends at the visible screen	The viewport capture command may have been used	In Device Mode, choose Capture a full size screenshot.
Automated screenshot omits below-viewport content	`captureBeyondViewport` may be unset and therefore using its documented default, `false`	Inspect the `Page.captureScreenshot` request and set the option to `true` when appropriate.
Only one section appears in the capture	The command may target an inspected node	Check the selected node and use full-page capture if the entire document is needed.
Full-size capture still misses a region	The cause is not determined by the symptom alone	Record Chrome version, command, target, page URL or minimal reproduction, request parameters, and missing area.
Unclear whether a result is a bug	The available documentation does not establish a universal cause for all crop reports	Reproduce with the same page and capture setup, then compare the exact behavior and environment.

FAQ

Does “Capture screenshot” mean full page?

No. Chrome’s Device Mode guide describes that command as capturing the visible viewport. Use Capture a full size screenshot for content outside it.

What is the default for `captureBeyondViewport`?

The DevTools Protocol documentation lists the default as false.

Are node screenshots the same as full-page screenshots?

No. A node screenshot targets an inspected element. Chrome 89 release notes document below-the-fold content in node screenshots, but that does not make a node capture equivalent to capturing the whole page.

Can I identify the cause from “the bottom is cropped” alone?

No. First establish the capture mode and target, then inspect the page or protocol setup. The cited sources do not support one universal diagnosis.