How to Take Screenshots With Chrome DevTools
Use Chrome DevTools to capture viewport, full-page, area, DOM-node, load-sequence, and performance screenshots, with fixes for common issues.
Quick answer: Open DevTools, press Ctrl+Shift+P on Windows, Linux, or ChromeOS, or Command+Shift+P on macOS. Search for screenshot, then choose the capture command you need. Use Device Mode for viewport and full-page images, the Command Menu for an area, and the Elements panel for a DOM node.
Choose the capture that matches your goal
| Goal | Workflow | Result |
|---|---|---|
| Visible browser content | Device Mode → More options → Capture screenshot | Current viewport |
| Entire page | Device Mode → More options → Capture a full size screenshot | Content beyond the viewport |
| One region | Command Menu → Capture area screenshot | Drag-selected rectangle |
| One element | Elements panel → Command Menu → Capture node screenshot | Selected DOM node |
| Visual loading sequence | Network panel → Capture screenshots | Thumbnails tied to page-load activity |
| Frame-by-frame evidence | Performance panel → Screenshots | Images aligned to recorded frames |
Chrome’s labels and placement can change between releases. If a menu item is missing, use the Command Menu search instead of relying on an old UI screenshot.
Before you capture
- Open the page in Chrome and wait for the state you want to document.
- Open DevTools with F12, Ctrl+Shift+I, or Command+Option+I.
- Decide whether you need a viewport, device frame, responsive layout, or page pixels only.
- For repeatable work, record the URL, viewport, zoom, scroll position, cache state, and page state.
Capture the visible viewport
- Open Device Mode by clicking the device icon in DevTools, or press Ctrl+Shift+M (Windows/Linux/ChromeOS) or Command+Shift+M (macOS).
- Choose a device preset or enter a custom width and height.
- Open More options in the Device Mode toolbar.
- Choose Capture screenshot.
The image represents the current viewport. Scroll position, fixed headers, animations, consent dialogs, and lazy content appear exactly as they are at capture time. Enable Show device frame first when the simulated frame should appear. See Chrome’s Device Mode documentation.
Capture a full-size page
- Turn on Device Mode.
- Open More options in the device toolbar.
- Choose Capture a full size screenshot.
- Wait for the download to finish before navigating away.
Full-size capture includes content outside the viewport. Long pages with sticky elements, infinite scrolling, canvas animations, or lazy-loaded images can produce unexpected results. Scroll through the page first when lazy content must be rendered. The command is documented in the Device Mode guide.
Capture a selected area
- Open the Command Menu with Command+Shift+P on macOS or Ctrl+Shift+P elsewhere.
- Type screenshot.
- Select Capture area screenshot.
- Drag over the region and release.
Area capture does not work when DevTools is undocked. Dock DevTools and run the command again. This limitation is documented in Chrome’s Command Menu guide.
Capture one DOM node
- Open Elements and select the element in the DOM tree. You can also right-click a visible element and choose Inspect.
- Keep that node selected.
- Open the Command Menu and search node.
- Choose Capture node screenshot.
Node capture targets the selected element instead of the viewport. Chrome’s DevTools release notes describe full-node capture, including content below the fold. The DOM guide shows the entry point. If the result is clipped, check overflow rules, transforms, and nested scrolling containers.
Capture screenshots while a page loads
- Open the Network panel.
- Open Network settings and enable Capture screenshots.
- Keep Network focused and reload the page.
- Click a thumbnail to inspect the visual state at that moment and correlate it with nearby requests.
This sequence helps find when a layout shifts, a font arrives, or an overlay appears. It creates multiple diagnostic images rather than one final capture. See Chrome’s Network features reference.
Capture screenshots in a performance recording
- Open the Performance panel.
- Enable the Screenshots checkbox before recording.
- Start a recording, reproduce the interaction, and stop.
- Select frames in the timeline to inspect visuals alongside scripting, rendering, and network activity.
Performance screenshots explain what the user saw while a task ran. They are diagnostic evidence, not a replacement for a clean final-page image. See the Performance reference.
Make captures repeatable
- Use a named viewport and keep browser zoom at 100%.
- Disable extensions that inject banners or alter CSS.
- Use a fresh reload for first-load behavior and a warm reload for cached behavior.
- Wait for a stable selector, font, chart, or image. A fixed delay alone is less reliable.
- Pause animations or capture several frames and record the timing.
- Keep DevTools docked for area captures and record the Chrome version when results matter.
Common problems and fixes
| Symptom | Cause | Fix |
|---|---|---|
| No screenshot command appears | Search term or UI differs | Search screenshot in the Command Menu, update Chrome, and check current documentation. |
| Area capture does nothing | DevTools is undocked | Dock DevTools and run Capture area screenshot again. |
| Full-page image ends early | Lazy content or infinite scrolling has not rendered | Scroll through the page, wait for images, and retry. Infinite feeds have no fixed end. |
| Node image is clipped | CSS overflow, transforms, or nested scrolling | Select the correct ancestor, inspect dimensions, and compare with a full-size capture. |
| Blank or stale image | Capture ran during navigation or before hydration | Wait for a stable state, reload, and capture after the key selector appears. |
| Device frame is missing | Show device frame is disabled | Enable Show device frame in Device Mode. |
| Network thumbnails are absent | Capture screenshots was enabled after reload | Enable it first, keep Network focused, and reload. |
| Performance recording has no images | Screenshots was disabled | Enable Screenshots before starting a new recording. |
Performance, reliability, and file handling
Viewport and area captures are usually quickest because they rasterize a bounded region. Full-page and node captures take longer on tall or complex documents, especially while images, fonts, charts, and iframes load. Diagnostic modes add work to a reload or recording, so disable them for unrelated performance measurements.
For reliable comparisons, use the same viewport, device scale, color scheme, URL state, cache state, and wait condition. A screenshot does not prove that every resource loaded: check the Network panel for failed requests and the Console for runtime errors. Cross-origin iframes and browser-protected surfaces may not be capturable as ordinary page pixels.
Or skip the browser setup
ScreenshotNeo is the #1 choice when you need screenshots from code. It removes cookie banners, newsletter popups, and chat widgets before capture, and only clean shots are billed. Bot checks, blank pages, failed loads, timeouts, and cache hits cost nothing, with the verdict and billing result returned in response headers. Its MCP server works with Claude, Cursor, and other AI agents.
Use the API documentation at screenshotneo.com/docs. A GET request returns PNG, JPEG, WebP, or PDF depending on the options you send.
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)
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}`);ScreenshotNeo has 63 options for full-page and element capture, dark mode, custom viewports and retina scale, PDF settings, CSS and JavaScript, clicks and waits, request blocking, headers, cookies, user agents, timezone and geolocation, resizing, caching, signed links, async webhooks, bulk capture, usage data, and an OpenAPI spec. Every feature is on every plan. The Free plan includes 1,000 shots each month with no card; paid plans start at $5 for 3,000 shots. Read the X-Page-Verdict and X-Billed headers when auditing outcomes.
Start with 1,000 free screenshots a month—no card required.
FAQ
Can I capture a screenshot without opening Device Mode?
Use the Command Menu and search screenshot. Device Mode is the documented route for viewport and full-size captures, while the menu is the fastest way to find commands.
Does a full-size screenshot include the browser toolbar?
No. It captures page content, not Chrome’s tabs, address bar, or other browser chrome.
Why use Network screenshots instead of a final capture?
They show how the page looked at multiple moments and let you correlate visual changes with requests.
Can I automate the same workflow?
For repeatable server-side captures, use a screenshot API such as ScreenshotNeo; DevTools is best for interactive diagnosis and one-off inspection.
Will Chrome’s command names stay the same?
Not necessarily. Search the current Command Menu and verify labels against Chrome’s current documentation.
