Being Blonde

Back when the web was young (and we all walked uphill through snow both ways to get to work) we web monkeys got by with good old “view source”. If a problem was extra-tricky we’d make a copy of that source and tinker till it worked.

Unfortunately nowadays just viewing the source doesn’t often help - sometimes all you get is two divs and a javascript call to work with… (which then goes on to use XMLHTTPRequest’s and the like to populate the page, generating the document on the fly, rebuilding entire sections by importing a google-maps-flash-GPS-mashup into a floating div… you get the idea)

So we need something better than just “view source”.

Enter Firebug:

This allows you to view the document structure in real time - even if it’s being changed constantly by a bit of Web 2.7 AJAX/Jif^[1] Magic. You can also see what styles are being imported from what stylesheets, you can right click and “inspect element” on the webpage and firebug will show you the appropriate bit of code.

Even better - you’re not just limited to looking at what the document is - you can tinker: add new elements, add attributes, change the styles (even with all these fancy toys, ‘border: 1px solid red;’ is still my favourite CSS debugging tool ;)).

After using firebug for a few hours it’s hard to imagine ever debugging a web page without it… and that’s its one problem…

See, Firebug only comes with Firefox - and unfortunately we poor web monkeys have to debug for IE6 and IE7 too (something to do with world+dog using IE still). Having played with Firefox and Firebug I’m now spoiled - I don’t want to look at that page in IE6 because I know something is going to be out of alignment and I’m going to have a much more painful time of tracking it down than if I could just Firebug it…

However, this morning in my inbox I have an email linking to an IE equivalent - the Internet Explorer Developer Toolbar. Its name isn’t quite so snappy and it doesn’t have all the handy network monitoring tools Firebug has (very useful when debugging some Flash apps), but it does let you view and tinker with the document and the stylesheets.

Hurrah!

So, my fellow web monkeys - if you’ve not discovered either of these tools yet - check the links below, they’re just too good to miss out on. Give it a day or two of using them and you’ll wonder how you ever lived without.

Firebug add-on for Firefox

The Internet Explorer Developer Toolbar

^[1] I can’t help it if people name the latest nifty web-fad after a popular brand of bleach can I? Give it five years and we’ll be talking about using “Toilet Duck” to empower “The Nappy Framework” or something.

This entry was posted on Monday, September 17th, 2007 at 11:57 am and is filed under Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.