The quickest way to screenshot a whole long page in Chrome needs no extension: open DevTools with F12, press Ctrl + Shift + P (Cmd + Shift + P on a Mac), type “screenshot” and pick the full size option. Chrome saves one tall PNG of the entire page. For many pages, or for CI, a script does the same with one option. When the result comes out cut off, blank or with repeated headers, the cause is almost always lazy loading, a height limit or a fixed element, and each has a fix below.
Method 1: DevTools, no install
- Open the page and wait until it has fully loaded.
- Press
F12to open DevTools. - Open the Command Menu with
Ctrl + Shift + P(Cmd + Shift + Pon a Mac) and type “screenshot”. - Choose Capture full size screenshot. Chrome downloads a PNG.
The same Command Menu has commands for the visible area and for a selected element. Chrome’s documentation confirms the menu opens with these shortcuts and lists a “Capture area screenshot” command, and the Chrome DevTools tips on screenshots cover capturing a full page, a node and an area.
Method 2: full-page screenshot at phone width
Pick a device in the preview above to check the layout first. To capture the whole page the way a phone renders it, use device mode: toggle the device toolbar with Ctrl + Shift + M (Cmd + Shift + M on a Mac), choose a device, open the More options menu and select Capture full size screenshot. Chrome’s device mode documentation lists the same option, plus Show device frame for a screenshot with a phone outline. The step-by-step version, with pixel ratio and file naming tips, is in how to take a mobile screenshot of a website.
Method 3: a script, for many pages or CI
If you need the same capture for dozens of pages, script it. In Playwright it is one option:
await page.screenshot({ path: 'page.png', fullPage: true });Set the viewport first (for example { width: 390, height: 844 } for a phone-sized capture) and the script produces one image per page on every run. Playwright’s screenshots guide documents fullPage.
Why the screenshot is cut off, blank or repeated
These problems come from how a full-page capture works: the browser extends the viewport to the full height and renders once, without scrolling. A write-up on full-page screenshots in Puppeteer lists the causes and fixes, which apply to any Chrome-based capture:
- Lazy-loaded images stay as placeholders, because they load when scrolled into view and the capture never scrolls. Scroll the page to the bottom and back before capturing, and wait for the images to finish loading.
- Very tall pages are clipped. The author reports a default cap of 16,384 pixels in Puppeteer, and some setups allow up to 32,768. Past that, capture the page in sections and stitch them.
- Fixed and sticky elements repeat or sit in the wrong place. Switch them to
position: absoluteor hide them before capturing.
Which method for which job
| Job | Best method |
|---|---|
| One page, once | DevTools Command Menu |
| One page at phone width | DevTools device mode |
| Dozens of pages, or every release | A script with fullPage: true |
| Page taller than about 16,000 pixels | Sections stitched together |
Frequently asked questions
How do I take a screenshot of a whole page in Chrome without an extension?
Open DevTools, open the Command Menu with Ctrl + Shift + P, type “screenshot” and choose Capture full size screenshot.
Why are the images missing in my full-page screenshot?
They are lazy-loaded and never entered the viewport. Scroll the page fully, wait for the images to load, then capture again.
Can I take a full-page screenshot at phone size?
Yes. Use DevTools device mode, pick a device and choose Capture full size screenshot from the More options menu.
Sources: Chrome DevTools, Command Menu, device mode and screenshot tips; Playwright screenshots; Puppeteer full-page screenshots, DEV Community, all read on 28 October 2026.