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: