Chrome DevTools Full-Page Screenshot Is Blank: Causes and Fixes

A blank or incomplete Chrome full-page screenshot is a symptom, not a diagnosis. First check whether Chrome captured the full page, then determine whether the page was already blank while loading, and finally inspect capture parameters and page geometry if you use automation.

Chrome DevTools has separate commands for a viewport screenshot and a full-size screenshot. For Chrome DevTools Protocol (CDP) automation, inspect Page.captureScreenshot, especially captureBeyondViewport and any clip rectangle. The protocol reference sets captureBeyondViewport to false by default. There is no documented universal cause or one fix that applies to every blank capture.

1. Confirm that DevTools is capturing the full page

In Chrome DevTools Device mode, open the screenshot menu and select Capture a full size screenshot. The regular Capture screenshot command captures only what is visible in the viewport. If your file contains only the top screen, this is the first thing to check. See the Chrome Device mode screenshot instructions.

Open DevTools and enable Device mode if needed.
Open the screenshot menu in the Device mode toolbar.
Choose Capture a full size screenshot.
Open the saved image and check whether it includes content below the viewport.

Chrome documents the full-size command as capturing the whole page, including content outside the viewport. If the output is still blank or incomplete, continue with the page-loading checks below.

2. Check whether the page was blank before capture

Use the Network panel’s screenshots feature to record how the page looked at different points during loading. Reload the page and compare the frames with the network activity around each moment. If a frame is already blank, investigate the page’s navigation, rendering, or resources before treating the screenshot exporter as the cause. Chrome’s Network panel guide explains the loading timeline and screenshots.

Open DevTools and select Network.
Enable the screenshots capture option if it is available in your DevTools version.
Reload the page and inspect the recorded frames alongside requests.
Look for failed or delayed document, script, stylesheet, image, and font requests around the blank interval.

A page that is blank only in early frames may simply not have rendered yet at the time of capture. A page that stays blank needs page-level diagnosis. This evidence narrows the problem; it does not identify a specific fault without the URL and browser state.

3. Inspect browser-reported resource issues

Open the DevTools Issues panel and inspect the affected resources. Chrome lists issue categories that include stylesheet loading problems, CORS, Content Security Policy (CSP), cookie issues, and mixed content. These are useful leads, but none is established as a universal cause of blank screenshots. See Find and fix problems with the Issues panel.

Follow an affected-resource link to the relevant request or page element.
Check the Network panel for its status, response, and timing.
Use the Console for script errors that may prevent rendering.
Fix the underlying site or access problem, then reload and capture again.

4. Check CDP capture parameters in automation

If the page looks correct in Chrome but a CDP-generated image is blank or cropped, verify the method, capture extent, clip coordinates, and returned image data. The protocol method is Page.captureScreenshot; its captureBeyondViewport parameter defaults to false. See the Chrome DevTools Protocol Page reference.

Parameter or check	What to inspect
`captureBeyondViewport`	Set it to `true` when your capture needs pixels beyond the viewport, and confirm your client actually sends the option.
`clip`	Check `x`, `y`, `width`, `height`, and scale against the intended document region. A clip outside the rendered content can produce an empty or unexpected region.
Page dimensions	Compare the intended document dimensions with the requested screenshot region. Chromium’s protocol tests exercise beyond-viewport capture and page dimensions, making geometry worth checking when output is cropped.
Response data	The protocol returns image data as a base64-encoded string. Decode that data using the correct image format and write the bytes without text conversion.

CDP exposes additional screenshot options such as format, quality for JPEG, fromSurface, and optimizeForSpeed. Check the protocol reference for the Chrome version you use, since the current reference can change. Do not assume an optional field is supported or behaves identically across versions.

Runnable CDP example with Node.js

This example uses the chrome-remote-interface package to connect to an existing Chrome instance with remote debugging enabled. Install it with npm install chrome-remote-interface, start Chrome with remote debugging enabled in your own environment, then set CDP_URL to the page URL. It navigates, waits briefly for rendering, requests a full-size capture beyond the viewport, and writes the decoded PNG bytes.

const CDP = require('chrome-remote-interface');

