Chrome DevTools Responsive Design Mode (2026)

Last updated: April 17, 2026

Chrome DevTools responsive design mode is a powerful built-in tool that lets you test how your website renders across different screen sizes without leaving your browser. Instead of resizing your browser window manually or switching between devices, you can emulate dozens of device viewports directly in Chrome.

Opening Responsive Design Mode

Access responsive design mode through multiple methods:

Keyboard shortcut: Press Cmd+Shift+M (Mac) or Ctrl+Shift+M (Windows/Linux)
Menu: Click the device toggle icon in DevTools (looks like a phone/tablet) or use Menu → More tools → Rendering → Show Chrome DevTools
Command Palette: Press Cmd+Shift+P and type “device”

The viewport displays with a toolbar showing current dimensions, device selection dropdown, and zoom controls.

Selecting Devices and Custom Viewports

The device dropdown includes popular devices like iPhone, iPad, Samsung Galaxy, and Pixel phones. Each preset applies the correct viewport width, height, device pixel ratio, and user agent string.

For custom testing, enter specific dimensions in the width and height fields. Click the More options (…) button to access:

Orientation toggle (portrait/landscape)
Device scale slider
Frame rate throttling for slow network simulation
Touch emulation toggle

// Common responsive breakpoint widths for testing
const breakpoints = {
 mobile: 320,
 mobileLandscape: 480,
 tablet: 768,
 tabletLandscape: 1024,
 desktop: 1280,
 wide: 1440,
 ultraWide: 1920
};

Testing Touch Interactions

Enable touch emulation to simulate touch events on devices with touchscreens. When active, mouse events translate to touch events, and you can test:

touchstart, touchmove, touchend event handlers
CSS touch-action properties
Pinch-to-zoom behavior
Swipe gestures in web applications

Toggle touch emulation from the toolbar or use Shift while dragging to simulate a two-finger gesture.

Inspecting Responsive Breakpoints

While in responsive mode, use the Media Queries panel to visualize all CSS media queries defined in your stylesheets. This panel appears at the top of the viewport as colored bars:

Blue: max-width queries
Green: min-width queries
Purple: min-width and max-width queries

Click any bar to resize the viewport to that breakpoint. This helps identify exactly where your layout breaks or changes.

Network Throttling for Realistic Testing

Combine responsive design mode with network throttling to test how your responsive design performs on slower connections:

Open the Network tab
Select a preset like “Fast 3G” or “Slow 3G”
Reload your page to test

This reveals whether your responsive images load appropriately and whether lazy loading triggers correctly at different viewport sizes.

Debugging Common Responsive Issues

Missing Viewport Meta Tag

Without the viewport meta tag, mobile browsers render pages at desktop width and scale down:

<meta name="viewport" content="width=device-width, initial-scale=1">

Images Overflowing Containers

Use max-width: 100% and height: auto for responsive images:

img {
 max-width: 100%;
 height: auto;
 display: block;
}

Touch Targets Too Small

Ensure interactive elements meet minimum touch target sizes:

/* Recommended minimum touch target: 44x44 pixels */
button, a {
 min-height: 44px;
 min-width: 44px;
 padding: 12px 16px;
}

Font Sizes Too Small on Mobile

Use relative units and ensure minimum readable sizes:

body {
 font-size: 16px; /* Prevents iOS zoom on input focus */
 line-height: 1.5;
}
@media (max-width: 768px) {
 body {
 font-size: 14px;
 }
}

Keyboard Shortcuts Reference

Master these shortcuts for efficient responsive testing:

Action	Mac	Windows/Linux
Toggle device mode	`Cmd+Shift+M`	`Ctrl+Shift+M`
Rotate orientation	`Cmd+Shift+O`	`Ctrl+Shift+O`
Zoom in	`Cmd++`	`Ctrl++`
Zoom out	`Cmd+-`	`Ctrl+-`
Reset zoom	`Cmd+0`	`Ctrl+0`

Advanced: JavaScript Detection for Testing

Test your responsive JavaScript detection:

// Check current viewport width in JavaScript
function getViewportWidth() {
 return Math.max(
 document.documentElement.clientWidth || 0,
 window.innerWidth || 0
 );
}
// Respond to resize events
window.addEventListener('resize', debounce(() => {
 const width = getViewportWidth();
 console.log(`Current viewport: ${width}px`);
 if (width < 768) {
 console.log('Mobile layout active');
 } else if (width < 1024) {
 console.log('Tablet layout active');
 } else {
 console.log('Desktop layout active');
 }
}, 250));
function debounce(func, wait) {
 let timeout;
 return function(...args) {
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(this, args), wait);
 };
}

Practical Workflow

Follow this workflow for comprehensive responsive testing:

Start with the smallest device (320px width) and verify base layout
Progress through breakpoints, checking navigation, content flow, and interactive elements
Test touch interactions on mobile viewports
Verify images and media queries at each breakpoint
Check network performance on throttled connections
Test in actual device browsers for final verification

Chrome DevTools responsive design mode streamlines the testing process by consolidating device emulation, network throttling, and debugging into a single interface. Use it alongside real device testing for the most comprehensive responsive design validation.

Adding and Editing Custom Device Profiles

The built-in device list covers the most common targets, but your project may require custom profiles. a specific kiosk resolution, an older Android device, or a tablet model not in the default list. You can create these once and reuse them across sessions.

Open DevTools, enter device mode, then click the device dropdown and scroll to the bottom to find Edit. This opens the Emulated Devices settings panel. Click Add custom device and fill in:

