Chrome DevTools Screenshot: Complete Guide (2026)

Chrome DevTools includes a set of hidden screenshot commands that most users never discover. They're buried in the Command Menu and require several steps to access, but they're useful to know — especially if you're a developer who already has DevTools open.

This guide covers every DevTools screenshot option, when to use each one, and where DevTools falls short compared to dedicated tools.

How to Access DevTools Screenshot Commands

All screenshot commands live in the DevTools Command Menu. Here's how to get there:

1. Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) to open DevTools.
2. Press Ctrl+Shift+P (Cmd+Shift+P on Mac) to open the Command Menu.
3. Type "screenshot" — you'll see four options.

The four available commands are:

• Capture screenshot — captures the visible viewport
• Capture full size screenshot — captures the entire page
• Capture node screenshot — captures a specific DOM element
• Capture area screenshot — lets you select a rectangular area

Let's look at each one in detail.

1. Capture Screenshot (Visible Viewport)

This captures exactly what's visible in the browser viewport — equivalent to a regular screenshot but without browser chrome (toolbar, tabs, address bar).

When to use: Quick captures of the current view during debugging.

Steps:

1. Open DevTools → Command Menu (Ctrl+Shift+P).
2. Type "Capture screenshot" and press Enter.
3. A PNG is saved to your Downloads folder.

The captured area matches the viewport dimensions set in DevTools. If you have responsive design mode active, it captures at that simulated resolution.

2. Capture Full Size Screenshot

This renders the entire page at its full computed height and captures everything — including content below the fold.

When to use: Capturing complete pages that aren't too long or complex.

Steps:

1. Open DevTools → Command Menu (Ctrl+Shift+P).
2. Type "Capture full size screenshot" and press Enter.
3. Chrome renders the page at full height and saves a PNG.

Known Issues with Full Size Screenshots

This is where DevTools struggles. The "full size screenshot" command doesn't actually scroll through the page — it resizes the rendering viewport to the page's full computed height and takes a single snapshot. This causes several problems:

• Sticky headers repeat — position: fixed elements appear at every viewport interval throughout the image
• Lazy-loaded images are blank — images that load on scroll never get triggered
• Dynamic content is missing — infinite scroll, client-side rendered content, and deferred media don't load
• Very long pages may crash — Chrome has memory limits for rendering extremely tall pages
• CSS layouts can break — some designs don't handle extreme viewport heights gracefully

For reliable full-page capture, a scrolling screenshot extension that actually scrolls through the page produces much better results.

3. Capture Node Screenshot

This captures a specific HTML element — just that element, cropped precisely to its bounding box.

When to use: Capturing a specific component, widget, or section of a page.

Steps:

1. Open DevTools and navigate to the Elements panel.
2. Click the element inspector icon (top-left of DevTools) and select the element on the page.
3. Right-click the element in the Elements panel.
4. Choose "Capture node screenshot" from the context menu.
5. The element is saved as a PNG, cropped to its exact dimensions.

This is genuinely useful for developers who need to capture specific components for documentation or bug reports. No extension offers this level of precision for DOM elements.

4. Capture Area Screenshot

This lets you click and drag to select a rectangular area of the viewport to capture.

When to use: Capturing a specific visual region without needing to find its DOM element.

Steps:

1. Open DevTools → Command Menu (Ctrl+Shift+P).
2. Type "Capture area screenshot" and press Enter.
3. A crosshair appears — click and drag to select the area.
4. The selected region is saved as a PNG.

Note: this captures at the screen level within the viewport, similar to how a capture area tool works but without any editing capabilities.

Using Responsive Design Mode for Screenshots

DevTools' responsive design mode (Device Mode) is powerful for taking screenshots at specific resolutions:

1. Press Ctrl+Shift+M (Cmd+Shift+M) to toggle Device Mode.
2. Select a device preset or enter custom dimensions.
3. Use any of the screenshot commands above — they capture at the simulated resolution.

This is ideal for creating screenshots at mobile, tablet, and desktop breakpoints for design reviews or documentation.

DevTools Screenshot Keyboard Shortcut

There is no single keyboard shortcut for DevTools screenshots. The fastest sequence is:

1. F12 — open DevTools
2. Ctrl+Shift+P — open Command Menu
3. Type "sc" — usually enough to filter to screenshot commands
4. Enter — execute the selected command

That's four key actions minimum. Compare this to a custom extension shortcut that captures in a single keypress.

What DevTools Screenshots Cannot Do

When DevTools Screenshots Make Sense

Despite the limitations, DevTools screenshots are the right choice in specific situations:

• You're already debugging in DevTools and need a quick capture
• You need a specific DOM element captured with pixel-perfect precision
• You need responsive screenshots at exact device dimensions
• You can't install extensions (restricted corporate environment)
• You need a one-off screenshot and don't want to install anything

For everything else — especially regular full-page screenshots, annotated captures, or any workflow that involves editing — a dedicated screenshot tool is faster and more reliable.

Summary

Chrome DevTools screenshots are a useful developer tool, but they're not designed for general screenshot needs. The full-page capture has fundamental limitations with sticky elements and lazy-loaded content, there are no editing tools, and the multi-step workflow is slow for repeated use. Know the commands for when you need them, but don't rely on DevTools as your primary screenshot solution.