Firefox Responsive Design Mode: DPR, Touch Simulation, Network Throttling, and Device Presets

Firefox's Responsive Design Mode (RDM) is a powerful tool for testing websites across different screen sizes, device types, and network conditions. It goes beyond Chrome's DevTools device mode in several ways. This guide covers everything you can do in RDM.

Opening Responsive Design Mode

Three ways to open RDM:

• Keyboard: Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (Mac)
• DevTools: F12 → responsive icon (phone/tablet icon in toolbar)
• Right-click: right-click on page → Inspect → switch to responsive view

The page reloads in a resizable viewport with device simulation tools in the toolbar.

Setting Viewport Size

Drag the handles on the right and bottom edges of the viewport to resize. The dimensions display at the top of the viewport in real time.

Manual entry: click the dimensions display and type exact pixel values. Useful for testing specific breakpoints.

Rotate: the rotate button swaps width and height — simulate landscape vs. portrait orientation.

Device Presets

The device dropdown provides presets for common devices:

• iPhone SE, 12, 14 Pro Max
• iPad, iPad Pro
• Samsung Galaxy
• Pixel devices
• Kindle Fire

Each preset sets width, height, device pixel ratio, and user agent automatically.

Add custom devices: click "Edit list..." → add a custom preset with your own dimensions and DPR. Useful for testing your company's targeted device range.

Touch Simulation

The touch simulation button enables touch events. With it active:

• Mouse clicks send touchstart/touchend events
• Dragging sends touchmove
• JavaScript 'ontouchstart' in window returns true

This is important for testing touch-specific code paths that don't trigger with mouse events.

User Agent Switching

RDM lets you set a custom User Agent string directly in the toolbar. Options:

• Custom string input
• Presets matching selected device
• "No user agent override" (use Firefox's default)

This is useful for testing UA-sniffing code that serves different content to mobile browsers. Note: UA sniffing is discouraged — feature detection is more reliable — but testing with real UA strings helps debug legacy code.

DPR (Device Pixel Ratio)

Click the DPR button (1x, 2x, 3x) to simulate high-DPI screens:

• 1x: standard screen (1 CSS pixel = 1 physical pixel)
• 2x: Retina/HiDPI (1 CSS pixel = 2 physical pixels)
• 3x: Very high DPI (modern phones)

With DPR 2x enabled:

• Images served via srcset with 2x descriptors will load the 2x version
• window.devicePixelRatio returns 2
• CSS @media (min-resolution: 2dppx) queries activate

Test your image serving strategy: switch DPR and watch network requests to verify <picture> elements or srcset attributes serve the right resolution.

Network Throttling

The network throttle dropdown in RDM simulates slow connections:

• Good 3G: typical mobile 3G (~750 Kbps)
• Regular 3G: slower (~250 Kbps)
• Poor 2G: very slow mobile connection

These apply to all network requests from the RDM viewport.

More detailed throttling is available in DevTools → Network tab → throttling dropdown, which offers the same presets plus custom bandwidth/latency settings.

Screenshot Capture

The camera icon captures a screenshot of the entire viewport at the current dimensions. The screenshot matches the viewport pixel dimensions (DPR affects the actual pixel resolution of the captured image).

Screenshots are saved to your downloads folder automatically.

Testing Media Queries

With RDM open, resize the viewport and watch CSS breakpoints activate:

• The Inspector's CSS view shows which @media queries are active
• Elements change layout as breakpoints trigger
• Flexbox/Grid inspector updates in real time

Media query inspector shortcut: in RDM, the ruler shows colored indicators for where your CSS media query breakpoints fall — hover over them to see the breakpoint value.

Simulating Screen Orientation Events

Rotating the device in RDM fires orientationchange events that your JavaScript can listen to:

window.addEventListener('orientationchange', () => {
  console.log('Orientation:', screen.orientation.type);
  // 'landscape-primary', 'portrait-primary', etc.
});

Test orientation-change handlers without using a physical device.

RDM + DevTools Together

RDM and DevTools can run simultaneously. The DevTools panels work on the RDM viewport:

• Inspector: inspect elements in the simulated viewport
• Console: JavaScript runs in the simulated context
• Network: shows network requests with throttling applied

This lets you, for example, throttle to 3G and open the Performance panel to profile load time on simulated mobile conditions.

Common Testing Workflow

1. Open RDM (Ctrl+Shift+M)
2. Set device preset to iPhone 14 Pro (or your target)
3. Enable touch simulation
4. Set network throttle to Good 3G
5. Hard reload (Ctrl+F5)
6. Check: does everything render correctly? Touch targets large enough? Text readable?
7. Rotate to landscape
8. Resize to test intermediate breakpoints (drag the right edge)

Limitations to Know

• Fonts: system fonts may look different from actual mobile OS
• Native input elements: <select> and date pickers render as desktop versions, not mobile native
• Vibration API: navigator.vibrate() doesn't actually vibrate (obviously)
• Device sensors: accelerometer, gyroscope not simulated
• Actual performance: a real mobile device has less CPU and memory than your computer; RDM doesn't simulate processing limitations

For final mobile testing, always test on a real device or a device emulator (Android Studio AVD, iOS Simulator). RDM is for fast iteration, not final sign-off.

Testing Firefox on Mobile via Remote Debugging

For testing on actual Android Firefox:

1. Enable remote debugging in Firefox for Android (Settings → About Firefox → tap version 5x to enable, then Settings → Remote debugging)
2. Connect via USB
3. Desktop Firefox about:debugging → USB → select the device
4. Inspect any tab running on the device with full DevTools

This gives you real device rendering with all Firefox DevTools features available from your desktop.