Three Cheers for Firefox’s “Web Developer”

Wow. If you ever have to spend time writing HTML or CSS, have I got a treat for you. Check out the Web Developer Extension written by Chris Pederick.

This thing is great because it lets you reveal the structure of your page, including anchors, blocks, deprecated elements, image meta-data, edit the CSS of a page, validate HTML, CSS, and other characteristics, and make good choices about accessability. It also includes handy buttons which take you to the relevant standards. It’s thoughtfully organized, and has attractive, colorful icons.

Probably the two features which really made my jaw drop are Display Topographic Information which re-renders your page to show you the level of nesting using topographic-map style colors; and View Style Information, which converts your mouse cursor to a crosshair. As you mouse over different page elements,
it shows you the “path” to the object. So on this page, when you mouse over The View from the Moon in the title, you see:

html > body > table > tbody > tr > td.title > div > div.website_title

in the status bar. Clicking on the element pops up a new tab which contains the style information
pertinent to that element. So if you ever wondered “how did they do that?” or “what do I have to do to the CSS to affect this element?” it’s now trivial to figure out.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s