Steve Fenton

<< June | July | August >>

Monday, 28th July 2008

It doesn't seem that long ago (although it probably was) that we had to write a couple of lines of JavaScript and then check everything still worked. Without a decent way of debugging JavaScript code, it was a case of staying as safe as possible, otherwise you'd end up with a scripting nightmare.

For that matter, detecting those little CSS issues that were making your page look terrible used to be a bit of a chore too.

I'm about to launch into the virtues of a couple of Firefox add-ons that change your life as a web developer. I realise that quite a few people already know about these, but not enough. I keep on finding people struggling with silly syntax errors or logical errors that could be solved in an instant if they knew about these two excellent utilities.

Firebug

Firebug is a combines JavaScript debugger and CSS debugger with knobs on. I'm not about to tell you everything it has, just a small portion.

Firstly, you can open the script tab (it docks in Firefox, so it's always there when you need it) and stick some breakpoints on your scripts, whether they are inline or in an external file. Then you simply refresh the page and start stepping through your JavaScript to find your issues!

For CSS, you can inspect any element on the page and view its CSS inheritance. Why has that link gone yellow and increased to a thousand pixels high? Why is my text suddenly right-aligned? Why does my complex floating layout resemble an explosion in a typeface factory? All these questions are answered in a jiffy. The layout option is particularly useful when it comes to working out why something isn't quite in the right place... ah yes, that margin it has inherited!

The bonus feature in FireBug is that you can make edits to the source of the page and see them appear instantly as if they were on the live site (but just for you of course).

Web Developer Toolbar

The web developer toolbar is just as massive as FireBug, so here's the quick rundown.

Turn CSS, JavaScript, Images, Cookies and more on and off from the menu bar. Find broken images, resize the browser, highlight specific elements (like links), replace the stylesheet with your own, validate your pages... the list goes on. This toolbar is the fast way of doing things you may already be doing manually.

Firefox Skeptics

I know that there are plenty of people who are perfectly happy with other browsers. The fact is, though, that as a web developer you really wouldn't be happy with them ever again once you've used these powerful tools.

Find out more information on the Firefox web site.