Cool tool

I stumbled across a very handy Firefox extension this morning and wanted to share. Those of you who don't poke around in the innards of your blog templates and wouldn't know a <div> if it crawled up your leg and nipped you on the bum will not be interested.

When deconstructing an existing page layout on the way to putting it all back together using CSS, the biggest challenge often is figuring out how the existing document is organized. Sure, you can run the code through Tidy and hope the indents are right so that you can match closing tags with their mates, but it's an imperfect solution, especially for pages with a lot of content and multiple sub-sections.

That's where the View Source Chart extension for Firefox comes in. After downloading and installing this extension (written by Jennifer Madden), you'll be able to right click on a page and have View Source Chart display a hierarchical view of the entire document, complete with handy little boxes that give you visual cues as to what goes where. Even better, you can click on individual sections to collapse them and get them out of the way to make finding the higher level sections easier.

And, oh yes... it's free.