How to Capture a Full-Page Screenshot in Chrome with a Custom Viewport

To capture a full-page screenshot at a custom viewport size in Chrome, open DevTools, turn on the device toolbar, set the Responsive viewport width and height, then open the toolbar’s More options menu and choose Capture a full size screenshot. This captures page content beyond the visible viewport. The separate Capture screenshot command captures only what is currently visible.

Capture a full page at a custom viewport size

Open the page you want to capture in Chrome.
Open DevTools. For example, use the browser menu under More tools and choose Developer tools.
Click Toggle device toolbar in DevTools. Device Mode appears above the page.
In the device toolbar’s Dimensions control, choose Responsive if it is not already selected.
Enter the desired viewport width and height, or drag the viewport handles to resize it. The dimensions control describes the simulated viewport in CSS pixels.
Open the device toolbar’s More options menu.
Choose Capture a full size screenshot. Chrome saves an image of the complete page, including content outside the visible viewport.

Chrome’s Device Mode documentation describes this as capturing the whole page, including content not visible in the viewport. The command is documented in the [Chrome DevTools Device Mode guide](https://developer.chrome.com/docs/devtools/device-mode?authuser=01&hl=en).

Choose the right capture command

Command	What it captures	Use it when
Capture screenshot	The visible viewport	You need a snapshot of the current screen area.
Capture a full size screenshot	The full page, including content beyond the viewport	You need a long, top-to-bottom page image.

Both commands are in the device toolbar’s More options menu. Set the viewport dimensions before choosing either command. The full-size command affects the capture’s page coverage; the custom width and height set the simulated viewport used to render the page.

Save a reusable custom device

If you repeatedly use the same dimensions and device settings, save a custom device profile instead of entering them each time:

Open Device Mode’s device list.
Choose Edit to manage device configurations.
Add a custom device and give it a name and the desired width and height.
Optionally set a device pixel ratio, user-agent string, and device type.
Select the saved device in the toolbar when you need that configuration again.

The profile makes a viewport setup reusable. It does not change the fact that Device Mode runs the page on your desktop or laptop.

Understand what the viewport setting means

A viewport is the browser’s layout area for the page. Changing its width can change responsive breakpoints, navigation, columns, and image sizes. Height controls the simulated visible area; a full-size capture extends beyond it to include the page content. For a consistent comparison, keep the viewport width and other device settings the same between captures.

Device Mode simulates a device experience on a desktop or laptop. Chrome calls it a first-order approximation: the page code runs on the computer, not on a physical phone. Use it to inspect responsive layouts, but do not treat its screenshot as proof of how a real device renders the page or how quickly it performs there. See [Chrome’s Device Mode documentation](https://developer.chrome.com/docs/devtools/device-mode?authuser=01&hl=en).

Troubleshooting

The image shows only the visible area

You likely chose Capture screenshot. Open More options and choose Capture a full size screenshot instead.

The dimensions are not editable

Check that the device toolbar is enabled and that the Dimensions control is set to Responsive. You can enter dimensions there or resize by dragging the viewport handles.

The page layout does not match the intended device

Confirm the width and height, then check any custom device pixel ratio, user-agent string, or device type. Device Mode is still a desktop simulation, so verify behavior on a physical device when actual mobile rendering matters.

Some page content is missing from the screenshot

Confirm you used the full-size command. If content is loaded only after scrolling or interaction, the capture may reflect the page state available to Chrome at capture time; check that the content has appeared before taking the screenshot.

The capture is unusually large

A full-page image can be much taller than the viewport. For a layout check, use the regular viewport capture; use full-size only when you need the entire page in one image.

Performance, repeatability, and cost

Chrome’s built-in workflow requires no screenshot API request or service plan: it uses DevTools controls in the browser. A full-page capture contains more page area than a viewport capture, so very long pages can produce large image files. For repeatability, save a custom device profile and keep its dimensions and optional device settings consistent.

For automated, repeatable captures across many URLs, a screenshot API can replace manual browser steps. ScreenshotNeo is a website screenshot API and MCP server from [ScreenshotNeo](https://screenshotneo.com). Its API can return PNG, JPEG, WebP, or PDF, and it supports custom viewports, full-page capture, and other capture options. See the [ScreenshotNeo API documentation](https://screenshotneo.com/docs/) for parameter details.

Or skip the browser setup

Make one GET request with the target URL and your access key. This example requests a full-page WebP image at a custom viewport size:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -d full_page=true \
  -d width=1440 \
  -d height=900 \
  -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",
        "full_page": "true",
        "width": 1440,
        "height": 900,
    },
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  full_page: 'true',
  width: '1440',
  height: '900',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

ScreenshotNeo also accepts the common parameter names used by other screenshot APIs, which can make switching easier. It removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its 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 without a card; paid plans start at $5 for 3,000.

FAQ

Can I capture a full page at a width that differs from my monitor?

Yes. Enable Device Mode, select Responsive, and enter the desired width and height before capturing.

Can I reuse a custom viewport?

Yes. Create a custom device with a name and dimensions; pixel ratio, user agent, and device type are optional settings.

Does a Chrome Device Mode screenshot prove how a phone will display the page?

No. It is a desktop simulation and an approximation. Check on a physical device when actual device behavior is important.

Which command should I use for a screenshot of just the screen?

Choose Capture screenshot. For the whole page beyond the visible viewport, choose Capture a full size screenshot.