Search code examples
firefoxresponsivefirefox-developer-tools

Why my firefox Responsive Design Mode view doesn't look like it does in MDN?

I don't know why my firefox Responsive Design Mode view doesn't look like it is presented in MDN ?

MDN view:

enter image description here

My view:

enter image description here

I am using firefox 53.0.2 on PC.

Solution

  • There are (at least) two preferences controlling whether the old Responsive Design Mode UI or the new one is shown:

    • devtools.responsive.html.enabled needs to be set to true => Directly controls whether the reworked UI is displayed.
    • browser.tabs.remote.autostart.2 needs to be set to true => Controls whether multi-process Firefox is enabled and the new RDM UI obviously doesn't work in single-process Firefox instances.
      To check whether the multi-process mode is enabled, go to about:support and ensure that the value at "Multiprocess Windows" says "Enabled".

    Those preferences can be changed via about:config.

    Note: Once you enable the multi-process setting, add-ons that don't support this feature like e.g. Firebug won't work anymore.