4

I've been a Firebug user for a long time. My Firefox got updated to 51 very recently and I started having problems with Firebug soon.

On visiting the Firebug page, I found that it is no longer being developed which came as a shock to me.

Now in order to move on, I decided to use the Web Developer Tool (WDT) that comes built in with Firefox. But there seems to be one thing missing in it.

In Firebug inspector, when I select an element on the page, there used be an option called as "Show only applied styles" or something similar. This seems to be missing in the WDT and it's ugly to see all the crossed out CSS styles in the panel.

Is there a way to have that feature in WDT?

Firefox

asprin
  • 855

3 Answers3

2

The Firefox DevTools do not offer that feature at the moment (as of Firefox 51.0.1). Therefore I have created a bug report asking for it.

Also, I have added a note to the Firebug users migration guide.

Sebastian Zartner
  • 867
1

No such option exists. However, you can use Computed tab to display only applied styles.

To do that, you need to somehow edit or overwrite (for example, to display: none) default Firefox Developer Tools styles:

In file /devtools/client/themes/rules.css there is (line 423):

.ruleview-overridden {
  text-decoration: line-through;
}

line 268:

.theme-firebug .ruleview-overridden .ruleview-propertyname,
.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
  text-decoration: line-through;
}

This article also may be helpful.

Hex
  • 1,352
0

If you need to save only the applied styles, this can be done in Chrome using Chrome Developer Tools (tutorial here). But if you want a Firefox solution, you can save the page as a single .html file, and then take just the CSS from within that file.

To do that, first get the Firefox version of the add-on SingleFile

After installing SingleFile, you can download the page as an .html file, and copy the CSS inside the <style> tag.

It will be minified, so you will probably want to unminify it using a tool like Unminify.com

People trying this should be aware that just because a style is not applied, doesn't mean it is necessarily "unused". There could be a script somewhere that will try to append a certain style to an element, but if it is not applied at the time of capture, SingleFile (or Chrome Dev Tools) will not include it. Caveats like that... But for isolating specific chunks of webpages and grabbing their rulesets, this approach can be useful.

Mentalist
  • 213