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
Helen V. Holmes is the designer on the Firefox Developer Tools team, passionate about everything from typography to arduinos. A big proponent of making tech a healthy community for all, she helped found Women Who Code DC’s chapter and has mentored at student hackathons all over the U.S.
About J. Ryan Stinnett
Staff Engineer working on Firefox DevTools at Mozilla.