For us web developers, Firefox ships with a really nice Developer Tools interface (Shift+F5, Cmd+Shift+I), which includes the Responsive Design View (Ctrl+Shift+M, Alt+Shift+M). Unfortunately, RDV is disappointing in its paltry selection of preset resolutions. It’s a shame that the Firefox developers didn’t include more common resolutions, such as 1920×1080 or 1366×768.
They didn’t make it easy to add presets either. You have to manually resize the window, and getting the dimensions down to the pixel isn’t that easy with a mouse.
That’s why I compiled a list of common resolutions that you can use in RDM. Here’s how to add these common resolutions:
- Open a new Firefox tab or window, and type
- (If a warning message comes up, just click OK or “I’ll be careful, I promise!”.)
- Now, we have to find the setting for RDM’s presets. In the search bar, type in
devtools.responsiveUI.presets. If this setting does not exist, create it. To create the setting, right-click in the empty area, click New -> String, enter the name and leave the value blank.
(Hat tip to commenter Aldi, it’s “responsiveUI”, not “responsive.UI”)
- Right click -> Modify.
- Copy and paste the following into the text field, replacing the original contents:
Or, view this code on GitHub and copy and paste from there.
Hat tip to commenter Yoni Sudwerts who pointed out that “key” should be “name”. This is a change in FF 37 onwards.
- Click OK. If you have any tabs open with RDM, close and reopen them to see the changes.
Now when you use RDV, you’ll have all of the common screen resolutions at your disposal. No more manually resizing the frame!