ScreenshotNeo

BlogHow-to

How to Capture a Full-Page Screenshot in Chrome on macOS

Capture an entire webpage in Chrome on macOS with DevTools, including content below the viewport. Learn when to use node capture and how to automate screenshots.

By the ScreenshotNeo team4 October 20266 min read

To capture a full-page screenshot in Chrome on macOS, open DevTools, turn on the Device Toolbar, then choose More options → Capture a full size screenshot. Chrome captures the whole page, including content outside the visible viewport. [Chrome DevTools device mode documentation]

Capture the whole page in Chrome

  1. Open the webpage you want to capture in Chrome.
  2. Open DevTools with Option+Command+I, or use Chrome’s menu: View → Developer → Developer Tools. The keyboard shortcut can vary if you have customized Chrome shortcuts.
  3. In DevTools, click Toggle device toolbar. If you do not see it, open the DevTools More options menu and find the device toolbar command.
  4. In the Device Toolbar, open More options and select Capture a full size screenshot.
  5. Check the resulting image and save or move it where you need it. Chrome’s documentation describes the capture command, but does not guarantee the same save location across Chrome builds.

The ordinary Capture screenshot command captures the visible viewport. Use Capture a full size screenshot when you need content below the fold too. [Chrome documentation]

Choose the right capture scope

What you need Chrome command How to reach it
The complete page, including below the viewport Capture a full size screenshot Device Toolbar → More options
Only what is currently visible Capture screenshot Device Toolbar capture menu
One selected DOM element, potentially including its off-screen content Capture node screenshot Select the node in Elements, then invoke the node screenshot command

Use Capture node screenshot when you want a particular element rather than the full document. Chrome 89 release notes describe node screenshots that include the whole node, including content below the viewport. [Chrome 89 DevTools release notes]

On macOS, press Command+Shift+P while DevTools is open to open the Command Menu. Type a command name and choose a matching action. This is useful for finding DevTools commands, but Chrome’s documented full-page procedure is the Device Toolbar’s More options → Capture a full size screenshot menu. If the Command Menu does not surface the full-page action in your Chrome version, use the documented menu path above. [Chrome Command Menu documentation]

Capture options and practical edge cases

  • Full page versus viewport: A full-size capture includes content outside the current viewport; a regular screenshot is limited to what is visible.
  • Full page versus element: The full-size command captures the page. For one component or image, select that DOM node and use Capture node screenshot.
  • Page state matters: The capture reflects the page as it is rendered at the time you invoke it. If content is still loading, wait for it first. For pages that load images or sections only as you scroll, inspect the result and confirm the expected content appeared.
  • Device Toolbar state: The toolbar can emulate a viewport and device dimensions. Make sure the page is laid out at the size you intend before capturing.
  • Save location: The cited Chrome documentation does not specify an invariant file location. Check Chrome’s download behavior and the saved file after capture instead of assuming a particular folder.
  • Version differences: DevTools menus can change. If labels differ, update Chrome or consult the current device mode documentation.

Automate captures with a screenshot API

DevTools is convenient for a one-off image. For repeatable captures in scripts, services, or build workflows, an API avoids opening the browser UI for each page. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. It accepts a URL in one GET request and returns an image or PDF; its documented options include full-page capture, viewport sizing, output format, and waiting for a selector or network idle. See the ScreenshotNeo API documentation.

cURL

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

Node.js

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 Bun.write('shot.webp', res);

The cURL, Python, and Node.js examples use the required request shape. Replace the target URL with the page you want. Store the API key in an environment variable or secret manager in production; do not publish it in client-side code or commit it to a repository. For the complete parameter list and response details, use the API docs.

Or skip the browser setup

Make one request with ScreenshotNeo to capture a page. Cookie and consent banners are accepted like a visitor, then 60+ known consent platforms, newsletter popups, and chat widgets can be removed before the shot; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Learn more at ScreenshotNeo and see the API documentation. Create a free account for 1,000 screenshots a month, with no card.

Troubleshooting

Symptom Likely cause What to do
You only got the visible area You chose the regular screenshot command. Use Device Toolbar → More options → Capture a full size screenshot.
You cannot find the full-size command The Device Toolbar is not enabled, or the DevTools menu layout differs. Enable the Device Toolbar, then open its More options menu. Check the current Chrome device mode documentation if the label differs.
You captured the wrong content The page was still loading or had not reached the desired state. Wait for the page content you need to appear, then capture again. For a specific element, select it in Elements and use Capture node screenshot.
The output is a node or component rather than the whole document You used node capture. Use the full-size capture command from the Device Toolbar for the full page.
You cannot locate the image afterward Chrome’s save behavior or download location differs from your expectation. Check Chrome’s download list and configured download folder; the cited documentation does not guarantee a fixed location.

Performance, reliability, and cost

For a single manual capture, DevTools requires no API setup and has no per-request service charge. Very long pages produce larger images and may take longer to render and save. Page content can vary with viewport size, loading state, and dynamic behavior, so capture at a deliberate viewport and confirm the output contains the sections you need.

For recurring or high-volume capture, an API can make requests repeatable and scriptable, but it introduces credentials, network requests, and plan limits. ScreenshotNeo lists a free allowance of 1,000 shots per month and paid plans from $5 for 3,000; yearly billing gives two months free. Its plans include the listed features. Only clean shots are billed, and response headers report verdict and billing status. Consult the current docs for options and operational details.

FAQ

Does Chrome’s full-page capture include content below the fold?

Yes. The command is specifically for capturing the whole page, including content outside the viewport. [Chrome device mode documentation]

Can I capture only one element?

Yes. Select it in Elements and use Capture node screenshot. Chrome’s release notes describe capture of the full node, including off-screen content. [Chrome 89 release notes]

Is Command+Shift+P the full-page screenshot shortcut?

It opens DevTools’ Command Menu on macOS. The documented full-page capture path is the Device Toolbar’s More options menu, so use that path when searching the Command Menu does not show the action. [Chrome Command Menu documentation]

What image format does the API return?

ScreenshotNeo supports PNG, JPEG, and WebP screenshots, as well as PDF output. Check the API docs for the format parameter and response behavior.