8

Firebug used to to display styles in the Computed panel like this, with computed styles grouped:

enter image description here

But for some reason it now displays computed styles like this:

enter image description here

The only grouping available is "Other" which appears to contain every CSS style. How do I make CSS styles group together?

I am using Firefox 46 with Firebug 2.0.16. The change began seemingly out of nowhere, I did not adjust any settings.

I have tried toggling every option in the dropdown menu. The value of the computedStylesDisplay setting is grouped (default value). I tried switching to alphabetical and then back to grouped but it changed nothing.

user1091949
  • 1,933
  • 4
  • 21
  • 27

2 Answers2

7

This is obviously a bug in Firebug in combination with Firefox 46.0. In Firefox 45.0.x it was still working fine.

I've filed a bug for that in Firebug's issue tracker and already fixed it. I have also created a build with that fix. Now it's up to the Firebug team to make a proper new release.

Note that the Firebug team is already working on Firebug 3, which integrates into the Firefox DevTools. Those tools don't have the grouping yet, but it's already requested in bug 977128.

Update:

Firebug 2.0.17 got released, which includes the aforementioned fix.

Update:

Firebug is officially discontinued, i.e. its maintenance has stopped in favor of pushing the development of the Firefox DevTools.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
  • I'm running Firefox 50.0.2 and Firebug 2.0.18 and still have this problem. – Richard Davies Dec 08 '16 at 16:25
  • It works for me in a fresh Firefox profile of Firefox 50.1.0 and Firebug 2.0.18 with [deactivated multi-process Firefox](http://stackoverflow.com/a/40748127/432681). Though, because [Firebug is now officially discontinued](https://getfirebug.com), I'm afraid, it may happen that it's broken again. I suggest you switch the sorting via the [*Computed* side panel's *Sort Alphabetically* option](https://getfirebug.com/wiki/index.php/Computed_Side_Panel#Options_Menu). – Sebastian Zartner Dec 19 '16 at 09:01
0

I've run into the same issue. It doesn't exactly solve the problem but what I've found helps at least a little is to click Options -> Show Quick Info Box. Gives a list of current applied styles to the element you're hovered over in the HTML console but unfortunately doesn't provide the original CSS reference line.

James
  • 36
  • 5