Firefox extension to display inheritance from browser defaults?

Question

There are times when looking at a computed style in Firebug, it's not evident how a value is computed or what its origins are. In some situations, the source is the browser's default. In web sites that are already constructed, it's not feasible to inject a css reset which will result in breaking all the pages.

Is there a way in Firebug, Web Developer or another extension to display an inheritance structure all the way to the browser's default including displaying the value of the default?

Answer 1

Click on the down arrow on the Style tab in the right panel of Firebug. Uncheck "Show Computed Style" and check "Show User Agent CSS".

The blue filename next to each selector is the CSS file where the selector is defined. The Firefox default CSS file is called html.css and its location (when you hover over it) is resource://gre/res/html.css, that's how you know it is the browser default.

Answer 2

Turn off Show Computed Style.

It then breaks it down by declarations and classes and Browser Defaults. It is that little arrow when you hover over Style.

Also, Turn on 'Show User Agent CSS'.