(async () => {
  const targetUrl = process.env.CDP_URL;
  if (!targetUrl) throw new Error('Set CDP_URL to the page URL');

  const client = await CDP();
  const { Page, Runtime } = client;
  try {
    await Page.enable();
    await Page.navigate({ url: targetUrl });
    await Page.loadEventFired();
    await new Promise(resolve => setTimeout(resolve, 500));

    const result = await Page.captureScreenshot({
      format: 'png',
      captureBeyondViewport: true
    });
    require('fs').writeFileSync('page.png', Buffer.from(result.data, 'base64'));
    console.log('Saved page.png');
  } finally {
    await client.close();
  }
})().catch(error => {
  console.error(error);
  process.exitCode = 1;
});

The short delay is only an example, not a guarantee that a page is ready. For a page with asynchronous rendering, wait for a meaningful selector or application-specific ready signal before capturing. If you add a clip, calculate it from the desired page region and validate it against the page dimensions. The screenshot API’s exact behavior and available fields are described in the CDP Page protocol reference.

5. Diagnose by the shape of the failure

What you see	Likely branch to investigate	Next action
Only the visible screen is present	Viewport capture mode	Use DevTools’ Capture a full size screenshot command.
The page itself appears blank during load	Navigation, rendering, or missing resources	Compare Network panel frames, requests, Issues, and Console output.
The page looks right, but automated output is blank or cropped	CDP parameters or decoding	Inspect `captureBeyondViewport`, `clip`, and base64 decoding.
Only the lower part is blank	Load timing, content dimensions, or requested region	Compare loading frames and verify the page dimensions and clip region.

A single older community report describes a blank lower section, but it is anecdotal and does not establish prevalence or root cause. Chromium tests show that full-page capture behavior accounts for page dimensions; that makes geometry a sensible check, not a diagnosis by itself. See the Chromium DevTools protocol browser tests.

Common errors and fixes

Symptom or error	Cause to check	Fix
Image shows only the first screen	Viewport screenshot command was selected.	Choose Capture a full size screenshot in Device mode.
Blank frame appears before the page finishes loading	Capture happened before content rendered, or a required request is still pending or failed.	Inspect Network screenshots and requests; wait for the relevant content or fix the page resource issue.
Automation output is cropped	`captureBeyondViewport` is false, or the clip does not cover the intended region.	Enable beyond-viewport capture as appropriate and validate clip coordinates and dimensions.
Output file is corrupt or unreadable	Base64 image data was written as text or decoded incorrectly.	Decode the protocol’s base64 response to bytes and save it using the matching format extension.
Some site assets are missing	Stylesheet, script, image, or other resource is blocked or fails.	Follow the request in Network and inspect related Issues and Console messages; address the page or access configuration.
Fixed or lazy content differs from expectation	The page’s own loading and layout behavior may depend on scrolling or time.	Observe the page during load, wait for its content to appear, and compare the resulting dimensions before capture.

The available documentation does not establish one most-common cause. Use the observed symptom to choose the diagnostic branch instead of applying a browser-version-specific fix without evidence.

Performance, reliability, and cost considerations

Full-page captures can involve more page area and more content than viewport captures. In automation, waiting for a reliable page-ready condition improves consistency, while an unnecessarily long fixed delay wastes time and still may not catch every asynchronous page. Keep capture regions as small as the task allows, and avoid retrying blindly: first determine whether the page, resources, or capture parameters are failing.

DevTools is built into Chrome and is sufficient for manual troubleshooting; the documented workflow requires no paid screenshot service. CDP automation adds setup and maintenance around browser launch, navigation, readiness, parameter handling, and image decoding. The cited sources do not provide benchmarks, a failure rate, or a universal reliability comparison.

Or skip the browser setup

If you need a screenshot API instead of maintaining Chrome automation, ScreenshotNeo takes a screenshot with one GET request. Its API documentation covers the request 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}`);

Cookie banners are accepted and removed before capture, along with known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off.
Bot checks, blank pages, failed loads, timeouts, 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 AI agents and MCP clients.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan.

FAQ

Does a blank full-page screenshot prove Chrome is broken?

No. First establish whether the page was blank while loading, whether the viewport-only command was used, or whether automation requested the wrong region.

Is `captureBeyondViewport` enabled by default in CDP?

The protocol reference lists its default as false. Set and verify it when your automated capture needs content beyond the viewport.

Can the Issues panel identify the exact cause?

It can surface browser-detected resource and page issues, such as stylesheet, CORS, CSP, cookie, and mixed-content problems. You still need to connect an issue to the blank output through the affected resource and loading evidence.

Is there one fix for a blank lower section?

No universal fix is supported by the available evidence. Check loading frames, content dimensions, and any CDP clip before changing browser settings.