Debugging CSS: My Best Productivity Tip Ever

Firebug keeps surprising me. I’ve recently been working on code for several web designs and this little trick helped me to understand existing HTML and CSS much faster. Just to give an example I use our Justaddwater RSS feed page (but could be any page).

Before you start, get Firebug for Firefox (if you haven’t got it already).

  1. Press F12 and the Firebug window appears below in the browser window
  2. Start the HTML inspector and mouse over any element, you want to learn about.
    firebug-css-tip-start-html-inspector-thumb.png
  3. Now, you can see the HTML, the hierachy,and the CSS rules. For me it has been very useful, that overridden CSS rules are marked with strikethrough text. That’s a very handy information when CSS specificity plays in with a trick or two.
  4. Press escape to stop inspector mode, and move mouse down to CSS rules.
  5. Mouse over the CSS rules reveal a small icon to toggle the line. See screenshot animation below.

firebug-css-bugfix-toggle.gif

This trick will probably completely replace my use of “edit CSS” in Webdeveloper toolbar, the nifty CSSViewer add-on, and the mouseover DOM inspector bookmarklet.

Related info:

Technorati Tags: , , , , , , , , , ,

9 Responses to “Debugging CSS: My Best Productivity Tip Ever”

  1. Jermayn Parker Says:

    Yeah this little handy tool has saved me I dont know how many hours of fiddling around and guess work, it does have a bit of a deap learning curve though which would be my only thing against the tool….

  2. Bubbila Says:

    Sweet tutorial, just what I have been looking for.

  3. Alice Says:

    I just love Firebug, any web developer/designer must have it! There is a similar product that runs on IE, it might help as well if you need to debug IE specific css weirdness, but the IE plugin is nothing closer to Firebug. I <3 Firebug!

  4. Nadz Says:

    This is great advice. I tend to use Firefox Extension – Aadvark to point out CSS elements. But now with your advice, I can actually see the code!

    Thanks a lot!

  5. WEB 3.0 » Blog Archive » ¿Así que querías saber de CSS? Says:

    […] Debugging CSS: My Best Productivity Tip Ever – Jesper Ronn-Jensen […]

  6. Find hurtigere fejl i din CSS kode | CHEW.dk Says:

    […] http://justaddwater.dk/2007/04/30/debugging-css-my-best-productivity-tip-ever/ Skrevet af Mads Konradsen   @   7 January 2010 0 kommentarer Tags : CSS , […]

  7. marx Says:

    This is my first time I heard about fire bug- at first a little confused following your steps, it took me almost a day before I get it! But it really works, I’m have it! Thanks a lot for this post. I look forward to reading your another post!

  8. Wyrdbeard Says:

    Excellent run-through. Many thanks.

  9. Cascading Style Sheets Reference Links | kabayview.com Says:

    […] Debugging CSS: My Best Productivity Tip Ever – Jesper Ronn-Jensen […]