Native Inspect Element tool won't display CSS/elements along right-side of window anymore.
I recently updated to Firefox 20.0 and noticed that the native Inspect Element tool doesn't have an option to display the page css elements along the right-side of the window like it used to. Is there a button somewhere I'm missing that allows this view?
I also noticed that I cannot hit escape to exit the inspector anymore. Why would this option have been removed?
Screenshot of the issue explained a little better... http://exceptionalsheet.com/error.jpg
All Replies (10)
Future Firefox versions will combine all web developer tools in one web developer toolbox because more tools will be added and opening all windows would reduce the screen estate available for the browser window to almost nothing.
You can only view one tool at the time (Web Console, Fonts, Inspector, etc.).
You will be able to dock this panel to the right side of the browser window in addition to the current position at the bottom and as an independent window that can be positioned anywhere to have the full screen for the browser page.
(screenshot of the current state in Firefox 23.0a1)
So basically until they add the ability to dock different panels users will be stuck with it all cramped in the toolbox window at the bottom?
You can still choose to open the toolbox in a separate window and resize and position the toolbox and browser windows as you like.
Previously I was able to do as the initial poster mentioned, CSS in a pane on the right, additional box on the bottom Very elegant, maximized scren space. Now it's a slapped on box that tells me how I should work. Not good at all.
The separate window is fine if you have the space. On a 19" screen, it's very inconvenient.
Can you please tell me the last version that did not have this new Inspect Element behavior? I'm guessing it's a week or so ago. Thanks.
Just bounced back to 19.0.2, infinitely better.
If you have one of the wider displays, you can put both the HTML and the CSS on the right by toggling this setting in about:config to enable the option on the Web Console toolbar. But as far as I can tell, no current support for the bottom+left view of earlier versions. Maybe an add-on could restore that option.
I can't imagine how this could pass any usability review when compared to the previous version. Luckily I have a wide enough monitor that I can open the HTML and CSS side-by-side but to see enough css at a time I have to drag the toolbox up to take up half of the browser.
The update to 20.0 didn't mention anything in the release notes about the inspector being drastically changed, unless "Continued performance improvements..." covers that. https://www.mozilla.org/en-US/firefox/20.0/releasenotes/
I hate down-grading, especially with the list of security fixes 20.0 came with. Guess I'll be switching to FireBug for my in-browser inspecting.
I agree with all the above - it's utter shite now. Before it was elegant and useful, now it's a waste of space.
How can I downgrade until those morons in your design department work this out?
Arathra,
You can down-grade / install an older version of Firefox through this page. https://support.mozilla.org/en-US/kb/install-older-version-of-firefox
Though, I would recommend switching to FireBug as the latest releases do not have the vulnerabilities that FF 19 did. As much as I hate FireBug, it's a lot easier to work with than the current native inspector with FF.
Thanks - I'm just installing firebug now. Personally I prefer the native tool but until it comes back as it was I just can't use it.