Short answer: open DevTools, press Cmd + Shift + P (or Ctrl + Shift + P), type screenshot, and pick Capture full size screenshot. Chrome downloads a PNG of the whole page, including everything below the fold.
That covers a one-off capture. If you take these every day, an extension saves clicks. If you have a list of URLs or need captures on a schedule, use an API. A quick comparison:
| Method | Good for | Captures |
|---|---|---|
| Chrome DevTools | An occasional screenshot, nothing to install | The tab you have open |
| An extension | Frequent captures with cropping and annotations | The tab you have open |
| An online tool | A quick image of a public URL | A fresh browser session, not yours |
| A screenshot API | Automated, repeatable captures | A fresh browser session, with the settings you choose |
Capture the full page with DevTools
Open the page and let it finish loading. Then:
- Open DevTools: Cmd + Option + I on Mac, Ctrl + Shift + I on Windows and Linux.
- With DevTools focused, open the Command Menu: Cmd + Shift + P or Ctrl + Shift + P.
- Type
screenshot. - Choose Capture full size screenshot.
- Open the downloaded file and scroll to the bottom to make sure the whole page is there.
Don’t confuse it with Capture screenshot, which grabs only the visible part. Google documents these in its DevTools screenshot tips and the Command Menu reference.
If the shortcut does nothing, click somewhere inside the DevTools panel first. The page and DevTools have separate keyboard focus.
Watch the page width
DevTools docked to the side makes the page narrower, and on a responsive site that can switch the whole layout to its tablet version right before you capture.
For predictable results, undock DevTools into its own window or set an exact width with the device toolbar (next section). The width decides the line breaks, the navigation, and the page height. So a “taller” screenshot isn’t necessarily a more complete one. It might just be a different layout.
Capture the mobile layout
You don’t need a phone to capture the mobile version:
- In DevTools, turn on the device toolbar (the phone-and-tablet icon, or Cmd/Ctrl + Shift + M).
- Pick a device preset, or choose Responsive and type a width and height.
- Reload the page, since some sites only pick their layout on load.
- Open the device toolbar’s ⋮ menu and choose Capture full size screenshot.
See Chrome’s device mode docs for more. Keep in mind it’s an emulation. It isn’t Safari on an iPhone, and it won’t reproduce every quirk of a real device.
Tip: put the width in the filename. Someone opening pricing-390px.png later knows what they’re looking at. mobile.png doesn’t tell them much.
Use an extension if you do this a lot
If you capture and mark up pages all day, the DevTools route gets tedious. Our full-page screenshot extension for Chrome captures the current tab in one click and lets you crop and annotate before saving.
Because it runs in your browser, it sees what you see, including pages you’re logged into. It can’t capture Chrome’s internal pages (like chrome://settings), and it won’t open collapsed sections or load an endless feed for you.
Use an online tool for public pages
For a public page, the full-page screenshot tool is the quickest route: paste a URL and download the image.
The tool opens the URL in its own browser, so nothing from your tab carries over: no cookies, no cart, no open menus. If you get a login screen, the tool is working correctly. It just isn’t logged in as you.
To automate the same thing, start with the API getting-started guide and pass full_page=true, a viewport size, and a format. If you need to click through an app before capturing, see the Playwright screenshot tutorial.
When the capture comes out wrong
Images are missing further down
Many sites lazy-load images only when you scroll near them. Scroll slowly to the bottom, wait a moment, scroll back up, and capture again. Then check the saved file, not the preview.
In the API, full-page scrolling options do the same scroll-to-load step for you.
Only part of a dashboard or table shows up
The page probably has its own scrolling panel. The document fits on screen, but the table scrolls inside a box, and a full-page capture won’t expand that box.
Use the app’s export feature, capture the section separately, or, if it’s your own page, temporarily change the CSS so the panel shows everything. Just don’t do that when the screenshot is meant to show a bug exactly as users see it.
The header shows up twice or covers content
Sticky headers and pop-ups can get in the way, especially with tools that scroll and stitch several images together. Check the seams. DevTools’ full-size command renders the page in one pass rather than stitching, so it usually avoids repeated headers. Closing pop-ups first or capturing shorter sections also helps.
The page never ends
An infinite feed has no “full page”. Pick a cutoff, such as the first 50 items or everything since a certain date, and capture up to that. Some lists also remove earlier items as you scroll, so scrolling further doesn’t always get you more.
Two captures of the same page don’t match
Keep the width, zoom, page state, and loading time the same. Let fonts and charts finish. Rotating banners, timestamps, and personalized content will differ between captures no matter what.
If you’re comparing before and after for a bug, write down the URL and settings for both. Two screenshots taken at different widths don’t prove anything.
