I thought I’d start a new category of “tools” on this blog, where I’d share some of the tools and applications that I use in my work. Today, I have two web troubleshooting tools I’d like to mention.

Web Developer Extension

The Web Developer Extension, a Firefox (and Mozilla and Flock) extension written by Chris Pederick, has been around for a while, and is very well-known among people who create web pages, but it is so useful, I thought I’d risk it being old news. Besides, it just reached the milestone of a 1.0 release.

The extension installs a toolbar and a right-click (or ctrl-click) pop-up menu. The pull-down menus on the toolbar will give you an extraordinary amount of information on the page you are viewing: outline images without alt attributes; outline all table cells; show CSS ID and class names right on the page; disable all CSS (good to reveal a page’s structure, or just to nuke a gawdawufl design “choice”); view style information (turns the cursor into a crosshairs; click on the element of your choice and see all the styles applied to it).

But the coolest thing is it lets you edit the CSS (and now the HTML) in a sidebar and view the results in real time. Want to see what your site would look like if you changed the font for your headers? Don’t change the actual stylesheet–just load the page, make the change in the “Edit CSS” sidebar, and see what happens immediately. Too cool.

XHTML Validator to RSS

Karen A. Coombs’ post, Bad Code, on Library Web Chic is about trying to maintain valid XHTML and live up to the little W3C validator button she has on one of her sites. (If you don’t know what “valid” means in this context, try Why Validate? from the W3C.)

I started to think about that, and realized what I really wanted was an RSS feed for the validation results of the See Also home page.

A little Googling found me Ben Hammersley’s XHTML Validator to RSS, which does exactly that. It couldn’t be much simpler: add the URL you want to track to http://www.benhammersley.com/tools/validate.cgi?url= and subscribe. Every time the feed is fetched, the validator runs; if there’s an error, you get a message in your feed.

I tried it today by putting an innocuous little bit of invald code on the home page (a <br> instead of a <br />) and the next time I reloaded the feed I had the error messages right there in NetNewsWire. Neat!