Responsive testing in Firefox

In my last post, I discussed testing a responsive design in Google’s Chrome using the Web Inspector. Well, Firefox also has a way to test responsive designs. Simply go to Tools > Web Developer > Responsive Design View:

Responsive design view in Firefox

Firefox then gives a simple interface, which I actually find cleaner than Chrome’s, to see sites in a variety of breakpoints selectable from a dropdown list of pre-defined resolutions. You can also add your own set of resolutions to the dropdown as well as “rotate” the device. Unlike Google Chrome, there is no easy way to set the User Agent to emulate iOS, Android, and other devices. There are extensions to do this, though.

Firefox responsive interface

Getting to the responsive tester in Firefox is easier than in Chrome. I also don’t like that, in Chrome, the Web Inspector needs to remain open to continue responsive testing. I have found that as soon as the Web Inspector is closed, the viewport reverts back to normal. To revert back to the normal view in Firefox, one must unclick “Responsive Design View.”

Leave a Reply

Your email address will not be published. Required fields are marked *