Firefox Developer Tools now includes a completely redesigned Responsive Design Mode (RDM for short) that’s just landed in Firefox Developer Edition, thanks to hard work from the DevTools team.
In a mobile-first world, it’s essential to prioritize performance for low-bandwidth and offline mobile experiences and design progressive web apps that can deliver across a range of devices. We aim to design developer tools that prioritize empathy for users and developers. That’s why we’ve put so much effort into the Responsive Design Mode.
We want to make it easier for developers to build web experiences that load and respond on screens of all different sizes and support a multitude of browsers, platforms, and device types. RDM is a significant upgrade to the Firefox tools themselves, reflecting our commitment to people who build for the web.
To access the RDM tool, make sure you’re running an up-to-date version of DevEdition. Next, open any web page to view the Responsive Design Mode via Developer → Responsive Design Mode.
There’s a lot in this new tool, and many new features still to come. Check out the video walk-through to see the tool in action with all of its features enumerated, including:
- Popular device emulation
- Network throttling
- Touch-event emulation
- Ability to set DPR (device pixel ratio) of devices
- Screenshotting devices at certain sizes
Firefox Developer Tools already has a series of improvements planned for the next release of Responsive Design Mode, including:
- Making viewports fit to screen (bug 1213951)
- Restoring a saved workspace on restore (bug 1248619), and
- Previewing multiple windows at once (bug 1130173).
About Helen V. Holmes
More articles by Helen V. Holmes…
About J. Ryan Stinnett
Staff Engineer working on Firefox DevTools at Mozilla.