Chrome how-to · Published October 16, 2026 · 7 min read

Chrome DevTools' Hidden Full-Page Screenshot Command (and When to Automate It)

Quick answer

Chrome can take a full-page screenshot without any extension. Open DevTools (F12), press Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows, type screenshot and choose Capture full size screenshot. Chrome saves the entire scrollable page as a PNG.

The command has been in Chrome for years, yet many people still install an extension for it. Below are all four built-in screenshot commands, what each one is good for, the cases where the result comes out wrong, and how to get the same image from a script when you need it more than once. Command names and behavior were checked against the current Chrome DevTools source code.

The shortcut card

Action	macOS	Windows / Linux
Open DevTools	`Cmd`+`Option`+`I` or `F12`	`Ctrl`+`Shift`+`I` or `F12`
Open the Command Menu	`Cmd`+`Shift`+`P`	`Ctrl`+`Shift`+`P`
Toggle device toolbar	`Cmd`+`Shift`+`M`	`Ctrl`+`Shift`+`M`
Find the commands	Type `screenshot` in the Command Menu

Full-page screenshot, step by step

Load the page and scroll to the bottom once. This makes lazy-loaded images and sections render before the capture. Scroll back to the top afterwards.
Open DevTools. F12 works on every desktop platform.
Open the Command Menu. Cmd+Shift+P or Ctrl+Shift+P, with focus inside DevTools.
Type "screenshot" and pick "Capture full size screenshot". Chrome renders the whole document and downloads a PNG.
Check the result. If parts are missing, the page probably scrolls inside a container. See What it gets wrong.

All 4 screenshot commands

Capture full size screenshotThe whole scrollable document, including what is below the fold.

Capture screenshotOnly the visible viewport, exactly what is on screen.

Capture node screenshotOne DOM element: the node selected in the Elements panel.

Capture area screenshotA rectangle you draw over the page with the mouse.

The node screenshot is also in the Elements panel context menu: right-click any element and choose Capture node screenshot. It is the fastest way to grab a single card, chart or button for a bug report without cropping. To do the same from code, see the element screenshot API guide.

Mobile screenshots from the device toolbar

Turn on the device toolbar (Cmd/Ctrl+Shift+M), pick a device such as an iPhone or Pixel, then open the toolbar's More options menu (the three dots above the page, not Chrome's main menu). It contains Capture screenshot and Capture full size screenshot.

In device mode Chrome applies the device's width, height and pixel ratio before capturing, so a phone with a 3x pixel ratio produces a large, sharp image. The device name is added to the file name, which keeps a set of mobile and desktop captures apart.

Where the file goes

The PNG is handled like a normal download: your default downloads folder, or a save dialog if Chrome is set to ask where to save each file.
The file name is built from the page URL. In device mode, the device name is appended in parentheses.
Recent DevTools builds also copy the screenshot to the clipboard, so check whether you can paste it straight into Slack or a ticket before hunting for the file.

What it gets wrong (and the fix)

Under the hood, the full-size command calls the same Chrome DevTools Protocol method that Puppeteer uses, Page.captureScreenshot with captureBeyondViewport: true. So it inherits the same blind spots:

Problem	Why	Manual fix
Only one screen of a dashboard or web app	The app scrolls inside a container, not the document	In the Styles pane, set `height: auto; overflow: visible` on the scroll container, then capture
Grey boxes instead of images lower down	Lazy loading never triggered	Scroll to the bottom before capturing
Sticky header or chat bubble in a strange place	Fixed elements are drawn once at their current position	Hide them with `display: none` in the Styles pane
Cookie banner covers the content	It is part of the page	Dismiss it, or delete the node in Elements
Very long pages come out cut or broken	Browsers limit how large a single captured image can be	Capture sections with Capture area screenshot

The same in Firefox and Edge

Browser	Full-page screenshot
Edge, Brave, Opera	Same DevTools Command Menu as Chrome
Firefox (DevTools)	Web Console command `:screenshot --fullpage`; add `--selector` for one element or `--clipboard` to copy it
Firefox (Inspector)	Right-click a node, Screenshot Node

Firefox's :screenshot command also takes --delay, which helps when you need a hover menu or tooltip open during the capture.

When to automate it

DevTools is perfect for one screenshot. It stops being practical when you need the same capture every day, for 50 URLs, at three screen sizes, or as part of a product feature. These are the equivalents in code:

headless chrome

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \ --headless --screenshot=page.png --window-size=1440,900 https://example.com

Chrome's CLI flag captures the window size only, not the full page.

puppeteer

await page.goto("https://example.com", { waitUntil: "networkidle2" }); await page.screenshot({ path: "page.png", fullPage: true });

screenshot api

curl --get "https://api.snapshotflow.com/screenshot" \ -H "X-Api-Key: $SNAPSHOTFLOW_API_KEY" \ --data-urlencode "url=https://example.com" \ --data-urlencode "full_page=true" \ --data-urlencode "block_cookie_banners=true" \ --data-urlencode "styles=main{height:auto!important;overflow:visible!important}" \ -o page.png

The API version applies the manual fixes from the table above as parameters: it waits for the network to settle, blocks the banner and lets you inject the CSS that removes an inner scroll. Our Puppeteer troubleshooting guide covers the code-side fixes in detail, and the full page screenshot API guide covers the API side.

Takeaways

No extension needed: Command Menu, type screenshot, pick one of four commands.
Right-click a node in Elements for a clean element screenshot.
Use the device toolbar's menu for mobile captures at the device's pixel ratio.
Inner scroll containers, lazy images and banners need a manual fix or an automated capture.

Sources

Chrome DevTools frontend source (screenshot actions in the emulation and elements panels)
Chrome DevTools Protocol: Page.captureScreenshot
Firefox DevTools: Taking screenshots

FAQ

How do I take a full-page screenshot in Chrome without an extension?

Open DevTools, press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux), type screenshot and choose Capture full size screenshot. Chrome saves the whole page as a PNG.

Where does Chrome save DevTools screenshots?

Like any download: in your default downloads folder, or Chrome asks for a location if you enabled that in download settings. The file name is based on the page URL, plus the device name when device mode is on.

Can I screenshot a single element in Chrome?

Yes. Right-click the element in the Elements panel and choose Capture node screenshot, or select it and run the same command from the Command Menu.

Why is part of my full-size screenshot empty or cut off?

The command captures the document. Content inside an element with its own scrollbar is not expanded, and lazy-loaded images that were never scrolled into view may be blank. Scroll the page first, or automate the capture with CSS that removes the inner scroll.

Does the DevTools screenshot work in Edge and Brave?

Yes. Edge, Brave, Opera and other Chromium browsers ship the same DevTools, including the Command Menu screenshot commands.

The same capture, without opening DevTools

Paste a URL in the playground and get a full-page PNG or WebP with JavaScript rendered and cookie banners hidden. Then run the same request from cURL, Node or Python. The free tier gives you 300 screenshots, no credit card required.

Create free account Try the playground Read API docs