How to Set a Custom Viewport Size in Chrome DevTools Before Taking a Screenshot

To set a custom viewport in Chrome DevTools, open the page, open DevTools, turn on Toggle device toolbar, leave Dimensions on Responsive, and enter the target width and height in CSS pixels. Then open More options and choose Capture screenshot for the visible viewport or Capture a full size screenshot for the whole scrollable page. Chrome’s Device Mode guide documents this workflow.

For example, set 1440 × 900 to inspect a desktop layout, or 390 × 844 to inspect a narrow mobile layout. These are CSS viewport dimensions; do not assume the downloaded bitmap will always have exactly the same pixel dimensions when device pixel ratio or capture mode differs.

1. Set the custom viewport and capture it

Open the page you want to inspect in Chrome.
Open DevTools: use F12 or Ctrl+Shift+I on Windows/Linux, or ⌘+Option+I on macOS. You can also use Chrome’s menu: More tools → Developer tools.
Click Toggle device toolbar in the DevTools action bar. The shortcut is Ctrl+Shift+M on Windows/Linux and ⌘+Shift+M on macOS.
In the toolbar, select Responsive from Dimensions.
Enter the desired width and height in the fields above the page. Values are CSS pixels. You can also drag the viewport handles to resize it.
Wait for the page to reflow and for any content relevant to the image to appear. Scroll to the position you want if capturing only the current viewport.
Open More options in the device toolbar and choose Capture screenshot. To include off-screen content, choose Capture a full size screenshot instead.

Chrome saves the capture through the browser’s download flow. The command captures the emulated page viewport; it is not a screenshot of the entire DevTools window.

2. Choose the right capture dimensions

Use the dimensions your page or downstream asset requires. Common width presets in Device Mode include Mobile S (320 px), Mobile M (375 px), Mobile L (425 px), Tablet (768 px), Laptop (1024 px), Laptop L (1440 px), and 4K (2560 px). The preset bar chooses widths; enter height separately when a precise fold position matters.

Goal	What to set	Capture choice
Check a responsive breakpoint	Set width just below, at, and above the breakpoint; keep height fixed.	Viewport capture for a focused comparison.
Review a mobile first screen	Set the target phone’s CSS width and the height you want to show.	Viewport capture.
Archive an entire page	Set a useful width; the height is less important to the full-page result.	Full size capture.
Make a reusable device profile	Add a custom device with a name and dimensions.	Select the profile, then capture.

For CSS breakpoints, use More options → Show media queries. The bars show media query breakpoints; selecting around a breakpoint helps check the layout transition. Chrome’s documentation describes blue bars for max-width and orange bars for min-width breakpoints. [Device Mode: Responsive Viewport Mode]

3. Viewport screenshot or full-size screenshot?

A viewport screenshot contains what is currently visible within the emulated viewport at its current scroll position. A full-size screenshot includes page content beyond that viewport, capturing the full scrollable page. The latter can be very tall and may not represent what a person sees on their first screen.

Command	Use it when	Result
Capture screenshot	You need a screenshot of the visible viewport.	The current emulated screen area.
Capture a full size screenshot	You need a page archive or a long visual review.	The full page, including content outside the viewport.

4. Save dimensions as a custom device

For a viewport you reuse often, create a named device instead of typing dimensions every time:

Open the device list in the Device toolbar and choose Edit.
In DevTools Settings, open the Devices tab and choose Add custom device.
Enter a name, width, and height, then add/save the device.
Optionally configure device pixel ratio, user-agent string, and device type. Select the new device from Dimensions.

The optional fields affect the simulated environment as well as its dimensions. Use them only when they match the scenario you intend to inspect; a named profile is a convenience, not proof that the page behaves exactly like physical hardware.

5. Understand CSS pixels, device pixel ratio, and zoom

The width and height fields describe the emulated viewport in CSS pixels. Device pixel ratio (DPR) describes how device pixels relate to CSS pixels. To expose DPR controls, choose More options → Add device pixel ratio, then choose a value in the toolbar. This can affect raster output sharpness and pixel size.

Keep the concepts separate:

Viewport width/height: the layout dimensions used to evaluate responsive CSS.
DPR: the emulated screen density.
Zoom: the scale at which the viewport is displayed within DevTools; it helps fit the emulation on your monitor.
Screenshot bitmap: the output file dimensions. Do not infer these universally from CSS width and height alone.

If exact output bitmap size is a delivery requirement, inspect the downloaded file’s dimensions and adjust the capture settings or process the image to the required size.

6. Mobile and desktop emulation options

Responsive dimensions set the viewport but do not by themselves reproduce every aspect of a device. Device Mode also has a Device Type control. Chrome documents Mobile, Mobile (no touch), Desktop, and Desktop (touch) behaviors; these differ in mobile versus desktop rendering and touch versus click interaction. If the control is hidden, use More options → Add device type.

Other useful controls include device rotation, rulers, device frames for supported device profiles, and media query visualization. These can help explain a layout, but they are not substitutes for checking a physical phone when hardware-specific rendering or interaction matters.

