rdm-resolutions-2For 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:

  1. Open a new Firefox tab or window, and type about:config
  2. (If a warning message comes up, just click OK or “I’ll be careful, I promise!”.)
  3. 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”)
  4. Right click -> Modify.
  5. 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.

  6. 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!

Published by Geoffrey Liu

A software engineer by trade and a classical musician at heart. Currently a software engineer at Groupon getting into iOS mobile development. Recently graduated from the University of Washington, with a degree in Computer Science and a minor in Music. Web development has been my passion for many years. I am also greatly interested in UI/UX design, teaching, cooking, biking, and collecting posters.

11 thoughts on “Add more presets to Firefox responsive design view

    • 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}]
      
  1. 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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.