Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

reset defaults to responsive design view

  • 14 replies
  • 8 have this problem
  • 14419 views
  • Last reply by cor-el

more options

I have mistakenly removed presets in the "responsive design view" option found under "Web developer" option in menu. Is there a way to bring them back. I don't wan't to reset my firefox to factory settings.

Any help shall be appreciated.

Thanks

Chosen solution

Here's what I have and where to paste it. If you created your own sizes that you do not want to overwrite, you may need to copy those out and edit them into the array first before pasting.

(1) Select and copy:

[{"key":"320x480","width":320,"height":480},{"key":"360x640","width":360,"height":640},{"key":"768x1024","width":768,"height":1024},{"key":"800x480","name":"Android-WVGA","width":800,"height":480},{"key":"800x1280","width":800,"height":1280},{"key":"980x1280","width":980,"height":1280},{"key":"1280x600","width":1280,"height":600},{"key":"1920x900","width":1920,"height":900}]

(2) In a new tab, type or paste about:config in the address bar and press Enter. Click the button promising to be careful.

(3) In the filter box, type or paste preset and pause while the list is filtered

(4) Double-click the devtools.responsiveUI.presets preference and paste.

Read this answer in context 👍 14

All Replies (14)

more options

Resetting is the best way to restore what you lost.

more options

Thanks for the quick response. Actually I dont wan't to reset the firefox browser because there are other settings that will be lost.

more options
more options

Thanks for the link, the above link is telling about responsive design view which I already know. It would be appreciated if the makers of this feature would simply allow the user to add a new preset.

Note: There is an option of doing this though, but clicking that option simply allows the selected resolution to be renamed; one can not change the values of resolution.

more options

Chosen Solution

Here's what I have and where to paste it. If you created your own sizes that you do not want to overwrite, you may need to copy those out and edit them into the array first before pasting.

(1) Select and copy:

[{"key":"320x480","width":320,"height":480},{"key":"360x640","width":360,"height":640},{"key":"768x1024","width":768,"height":1024},{"key":"800x480","name":"Android-WVGA","width":800,"height":480},{"key":"800x1280","width":800,"height":1280},{"key":"980x1280","width":980,"height":1280},{"key":"1280x600","width":1280,"height":600},{"key":"1920x900","width":1920,"height":900}]

(2) In a new tab, type or paste about:config in the address bar and press Enter. Click the button promising to be careful.

(3) In the filter box, type or paste preset and pause while the list is filtered

(4) Double-click the devtools.responsiveUI.presets preference and paste.

more options

Actually, if you do not have any presets you've created that you want to save, you can simply zap that preference (right-click > Reset) to return to the defaults.

more options

Thanks a lot. That helped.

more options

AMAZING! I love Firefox.

What would make my life perfect, is if I can get a whole list of presets for all major devices in this formatted code, with their corresponding names.

Am I asking too much? Does anyone have this handy???

Much appreciated.

more options

I don't think many people on the support forum are using Responsive Design View yet. If you search around on the web, can you find a critical mass of users somewhere?

more options

No. This thread is all I could find. I think it's a nice tool but it's hard to specify dimensions if I want to add a preset. I have to keep adjusting the window. The method proposed is much easier. I was looking for additional presets that I can just download, or even a list of dimensions that I can format into this proposed code and voila. But no luck finding it.

There are so many devices and I'm a bit new to responsive design. So this helps a lot.

more options

Hi jack_fu, yes, I think that drop-down menu needs a place to simply type the height and width instead of having to move pixel by pixel. Not sure if there is a wish list for this anywhere... Mozilla's decentralized method of working on wikis, bug databases, issue lists, blogs, etc., can make such things hard to track down.

more options
javascript:(function(){
function rdObj(w,h,n){with(this){key=w+"x"+h;if(n)name=n;width=w;height=h;}}
rdObj.prototype={key:"",name:"",width:"",height:""};
var n={},p='<width>x<height> <name>',rd=[];
while(p!=null){
p=prompt(p,JSON.stringify(rd));
if(/^(\d{3,4})[,x](\d{3,4})([, ](.+))?$/.test(p)){
n=new rdObj(RegExp.$1,RegExp.$2,RegExp.$4);rd.push(n);
}else{try{rd=JSON.parse(p);}catch(e){}}
}})()

Modified by cor-el

more options

huh??? what's the code for?

more options

You can use the JavaScript code to create a list of dimensions like jscher2000 posted above, i.e. 800x600 gives this code:

  • [{"key":"800x600","width":"800","height":"600"}]

You can use this as a bookmarklet or in the Web Console (Firefox/Tools > Web Developer;Ctrl+Shift+K).