Courant Institute New York University FAS CAS GSAS

Reply to comment

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.

Reply

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <img>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <perl>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Twitter-style @usersnames are linked to their Twitter account pages.
  • Twitter-style #hashtags are linked to search.twitter.com.

More information about formatting options