How to Take Screenshots in Google Chrome on Mac

Why Chrome screenshots are different from regular Mac screenshots

The native macOS screenshot tools (Cmd+Shift+3, 4, or 5) capture pixels on your display. That works fine for what's visible, but Chrome has content and capabilities that macOS can't see: pages that scroll far below the fold, individual DOM elements, and responsive viewports simulating phone screens.

Chrome DevTools has built-in screenshot commands that capture rendered content directly from the browser engine. No extension needed, no file size limits, and full control over what you capture. This guide covers every method: DevTools commands, the best extensions, native macOS shortcuts, and when to use each one.

Method 1: Chrome DevTools screenshot commands

DevTools has four screenshot commands hidden in its Command Menu. They're the most powerful option and require zero installation.

Open the Command Menu

1. Open DevTools: press Cmd+Option+I (or right-click anywhere on the page and choose Inspect).
2. Open the Command Menu: press Cmd+Shift+P.
3. Type screenshot. You'll see four options.

Capture full size screenshot

Captures the entire page from top to bottom, including everything below the fold. Chrome scrolls through the page internally and stitches the result into a single PNG. The output can be thousands of pixels tall for long pages.

This is the command you want for capturing an entire blog post, documentation page, long email, or Terms of Service page without manually scrolling and stitching.

Capture screenshot

Captures only the current viewport — exactly what you see in the browser window. Equivalent to a macOS screenshot of the browser content area, but without the browser chrome (tabs, address bar, bookmarks bar).

Capture node screenshot

Captures a single HTML element. Before running this command, select the element you want:

1. Press Cmd+Shift+C to activate the element selector.
2. Click the element on the page. It highlights in the Elements panel.
3. Open the Command Menu (Cmd+Shift+P) and run Capture node screenshot.

Chrome saves a tightly cropped PNG of just that element. This is invaluable for capturing a specific card component, a navigation bar, a modal dialog, or a chart — without any surrounding page content.

Capture area screenshot

Turns your cursor into a crosshair so you can drag a rectangle over any part of the page. Similar to Cmd+Shift+4 on macOS, but constrained to the page content (no browser UI captured).

Where do DevTools screenshots go?

Chrome saves all DevTools screenshots to your default Downloads folder (~/Downloads) as PNG files. The filename follows the pattern: the page title plus the viewport dimensions, e.g., lazyscreenshots.com (1440 x 900).png.

Method 2: Responsive mode screenshots

Chrome can simulate any device viewport, which is critical for capturing how your site looks on phones and tablets without needing the physical hardware.

1. Open DevTools (Cmd+Option+I).
2. Toggle Device Toolbar: press Cmd+Shift+M or click the device icon in the DevTools toolbar.
3. Select a device preset from the dropdown (iPhone 15 Pro, iPad Air, Pixel 8, Samsung Galaxy S24, etc.) or enter custom dimensions.
4. Optionally set device pixel ratio (DPR) in the menu — choose 2x or 3x to match Retina screens for pixel-accurate captures.
5. Open the Command Menu (Cmd+Shift+P) and run any of the four screenshot commands.

The screenshot respects the simulated viewport, DPR, and user agent. If your site serves different layouts based on screen size or user agent, the screenshot reflects exactly what that device would see.

Tip: capture all breakpoints at once

If you need screenshots at multiple breakpoints (mobile, tablet, desktop), set up each viewport size and capture them in sequence. For repeated testing, you can save custom device presets in Chrome's device list so they're one click away.

Method 3: Chrome extensions for screenshots

Extensions add convenience features that DevTools doesn't have: annotation tools, cloud uploads, and one-click capture without opening DevTools.

When to use an extension vs. DevTools

Use DevTools when you need element-level captures, responsive viewport simulation, or want to avoid installing anything. Use an extension when you need quick one-click captures with immediate annotation, or when you're sharing screenshots frequently and want built-in upload links.

Method 4: Native macOS screenshots of Chrome

Sometimes the simplest approach is the best. macOS screenshot shortcuts work in Chrome just like any other app.

The window capture (Cmd+Shift+4 then Space) is especially useful — it captures the Chrome window with a clean drop shadow and no background clutter. Hold Option while clicking to remove the shadow.

Native vs. DevTools: when to use each

Use native macOS screenshots when: you need to include the browser chrome (tabs, URL bar) for context, you're capturing a quick reference of what's on screen, or you need to grab something that isn't web content (like a Chrome dialog or settings page).

Use DevTools screenshots when: you need content below the fold, a specific DOM element, a responsive viewport simulation, or a clean capture without browser UI.

Capture Chrome screenshots via the command line

Chrome's headless mode can capture screenshots from Terminal without opening a visible browser window. This is useful for automated documentation, CI pipelines, and batch captures.

# Capture a full-page screenshot at 1440x900
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --headless --screenshot="$HOME/Desktop/capture.png" \
  --window-size=1440,900 \
  "https://example.com"

By default this captures only the viewport. For a full-page capture, add the --screenshot flag along with --run-all-compositor-stages-before-draw to ensure all content is rendered before capture.

Batch capture multiple URLs

# Capture screenshots of multiple pages
urls=(
  "https://example.com"
  "https://example.com/about"
  "https://example.com/pricing"
)
for url in "${urls[@]}"; do
  slug=$(echo "$url" | sed 's|https://||;s|/|-|g;s|-$||')
  /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
    --headless --screenshot="$HOME/Desktop/${slug}.png" \
    --window-size=1440,900 "$url"
done

This produces files like example.com.png, example.com-about.png, and example.com-pricing.png on your Desktop.

Tips for better Chrome screenshots

Hide browser extensions from screenshots

Extension icons in the toolbar can clutter window-level screenshots. Click the puzzle piece icon in Chrome's toolbar and unpin extensions you don't need visible. Or use DevTools' viewport capture, which excludes browser UI entirely.

Capture at Retina resolution

If you're on a Retina Mac, DevTools screenshots capture at your display's native DPR (2x by default). The resulting images are double the viewport dimensions — a 1440×900 viewport produces a 2880×1800 image. To capture at 1x instead, set the DPR in Chrome's responsive mode to 1.

Avoid lazy-loaded content gaps

Full-page screenshots can miss images that haven't loaded yet because of lazy loading. Before capturing, scroll to the bottom of the page first so all images load, then scroll back to the top and take the full-page screenshot. DevTools handles this automatically in most cases, but very long pages with aggressive lazy loading may still have gaps.

Capture a specific tab

macOS window capture (Cmd+Shift+4 then Space) captures the entire Chrome window including all visible tabs. If you only want the content of one tab, use a DevTools viewport capture instead, or maximize the tab so it fills the entire window.

Quick reference: every Chrome screenshot method