How to Take Screenshots with Chrome DevTools (F12)
Use F12 to open Chrome DevTools, then capture the visible viewport, a full page, or a selected area with the correct command.
F12 opens Chrome DevTools; it does not take a screenshot by itself. After DevTools opens, use Device Mode’s Capture screenshot for the visible viewport, Capture a full size screenshot for the entire page, or the Command Menu’s Capture area screenshot for a hand-selected region.
On Windows or Linux, press F12 or Ctrl+Shift+I. On macOS, press Command+Option+I. These shortcuts open the last-used DevTools panel; the capture command comes afterward. See Chrome’s official shortcut reference.
Choose the right Chrome screenshot command
| What you need | Command | Result |
|---|---|---|
| Visible viewport | Device Mode > More options > Capture screenshot | Only the page area currently visible in the emulated viewport |
| Entire page | Device Mode > More options > Capture a full size screenshot | Page content beyond the current viewport |
| Specific region | Command Menu > screenshot > Capture area screenshot |
A rectangle you drag over the page |
| Device frame included | Device Mode > enable Show device frame, then capture | The emulated device appearance and frame |
Chrome documents these commands in its Device Mode guide and Command Menu guide.
Capture the visible viewport
- Open the page you want to save in Chrome.
- Press F12 or the platform shortcut to open DevTools.
- Click the Toggle device toolbar button, or press Ctrl+Shift+M on Windows/Linux (the exact shortcut can vary by platform and DevTools version).
- Set the device preset, orientation, width, height, and device pixel ratio you need.
- Open the Device Mode More options menu (the three-dot menu).
- Choose Capture screenshot.
- Save the downloaded PNG and inspect it for clipping, overlays, and dynamic content.
This captures what is visible in the emulated viewport. It is useful for a responsive breakpoint, a hero section, a bug report, or a social preview where the viewport dimensions matter.
Control the viewport before capturing
- Device preset: choose a known phone, tablet, or desktop profile.
- Responsive mode: enter exact width and height values for a breakpoint or test case.
- Orientation: switch between portrait and landscape.
- Device pixel ratio: use the emulated density when you need to reproduce a high-DPI layout.
- Zoom: keep browser zoom at 100% when comparing screenshots across runs.
- Show device frame: turn this on before capture when the simulated hardware frame belongs in the image.
Capture a full-page screenshot
- Open DevTools and enable Device Mode.
- Set the viewport width and device profile you want represented.
- Open More options.
- Choose Capture a full size screenshot.
- Open the saved file and check the joins between sections, lazy-loaded images, sticky headers, and content that changes while the page is loading.
Chrome describes this command as capturing the whole page, including content outside the current viewport. A full-size capture can be very tall, so image viewers may resize it on screen even though the saved file retains its dimensions.
When a full-page result needs checking
- Lazy-loaded sections may not have rendered before capture.
- Sticky or fixed elements can appear repeatedly or cover content.
- Animations, carousels, clocks, and live data can change during the capture.
- Very large documents can produce large files or take longer to process.
- Privacy overlays, cookie banners, and login prompts remain unless you dismiss or modify them yourself.
Scroll through the resulting image rather than assuming every page behaves identically. Chrome’s documentation defines the command, but it does not promise identical handling of every site’s dynamic state.
Capture an arbitrary area
- Open DevTools.
- Open the Command Menu with Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS.
- Type
screenshot. - Choose Capture area screenshot.
- Drag across the page region to save.
Area capture does not work when DevTools is undocked from the browser window. Dock DevTools to the browser first, then repeat the Command Menu steps. The command is useful for a component, a chart, an error state, or a cropped comparison where a full-page image would be excessive.
Include a simulated device frame
- Open Device Mode and select the device-specific view you want.
- Open the Device Mode options.
- Enable Show device frame.
- Use Capture screenshot or Capture a full size screenshot.
The frame is part of the captured appearance. If you need only the webpage pixels, leave this option off.
Repeatable workflow for accurate captures
- Decide whether the target is viewport, full page, or an area.
- Set the URL, viewport dimensions, orientation, and device scale.
- Wait for fonts, images, and client-rendered content to finish.
- Dismiss consent dialogs or other overlays that should not be included.
- Freeze the page state where possible: pause animations, stop video, and use stable test data.
- Capture using the matching command.
- Record the URL, viewport, device preset, date, and any manual changes alongside the image.
- Review the output at 100% zoom for clipping, missing images, unexpected bars, and repeated fixed elements.
Troubleshooting Chrome DevTools screenshots
| Symptom | Likely cause | Fix |
|---|---|---|
| F12 opens DevTools but no image is saved | F12 is only the DevTools shortcut | Open Device Mode’s More options and choose Capture screenshot, Capture a full size screenshot, or use the Command Menu for area capture. |
| Capture area screenshot is unavailable or fails | DevTools is undocked | Dock DevTools to the browser window, then run the Command Menu command again. |
| The image contains only the visible section | Capture screenshot was selected | Choose Capture a full size screenshot for off-screen content. |
| The page is the wrong size | Device preset, width, orientation, zoom, or pixel ratio differs from the target | Set those values before capturing and keep browser zoom at 100% for comparisons. |
| Cookie banner or chat widget appears | The page state was captured as rendered | Dismiss it manually, hide the relevant element in DevTools for a local capture, or use a capture service that removes common consent and chat overlays. |
| Images are blank or missing | Lazy loading or a slow request had not completed | Wait for images to load, scroll through the page once, and capture again. Check the Network and Console panels for failed requests. |
| Text or layout changes between captures | Animation, responsive state, live data, or time-dependent code | Pause animations, use stable data, fix the viewport, and capture at the same page state. |
| Full-page capture is extremely large | The document is very tall or contains large images | Capture a viewport or area, reduce the page length for a test fixture, or resize the output after capture. |
| Only part of a fixed header appears | Sticky positioning interacts with full-page capture | Inspect the result; for a clean component image, capture the visible viewport or temporarily adjust the element in DevTools. |
Performance, reliability, and file handling
- Viewport captures are usually fastest: they contain fewer pixels and do not need the entire document.
- Full-page captures scale with page height: long pages require more memory and produce larger files.
- Stable state matters more than speed: wait for fonts, images, and JavaScript content before capturing.
- Repeatability requires recorded settings: save viewport dimensions, device profile, orientation, zoom, and URL with the image.
- Verify the file: check dimensions, format, and whether the download completed before uploading it to another system.
- Protect sensitive data: screenshots can include account details, tokens shown in the UI, personal information, or private URLs.
Automate screenshots when DevTools is not enough
DevTools is ideal for an occasional, human-controlled capture. A scripted browser or screenshot API is more suitable when you need the same URL captured repeatedly, many URLs processed in a batch, authenticated headers or cookies, a CSS selector, a PDF, or a capture that removes overlays consistently.
Or skip the browser setup
ScreenshotNeo provides a GET-based screenshot API and an MCP server for AI agents. The API accepts a URL and returns PNG, JPEG, WebP, or PDF. Read the ScreenshotNeo documentation for the complete parameter list.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
require('node:fs').writeFileSync('shot.webp', buffer);ScreenshotNeo can capture full pages with lazy images loaded, a single CSS-selected element, dark mode, custom viewports and device presets, retina scale, PDFs with paper size, margins, orientation and page ranges, HTML/CSS, custom JavaScript and CSS, clicks, waits, blocked ads or resource types, custom headers, cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, caching with a chosen TTL, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, and usage reporting. Its parameter names are compatible with those used by other screenshot APIs, which helps when migrating.
Before capture, ScreenshotNeo accepts consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. The response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to get started.
FAQ
Does F12 directly save a screenshot?
No. F12 opens the last-used DevTools panel. Use a capture command after DevTools opens.
What is the difference between Capture screenshot and Capture a full size screenshot?
Capture screenshot saves the current viewport. Capture a full size screenshot includes page content outside that viewport.
Can I select just one part of a page?
Yes. Use the Command Menu, search for screenshot, and choose Capture area screenshot. DevTools must be docked.
Can Chrome DevTools remove cookie banners automatically?
DevTools does not provide a universal automatic removal step. Dismiss or edit the page locally, or use a service designed to remove common consent overlays before capture.
Which format does DevTools save?
The built-in screenshot commands save image files from Chrome’s capture workflow. If you need a controlled PNG, JPEG, WebP, or PDF response in an automated pipeline, use an API such as ScreenshotNeo.
