Firebug
26 Jan 2007
Maybe I've been living in the dark for ages and everyone else knew about it and didn't tell me, but Firebug is hella cool. Firebug is a Firefox extension that makes web development life worth not committing suicide over - and version 1.0 has just been released. It's like Web Developer Extension on steroids, although it's still useful to keep Web Developer around.
It has a Javascript debugger, which not only shows JS errors as you run, but allows you to pause execution with a breakpoint (optionally with conditions), and allows you to introspect values by hovering your mouse pointer over variables in the source code display. You can also execute arbitrary Javascript in a Javascript console. Oh, and watch your XMLHttpRequests as they occur.
In terms of HTML, it allows you to drill down to elements via the DOM or by using an inspector to choose the element you want by moving your mouse to the element. It lists the full element path to the element, and all the styles that apply to the element, and allows you to edit those styles - even if in multiple different files all over the Internet. You can also view and manipulate the style via the stylesheets without reference to a particular HTML element.
Oh, and you can graphically see exactly what files were requested for this page, when the requests started, and how long that request took to be fulfilled. And the headers sent in the request, and the headers returned. And the content. Useful for your XMLHttpRequests...
Colour me impressed.