How to Capture a Website Screenshot in Chrome DevTools at 2x Resolution

Direct answer: In Chrome DevTools, enable Device Mode, add the device pixel ratio (DPR) control from More options, set DPR to 2, then choose Capture screenshot for the visible viewport or Capture a full size screenshot for the whole page. If the deliverable requires an exact pixel width or height, check the downloaded image dimensions: DPR sets the emulated ratio, while the official documentation does not promise one universal output-size formula for every page and capture context. Chrome’s Device Mode guide documents the control and capture choices.

What “2x resolution” means in DevTools

Device pixel ratio relates physical screen pixels to logical CSS pixels. Setting DPR to 2 asks Device Mode to emulate two device pixels for each CSS pixel. It changes the emulated rendering context; it does not by itself specify the final file’s exact dimensions.

For example, a page rendered in a 400 CSS-pixel-wide emulated viewport has a nominal 800-device-pixel width at DPR 2. Treat that as an explanation of the ratio, not a guarantee about every downloaded image: capture scope, browser behavior, page dimensions, and configuration can affect the file. Inspect the actual image when exact dimensions matter.

Capture a 2x screenshot in Chrome DevTools

Open the page in Chrome and open DevTools. Use the device toolbar button to enable Device Mode.
In the Device Mode toolbar, open More options and choose Add device pixel ratio.
Set the DPR control that appears to 2. Choose the viewport or device configuration you need; keep its width and height consistent with the target page layout.
Open More options again and choose the capture action that matches your scope:
- Capture screenshot saves the visible viewport.
- Capture a full size screenshot captures the full page, including content outside the current viewport.
Open the saved image in an image viewer or inspect its file properties to confirm its pixel width and height if those are contractual requirements.

Device Mode approximates a mobile device; it is not the same as running the page on actual mobile hardware. For behavior that must match a particular physical device, verify on that device.

Choose the right capture scope

Need	DevTools method	What to check
What is currently visible	More options → Capture screenshot	Viewport dimensions and DPR
The complete long page	More options → Capture a full size screenshot	Full-page output dimensions and content that loads while scrolling
A particular region	Command Menu → Capture area screenshot	Selection boundary and whether DevTools is docked

Capture a selected area

Open the Command Menu with Ctrl+Shift+P on Windows, Linux, or ChromeOS, or Command+Shift+P on Mac. Type screenshot, select Capture area screenshot, and drag over the page. Area capture does not work when DevTools is undocked. See Chrome’s Command Menu guide.

Exact pixel dimensions: verify the file

If a design handoff, asset pipeline, or upload requires a fixed pixel size, do not infer it solely from the DPR value or the menu label. After capture, inspect the image dimensions. If they differ from the target:

Confirm the emulated viewport width and height.
Confirm DPR is still set to 2 for the capture.
Confirm you chose viewport, full-page, or area capture as intended.
Check whether the target specification means CSS pixels or image pixels.
Resize or recapture to meet the exact output dimensions, then verify the saved file again.

Full-page capture can produce a much taller image than a viewport capture. A 2x rendering context can also produce a larger file, which matters for memory, transfer, and downstream upload limits.

Options and practical considerations

Viewport or device preset: affects responsive layout. Select the dimensions relevant to the page you want to document.
DPR: set to 2 for this workflow. A higher DPR changes pixel density and may increase output size; it does not make page content sharper if the source assets themselves are low resolution.
Capture scope: viewport, full page, or selected area. Match the scope to the deliverable.
Emulation fidelity: Device Mode is an approximation. Check on real hardware when device-specific rendering is essential.
Page readiness: wait for fonts, images, animations, and asynchronous content to settle before capture. A screenshot records the current rendered state.

Troubleshooting

Symptom	Likely cause	Fix
No DPR control is visible	The control has not been added to the Device Mode toolbar	Open More options and choose Add device pixel ratio, then set it to 2.
The screenshot shows only part of the page	Viewport capture was selected	Choose Capture a full size screenshot for the complete page.
The saved image is not the expected pixel size	DPR is not a universal exact-dimensions setting; viewport or capture scope may differ	Inspect the actual file, confirm viewport and DPR, then resize or recapture to the target dimensions.
Capture area screenshot is unavailable or fails	DevTools is undocked	Dock DevTools and run the Command Menu capture workflow again.
Some page content is missing	Content had not loaded or appeared before capture	Wait for the page and its dynamic content to render, then capture again. For lazy content, scroll through the page before taking a full-page capture.
The page layout looks different from a phone	Device Mode is an emulation, not a physical device	Check the page on the relevant real device when hardware-specific fidelity matters.

Performance, reliability, and cost

DevTools is useful for a one-off capture because it is built into Chrome and requires no screenshot-service account. Full-page and high-DPR images can be large, so allow time for rendering and ensure the destination can accept the resulting dimensions and file size. Results depend on the page’s load state and the emulated configuration; verify important captures and repeat if the page changes during rendering.

For repeated captures, manual menu steps are harder to standardize across a team. Record the viewport, DPR, capture scope, and readiness conditions alongside the image so another developer can reproduce the setup. Device Mode remains an approximation when compared with the target physical device.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server from ScreenshotNeo. Its API accepts a URL and returns an image or PDF. The one-call example below requests a WebP screenshot; see the API documentation for parameters and formats.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

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)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie and consent banners are accepted before capture, and more than 60 known consent platforms, newsletter popups, and chat widgets are removed; each step can be turned off.
Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Response headers identify the page verdict and billing status.
An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
The free plan includes 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is on every plan.

FAQ

Does DPR 2 mean every screenshot is exactly twice the CSS width and height?

DPR describes the emulated relationship between physical and logical pixels. Check the downloaded dimensions for an exact deliverable; the documentation does not specify a universal output formula for every capture context.

Can I capture just the visible browser area?

Yes. Choose Capture screenshot in Device Mode’s More options menu.

Can I capture the full page or a selected region?

Yes. Use Capture a full size screenshot for the page, or the Command Menu’s Capture area screenshot for a dragged selection. Area capture requires docked DevTools.

Does Device Mode prove how a real phone will render the page?

No. It approximates a device configuration. Use the actual device when physical-device fidelity is required.