Firefox devtools: can't turn responsive design mode on
Suddenly Firefox doesn't react neither on pressing Ctrl+Shift+M, nor on pressing "responsive design mode" button on the toolbar. The button looks like the mode is already on (but it's not) and it doesn't react on mouse clicks. Tools -> Web Developer -> Responsive Design Mode is also of no good.
What's wrong and how can I fix it?
(Firefox is up to date. The problem wasn't the case right after the last update and appeared suddenly.)
All Replies (10)
Do you see any error messages in the Browser Console?
No, I don't. I checked all items in all submenus I could (I mean "Net", "CSS", "JS" and so on), but I only see some error messages from site's CSS and a lot of other info, but nothing of it seems related to developer tools itself. When I click on "responsive design mode", nothing bumps up in the browser's console.
(I'm certain that I'm viewing namely browser's console. I opened it using Ctrl+Shift+J)
Does it make a difference whether multi-process is enabled or disabled?
See the "Help -> Troubleshooting Information" page under Application Basics: Multiprocess Windows for details.
You can disable multi-process windows in Firefox by setting these prefs to false on the about:config page.
- browser.tabs.remote.autostart = false
- browser.tabs.remote.autostart.2 = false
You can open the about:config page: via the location/address bar. You can accept the warning and click "I'll be careful" to continue.
It says "Multiprocess Windows 0/1 (Disabled by add-ons)" and it doesn't change when I toggle both browser.tabs.remote.autostart settings. Doesn't affect the initial issue as well.
I reinstalled the Firefox, the problem remains.
Maybe it's somewhere in the profile folder. Where do devtools store their cache, state or something?
I've noticed that when I press Ctrl+Shift+M the scrolling bar becomes "mobile" (thinner, trasparent, round borders). Nothing else changes, though. And I can't revert it pressing Ctrl+Shift+M again. Even page reload doesn't work.
UPDATE: I created new blank profile and there devtools work properly. The question is now how do I make them work on my existing profile.
Modified by 1234ru
I found some kind of solution.
Examining devtools* setting in about:config I've noticed that settings' names in new profile differ from the ones in the old one. In particular, there is no settings named devtools.responsiveUI.*, except of one. I deleted all those settings in old profile and now it works!
Basically, the problem is responsiveUI version in old profile and in a new one somewhy differs significantly, and Firefox's update didn't help with it (although it should, as devtools are core part of Firefox itself (as far as I know) and should be updated for all profiles). For example, in old profile I still don't have network throttling tools etc.
Note that there are two different RDM versions. The 'classic' version (black background) that is used when multi-process is disabled and a new version that is used when multi-process is enabled and that is centered and has a white background and has the device selector. I don't know what prefs are used by both versions, but there could have been a conflict.
I normally only see scroll bars when I drag the mouse in the location where the scroll bar should be.
That makes sence. I want to test it. How do I enable/disable multi-process?
You can check "Multiprocess Windows" to see the current state.
- "Help -> Troubleshooting Information" -> Application Basics: Multiprocess Windows
When multi-process is enabled and the first number is not zero (1/1) then you get the new design. You can disable multi-process by toggling the opt-in pref to false on the about:config page with a double-click to see the old design.
- browser.tabs.remote.autostart.2 = false
You need to close and restart Firefox to make the change effective.