Courant Institute New York University FAS CAS GSAS

Debug CSS within your browser

Monday, July 14, 2008 - 4:05pm

While setting up my site I discovered the View formatted source extension for Firefox. What a killer extension when you're tweaking the styling of a site!

In the past when setting the style of a site I've run into the problem of "nothing happened." It's hard to tell at that point if (a) the selector statement I wrote didn't match what I was going for, (b) the style declarations I made have been overidden by something further down the cascade, or (c) the style declarations I've made simply have no effect in this browser.

The extension gives you a contextual (right-click) submenu. The "view formatted source" item shows you the document's HTML source, but the div's are collapsible so you can hide what you're not focused on. Hovering over an element pops up a list of the CSS declarations it matches, along with what files they come from. This completely takes care of diagnosing problems (a) and (b) above. (c) is another problem altogether, but I'm not sweating cross-browser issues at the moment.

Right now this extension hasn't been updated for Firefox 3. It does work with the current stable version of Flock, though.

have you tried firebug?

Thu, 06/25/2009 - 19:07
Apex Professionals (not verified)

Give firebug a shot. Great little plugin for firefox that gives you a ton of help with css. You can actually change the css on the page "temporarily" right from the plugin to see how it WOULD look if you made those changes to the actual .css file.

Apex Professionals LLC