Chrome describes Device Mode as a “first-order approximation” of a mobile experience. It simulates from a desktop or laptop; it does not run the page on actual mobile hardware. For uncertain cases, verify on a real device or use remote debugging. Chrome Device Mode limitations.

7. What to check before you capture

Confirm Responsive is selected when entering arbitrary dimensions; a named device selection can replace them.
Check the width and height fields after resizing. A narrow DevTools panel may hide some toolbar controls.
Wait for fonts, images, client-rendered content, and animations to reach the state you want.
For lazy-loaded content, scroll the page before a full-size capture if necessary so it has a chance to load.
Decide whether you need the current scroll position or the whole page.
Keep DPR and device type consistent when making before/after comparisons.
Capture near important breakpoints and compare the page, rather than testing only a single “mobile” width.

8. Troubleshooting

Problem	Likely cause	Fix
The width and height fields are missing.	The device toolbar is off, or the toolbar is narrow.	Toggle the device toolbar on. Widen the DevTools area or open its overflow/More options controls.
Typing dimensions does not change the layout as expected.	A device preset is selected, or the page has fixed-width content.	Select Responsive, re-enter width and height, and inspect the page’s CSS and viewport meta tag.
The screenshot looks like the wrong size.	You changed viewport dimensions, DPR, zoom, or capture mode and are comparing unlike outputs.	Check the CSS dimensions and DPR in the toolbar, then inspect the downloaded image’s actual pixel dimensions.
The capture cuts off content.	Capture screenshot only captures the visible viewport.	Choose Capture a full size screenshot for off-screen page content, or scroll to the section before taking a viewport capture.
Images or sections are missing from a full-page result.	They may load only when scrolled into view or after asynchronous work.	Scroll through the page first, wait for content, then capture again.
Touch behavior does not match the target.	Viewport dimensions alone do not enable touch simulation.	Set the Device Type to a mobile or touch option appropriate to the scenario.
A page still differs from the real phone.	Device Mode is an approximation and uses the desktop/laptop running Chrome.	Check on physical hardware, especially for hardware, browser, or performance-specific issues.

9. Automated screenshots at a fixed viewport

Chrome DevTools is useful for a one-off manual capture and layout inspection. If you need repeatable captures in code, browser automation libraries commonly expose viewport settings, but their APIs and behavior vary by library and version; follow that library’s current documentation. For a direct API alternative that accepts explicit dimensions, ScreenshotNeo’s viewport parameters use CSS pixels: set width and height, and optionally scale, mobile, touch, or landscape. See the ScreenshotNeo website and API documentation.

Or skip the browser setup

ScreenshotNeo takes a screenshot from one request. Create a key, then use this cURL command (replace the URL with the page you need):

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

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://stripe.com",
        "width": 390,
        "height": 844,
        "format": "webp",
    },
    timeout=90,
)
r.raise_for_status()
with open("shot.webp", "wb") as f:
    f.write(r.content)

Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  width: '390',
  height: '844',
  format: 'webp',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status} ${await res.text()}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

The same GET request can use format=png, format=jpeg or format=webp; full_page=true requests the whole page. For explicit mobile emulation, add mobile=true&touch=true; set scale for device pixel ratio. Use a viewport capture when the precise first-screen height matters. ScreenshotNeo supports full-page capture with lazy content loading, selectors, waits, CSS and JavaScript, request blocking, custom headers/cookies, caching, async jobs, bulk calls, and PDF output; the docs list the parameters and limits.

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before the shot; each cleaning step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response reports page verdict and billing headers. Its MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card required.

Performance, reliability, and cost

For manual DevTools use, capture time depends on the page, its network requests, and rendering; there is no fixed duration to assume. Let the page settle before capturing, but avoid waiting on permanently active network traffic when the page is already visually ready. A full-page capture can be slower and produce a much taller file than a viewport capture.

For automated captures, keep the requested viewport and format stable across a batch so results are comparable. Use a bounded wait strategy when pages load asynchronously, and save the output directly rather than holding many large full-page images in memory. ScreenshotNeo does not bill for bot checks/CAPTCHAs, blank pages, timeouts, failed loads, or cache hits; its response headers include X-Page-Verdict and X-Billed. Quota and the subscription rates are documented on its site; the free tier has 1,000 shots/month, while paid plans start at $5 for 3,000. Check current plan information before selecting a tier.

FAQ

Can I set an exact width and height in Chrome DevTools?

Yes. Turn on Device Mode, choose Responsive, and enter width and height in the toolbar fields.

How do I capture only the visible area?

Choose More options → Capture screenshot in the Device toolbar.

How do I capture a whole webpage?

Choose Capture a full size screenshot from the same menu. For lazy-loaded content, scroll through the page first if required.

Can I reuse a custom viewport later?

Yes. Save a custom device in DevTools Settings → Devices, then select it from the Dimensions menu.

Does Device Mode prove that a site works on a phone?

No. It approximates a mobile viewport and interactions from desktop Chrome; verify hardware-specific behavior on a real device.