Firefox Responsive Design Mode Guide
How to use Firefox's Responsive Design Mode for viewport testing, touch simulation, and throttling - and where it differs from Chrome.
6 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
Open and configure RDM
Firefox's Responsive Design Mode (Cmd/Ctrl+Shift+M) gives you a resizable viewport with presets, DPR control, and orientation switching. You can add custom devices, set a specific pixel ratio, and toggle touch-event simulation. It's a capable single-viewport emulator built right into Firefox's developer tools.
Cmd/Ctrl+Shift+M toggles Responsive Design Mode
Pick presets or drag to a custom size
Set DPR and orientation manually
Enable touch-event simulation
Throttling and screenshots
RDM includes network throttling profiles to simulate slower connections and a screenshot button that captures the current viewport. Combined with Firefox's excellent grid and flexbox inspectors, it's a strong free option for testing one viewport at a time and for catching Gecko-specific rendering differences.
Apply network throttling profiles in RDM
Capture viewport screenshots from the toolbar
Use Firefox's class-leading grid inspector
Catch Gecko-specific rendering quirks
Where it stops and what fills the gap
Like Chrome's device mode, RDM shows one viewport at a time, so cross-breakpoint bugs and synchronized multi-device flows are out of reach. For those, a dedicated multi-device browser is the complement: Sizzy shows many viewports at once with synced interaction, while you keep Firefox RDM for Gecko-specific checks.
RDM is single-viewport, like Chrome device mode
Cross-breakpoint relationships stay hidden
No synchronized multi-device interaction
Pair RDM with a multi-device browser for the full picture
Release checklist
RDM is configured with the right DPR and touch simulation.
Throttling is used to test slower connections.
Firefox is used for Gecko-specific rendering checks.
Multi-device flows are handled by a dedicated browser.
Frequently asked questions
How do I open Responsive Design Mode in Firefox?
Press Cmd/Ctrl+Shift+M, or open it from the Tools > Browser Tools menu. It gives you a resizable viewport with device presets, DPR control, orientation switching, touch simulation, and network throttling.
Is Firefox Responsive Design Mode better than Chrome's?
They're comparable single-viewport emulators. Firefox has an outstanding grid inspector and is essential for catching Gecko-specific bugs, while Chrome's device mode integrates tightly with its broader tooling. Use both for cross-engine coverage.
Can Firefox test multiple devices at once?
No. Responsive Design Mode shows one viewport at a time. For viewing multiple devices simultaneously with synchronized interaction, use a dedicated multi-device browser alongside Firefox.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.