ScreenshotNeo

BlogHow-to

How to Use Chrome DevTools to Capture a Full-Page Screenshot for a Report

Capture an entire webpage in Chrome DevTools, check that it is report-ready, and learn when an automated screenshot is a better fit.

By the ScreenshotNeo team4 October 20265 min read

To capture a webpage from top to bottom in Chrome, open DevTools, turn on Device Mode, then choose More options > Capture a full size screenshot in the device toolbar. This captures content beyond the visible viewport. The separate Capture screenshot command captures only what is currently visible. Chrome’s Device Mode guide documents both actions.

Capture the full page in Chrome DevTools

  1. Open the webpage you need for your report in Chrome. Let it load, and make sure the page is in the state you intend to document.
  2. Open DevTools. You can use Chrome’s menu or your platform’s DevTools shortcut.
  3. In the DevTools action bar, click Toggle device toolbar to turn on Device Mode. The page will appear in the device toolbar’s emulated viewport.
  4. Open More options in the device toolbar.
  5. Select Capture a full size screenshot. Chrome saves an image of the full page, including content outside the visible viewport.
  6. Open the saved image and check that the relevant content is present and legible at the size you plan to use in the report.

The menu choice matters: Capture a full size screenshot is for the whole page; Capture screenshot is for the current viewport. If your report needs only the visible screen, use the latter.

Choose the right screenshot scope

Chrome documents several DevTools screenshot approaches. Choose based on what the report needs:

Report need Approach
The entire page, including below the fold Device Mode > More options > Capture a full size screenshot
Only the currently visible content Device Mode > More options > Capture screenshot
A selected region Use the Command Menu’s Capture area screenshot command
A particular page element or an element larger than the screen Use the node screenshot options described in Chrome’s screenshot guide
A mobile presentation or device frame Use Device Mode and the device-specific screenshot workflow

See Chrome’s screenshot guide for the other documented techniques, including node, oversized-node, area, and mobile screenshots. Chrome’s Device Mode documentation says to enable Show device frame before capturing when you want a device frame in device-specific mode. It does not establish that the frame is included in a full-size capture, so inspect the output if the frame matters to your report.

Use the Command Menu for an area screenshot

For a selected region rather than the whole page, open the Command Menu with Control+Shift+P on Windows or Linux, or Command+Shift+P on Mac. Type screenshot, choose Capture area screenshot, then drag over the page to select the area. Chrome notes that area capture does not work when DevTools is undocked. This is a separate workflow; use the Device Mode menu for the documented full-size capture.

Make the capture useful in a report

  • Check page state. Confirm that the page shows the content and state the report is meant to document before capturing.
  • Review the complete image. Check the top, middle, and bottom for missing or unexpectedly blank sections.
  • Check legibility at the final display size. A full-page image can be tall and may become difficult to read when reduced to fit a report page. Crop or use a more focused capture if the report only needs a section.
  • Keep the original capture. If you later crop or resize the image for layout, retain the original so you can revisit details.
  • Use the right scope. A viewport, area, or element capture can communicate a focused finding more clearly than a very long page image.

These are practical review steps, not guarantees about how Chrome or a report editor will lay out the image.

Troubleshooting

Symptom Likely cause What to do
The screenshot shows only the visible part of the page You selected Capture screenshot, which captures the viewport. Turn on Device Mode, open its More options menu, and select Capture a full size screenshot.
You cannot find the full-size command The device toolbar is not enabled, or you opened a different menu. Click Toggle device toolbar in the DevTools action bar, then open More options in the device toolbar.
Area capture does not work DevTools is undocked. Dock DevTools to the browser window and repeat the Command Menu area-capture steps.
The full-page image is difficult to read in the report The entire page has been scaled down to fit the available space. Use a larger report area, split the evidence across focused captures, or capture the relevant node or region.
A device frame is missing The frame option may not have been enabled, or the chosen full-size workflow may not include it. For a device-specific screenshot, enable Show device frame before capturing. Check the resulting image rather than assuming the full-size option includes the frame.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. A single GET request can return a screenshot or PDF; its full-page capture also loads lazy images. See the ScreenshotNeo API documentation for options and setup.

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}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

Before capture, ScreenshotNeo accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, and failed loads are never billed. Responses identify the page verdict and billing status in headers. Its MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

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

FAQ

Does a full-size screenshot include content below the fold?

Yes. Chrome describes the full-size action as capturing the whole page, including content that is not visible in the viewport.

Is the Command Menu shortcut the way to take a full-page screenshot?

The documented Command Menu workflow is for area capture. For a full-page image, use Device Mode’s More options menu.

Can I capture just one element instead?

Yes. Chrome’s screenshot guide covers capturing a node, including a node larger than the screen. Use that approach when the report concerns a specific element.

Can I use this workflow for a mobile screenshot?

Device Mode supports device-specific screenshot workflows. Enable Show device frame first if you need a frame, and review the resulting image to confirm it meets the report’s needs.