Device name: Give it a descriptive label you will recognize later
Width and height: The viewport dimensions in CSS pixels
Device pixel ratio: 1 for standard displays, 2 for retina/HiDPI, 3 for high-density mobile screens
User agent string: Copy from a real device’s browser if you need accurate UA sniffing
Device type: Choose Mobile, Tablet, Desktop, TV, or Smartwatch. this affects touch emulation defaults

For a concrete example, if you are building a dashboard targeting Surface Pro 7 users in portrait mode, add a custom device with width 912, height 1368, DPR 2, and device type Tablet. You can then switch to it with one click whenever you need to validate that layout.

Custom devices persist in your Chrome profile, so you build this list once and it follows you across projects. Export your DevTools settings via Settings → Sync → Export if you want to share the profile with teammates or preserve it when switching machines.

Using the Rendering Panel for Visual Debugging

The Rendering panel (accessible via the DevTools command palette or the three-dot menu under More tools) exposes several options that complement responsive testing beyond simple viewport resizing.

Emulate CSS media type lets you switch between screen and print without physically printing. If your site has a @media print stylesheet, verify it here before your users discover broken print layouts.

Emulate CSS media features is where responsive debugging gets genuinely powerful. You can force:

prefers-color-scheme: dark or light. test your dark mode implementation without changing your OS setting
prefers-reduced-motion: reduce. verify that animations and transitions disable cleanly for users who need it
forced-colors: active. simulate Windows High Contrast mode, a common accessibility requirement
prefers-contrast: more. check that text remains legible when users request higher contrast

These emulations let you test accessibility-related responsive behavior that has nothing to do with screen width. A site can be fully responsive in terms of layout yet completely broken for users who rely on prefers-reduced-motion.

Paint flashing highlights elements that are being repainted in green. On a mobile viewport with animations running, excessive repaints are a direct performance problem. If you see large sections of the screen flashing green during a simple scroll, that is a signal to audit your CSS for properties like box-shadow, border-radius, and filter that force paint rather than compositing.

Layer borders draws orange lines around composited layers. On mobile viewports, having too many layers increases GPU memory consumption. On the other hand, promoting key animated elements to their own layer using will-change: transform reduces paint work and produces smoother animations. The layer borders view helps you confirm that will-change is actually being respected by the browser.

Capturing Screenshots and Recording Sessions

Responsive design mode includes a screenshot tool in the device toolbar. The Capture screenshot button (camera icon) saves a PNG of exactly what the emulated viewport shows, at the emulated device pixel ratio. This is useful for documentation, design reviews, and bug reports where you need to show layout behavior at a specific viewport size.

For multi-page flows. login sequences, checkout funnels, form validation. use Capture full size screenshot to get the entire scrollable content, not just the visible area. This option appears in the same camera icon dropdown.

If you need to capture how a layout transitions across breakpoints, use the DevTools Recorder panel (available in Chrome 97 and later). Record a session that drags the viewport from 320px to 1440px, then replay it as a performance trace or export it as a Puppeteer script. This approach turns your manual responsive testing workflow into a repeatable automated test.

Identifying Layout Shift Problems

Cumulative Layout Shift (CLS) is a Core Web Vital that penalizes pages where elements move around after the initial render. Mobile viewports are particularly vulnerable because images without explicit dimensions, late-loading fonts, and dynamically injected ads all shift content more aggressively on narrow screens.

To catch CLS in responsive mode:

Open the Performance panel while in device mode
Click Record, then reload the page
Stop the recording after the page fully loads
Look for the Layout Shift entries in the flame chart. they appear as purple markers

Click a layout shift entry to see which DOM element caused it and by how much. The most common fixes are:

/* Reserve space for images before they load */
img {
 aspect-ratio: 16 / 9;
 width: 100%;
 height: auto;
}
/* Reserve space for embedded content */
.video-wrapper {
 aspect-ratio: 16 / 9;
 width: 100%;
 height: auto;
}

For fonts, add font-display: swap to your @font-face declarations and preload critical fonts in the document head. This reduces the window during which a font swap can shift surrounding text.

Testing Foldable and Non-Standard Viewports

Foldable devices like the Samsung Galaxy Z Fold and Microsoft Surface Duo introduce viewport scenarios that standard responsive testing does not cover. Chrome DevTools includes experimental support for these through the Device Posture API emulation.

Enable it in chrome://flags by searching for “Device Posture”. Once enabled, a new Fold option appears in device mode for supported device presets. You can toggle between folded and unfolded states and observe how your layout adapts.

For the Surface Duo specifically, the dual-screen layout requires CSS spanning media queries. You can test these in DevTools without owning the physical device, which is useful when a client requests Duo compatibility late in a project.

Even without foldable-specific testing, get into the habit of testing at unusual widths. 375px, 390px, 414px. because these correspond to common iPhone models at 1x scale and reveal edge cases that clean breakpoint jumps at 320/768/1024 often miss.

I'm a solo developer in Vietnam. 50K Chrome extension users. $500K+ on Upwork. 5 Claude Max subscriptions running agent fleets in parallel. These are my actual CLAUDE.md templates, orchestration configs, and prompts. Not a course. Not theory. The files I copy into every project before I write a line of code. **[See what's inside →](https://zovo.one/lifetime?utm_source=ccg&utm_medium=cta-default&utm_campaign=chrome-devtools-responsive-design-mode)** $99 once. Free forever. 47/500 founding spots left.