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
about:config - (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!
Excellent, thank you Geoffrey!
on FF 37.0.1 I had to change to “name” for it to work.
Does anyone have a good list with the standard Mobile/Tablet resolutions to test?
Thanks
Thank you Yoni, I have updated the post.
how do i create a new entry?
You can add another line at the end, right before the closing “
]“.For example, if I wanted to add another entry at the end, the last 2 lines of the code would look like:
{"key": "8640p: 15360x8340", "width": 15360, "height": 8640}, {"key": "MyRes: 4321x1234", "width": 4321, "height": 1234}]Thanks for sharing this tutorial, its very helpful.
Thanks for sharing this tutorial. After reading the comments I was doubltful whether it will work but thankfully it worked. I’m using FF 35 by the way and it worked without renaming “key” as “name” like suggested in the comments here.
I can’t seem to find devtools.responsive.UI.presets. Could it be that it doesn’t exist anymore in FF26?
Ok. Got it. Seems to have been changed to ‘devtools.responsiveUI.presets’… and you have to create a new entry ‘cos it doesn’t exists.
And “key” should be changed to
“name”
Thanks Aldi, I’ve updated the post.