{"id":3186,"date":"2013-08-16T15:15:53","date_gmt":"2013-08-16T22:15:53","guid":{"rendered":"http:\/\/g-liu.com\/blog\/?p=3186"},"modified":"2015-05-01T23:43:53","modified_gmt":"2015-05-02T06:43:53","slug":"firefox-responsive-design-view-presets","status":"publish","type":"post","link":"https:\/\/g-liu.com\/blog\/2013\/08\/firefox-responsive-design-view-presets\/","title":{"rendered":"Add more presets to Firefox responsive design view"},"content":{"rendered":"

\"rdm-resolutions-2\"<\/a>For us web developers, Firefox ships with a really nice Developer Tools interface (Shift+F5<\/kbd>, Cmd+Shift+I<\/kbd>), which includes the Responsive Design View (Ctrl+Shift+M<\/kbd>, Alt+Shift+M<\/kbd>). 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.<\/p>\n

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.<\/p>\n

That’s why I compiled a list of common resolutions that you can use in RDM. Here’s how to add these common resolutions:
\n<\/p>\n

    \n
  1. Open a new Firefox tab or window, and type about:config<\/code><\/li>\n
  2. (If a warning message comes up, just click OK or “I’ll be careful, I promise!”.)<\/li>\n
  3. Now, we have to find the setting for RDM’s presets. In the search bar, type in devtools.responsiveUI.presets<\/code>. 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.
    \n(Hat tip to commenter Aldi, it’s “responsiveUI”, not<\/span> “responsive.UI”)<\/em><\/li>\n
  4. Right click -> Modify<\/strong>.<\/li>\n
  5. Copy and paste the following into the text field, replacing the original contents:
    \n