How to Capture a Full-Page Screenshot in Chrome DevTools on Mac

To capture an entire webpage in Chrome on a Mac, open DevTools, turn on the Device Toolbar, then choose More options → Capture a full size screenshot. This captures page content outside the visible browser viewport, including the part below the fold.

Capture the whole page in Chrome DevTools

1. Open the page you want to capture in Chrome.
2. Open DevTools. For DOM and CSS inspection, Chrome documents Command+Option+C. You can also open the Console with Command+Option+J, then switch to the other DevTools panels.
3. In DevTools, click Toggle device toolbar in the action bar. The toolbar’s Dimensions setting defaults to Responsive.
4. In the Device Toolbar, open More options.
5. Select Capture a full size screenshot.

Chrome generates the screenshot. Its exact file name, format, and save location are not specified in the cited Chrome instructions, so check Chrome’s download location or the download indicator for your setup.

For the official walkthrough and current interface details, see Chrome’s Device Mode documentation and DevTools overview.

Choose the screenshot option that matches the framing

Option	Where to find it	What it captures
Capture a full size screenshot	Device Toolbar → More options	The whole page, including content outside the viewport.
Capture screenshot	Device Toolbar → More options	The currently visible viewport.
Capture area screenshot	DevTools Command Menu	A selected rectangle that you draw by dragging.

These actions produce different framing. Choose the full-size option when you need the page from top to bottom; the regular screenshot is not a substitute for a full-page capture.

Set the viewport before capturing

Use Responsive when you want to set a custom viewport, or select a device preset when you want to inspect a particular simulated screen size. Set the dimensions before capturing so the page lays out at the width you need. A narrower viewport can change wrapping, navigation, and page height, so a full-page image at a mobile width may look very different from one at a desktop width.

Device Mode approximates a mobile experience on your computer; it does not run the site on a physical phone. Check important mobile behavior on a real device when that distinction matters. See Chrome’s Device Mode documentation.

Capture a selected area instead

If you only need a particular region, open the Command Menu with Command+Shift+P, type Capture area screenshot, choose the command, and drag over the desired area. Chrome says area capture does not work while DevTools is undocked; dock DevTools first if the command is unavailable or fails. See the Chrome Command Menu documentation.

When the capture does not look right

Symptom	Likely cause	What to try
Only the visible screen is captured	You chose Capture screenshot, which captures the viewport.	Open Device Toolbar → More options and choose Capture a full size screenshot.
The full-size command is hard to find	The Device Toolbar is not enabled, or you opened the Command Menu instead.	Click Toggle device toolbar in DevTools, then open its More options menu.
The page is laid out at the wrong width	The toolbar is using a different responsive dimension or device preset than intended.	Set the desired width and height in Device Toolbar before capturing.
Area capture is unavailable	DevTools is undocked.	Dock DevTools and retry the Command Menu area capture.
Some page content is absent or incomplete	The page may render content dynamically or load it only after interaction or scrolling.	Wait for the page to finish rendering and for visible loading indicators to settle. If content appears only after interaction, perform that interaction before capturing. The documented full-size action captures the page beyond the viewport, but the cited instructions do not promise how every site’s dynamic content behaves.

Reliability, image size, and workflow notes

• Confirm the capture extent. A long page can create a tall image. Open the generated file and check both the top and bottom before sharing or using it in a visual review.
• Choose a representative width. Responsive layout changes can alter page structure and total height. Record or reuse the same viewport when comparing captures.
• Account for dynamic pages. Animations, delayed content, and interactive widgets can make two captures differ. Let the page settle and repeat the same setup for reproducible comparisons.
• Consider sensitive content. Before sharing an image, inspect it for account details, tokens, private data, or other content visible on the page.
• Keep expectations version-aware. Chrome’s menu labels can change. If the steps do not match your build, consult the current official Device Mode documentation.

DevTools is a built-in, manual workflow and does not require a screenshot API. Its practical cost is the time to open the page, set the viewport, capture, and review the result. The cited Chrome docs do not specify capture-time guarantees, output format, or file-size limits.

Or skip the browser setup

If you need repeatable captures from code, ScreenshotNeo is a website screenshot API and MCP server. One GET request can return an image or PDF, and the API accepts common screenshot parameter names to make switching easier. See the ScreenshotNeo API documentation.

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

Replace the example URL with the page you want to capture. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, failed loads, timeouts, and cache hits are never billed. Its MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Sign up free for 1,000 screenshots a month, with no card.

FAQ

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

Yes. Choose Capture a full size screenshot in Device Toolbar → More options; it captures the whole page rather than just the visible viewport.

Do I need to select a phone to capture a mobile page?

No. Responsive dimensions are available by default. You can set a custom viewport or choose a preset, but Device Mode remains a desktop simulation rather than a physical-device test.

Is area capture the same as full-page capture?

No. Area capture is a manually selected rectangle. Use the full-size screenshot command to capture the page beyond the viewport.

Where does Chrome save the screenshot?

The cited Chrome instructions do not specify a universal file name, format, or destination. Check Chrome’s download location and the download indicator for your configuration.