CODEWITHSUNDEEP
cssfirebug
Tabrez
Tabrez

Reputation: 3466

Tools for css troubleshooting

I use firebug and the web developer firefox addon for most css debugging. Both are excellent tools. However, when there are bunch of style sheets and custom rules involved, I am unable to use either tool to see the sequence of rules application by which the final property value was derived.

Let me share an example to illustrate the difficulty I am facing within these tools. On one page of my site, the font-size of a particular section is larger than others. Firebug shows me all the css rules that were applied to the element. It also shows me the rules that were discarded; these are shown with a strike-through. This is great! But to find out the exact class rule responsible for the larger font size, I have to scroll through all the styles until I can spot a font-size rule that has not been struck through. There does not seem to be a "search" function for the css panel (unlike the html panel).

How do you handle these situations? Is there a better tool out there? Or, is there some way to search for "font-size that has not been struck through" in the firebug css panel? This may not be a huge issue for some but in my case I believe I can save lots of time if I can get past this issue. Any help will be highly appreciated.

Thanks, Tabrez

Upvotes: 0

Views: 519

Answers (2)

ryankeairns
ryankeairns

Reputation: 808

Within Firebug, view the drop-down options under the 'Style' tab in the firebug window.

There is an option to 'Only Show Applied Styles'.

Upvotes: 1

zethus
zethus

Reputation: 349

If you're willing to change browsers, Google Chrome's Inspect Element feature (right click > inspect element) will tell show you both all matched styles (overridden ones crossed through) as well as just the computed style. It gives you a link to the line in the css file.

Upvotes: 1

Related Questions