Firebug – A Must Have for Web Developers

At the time when one of the early release versions of Firebug came out I was looking for a nice JavaScript debugger. Firebug looked promising and already polished. Somewhere around early December a friend of mine pointed me to the first Firebug RC. I was hooked. They made a weapon and it’s free. This is a MUST HAVE for every serious web developer!

HTML & CSS Tools
Firebug has an inspector for HTML and CSS that let you see, how an element of a web page is coded by just hovering it. Here it doesn’t only show the the direct responsible CSS code but also all code inherited. They do this in a very dynamic and interactive way that you have to see.

JavaScript Tools
JavaScript support in Firebug is close to perfect. You get a full featured debugger including watch statements, normal and conditional breakpoints, single step debugging or break on the first error. Additionally it lets you profile your JS code and logging calls to any function in your code.

DOM Explorer
To help you navigate inside your code Firebug provides a good DOM explorer that let you change values even including autocompletion.

Network Monitoring
To give you a further look behind the curtain Firebug has a build in network monitor that let you see e.g. how long each file takes to load and which files are already cached. It also gives you monitoring of XMLHttpRequest calls and let you examine HTTP headers.

Firebug in other browsers
Next to version 1.0 they released a lite cousin of Firebug that can also be used in other browsers than Firefox eg in Internet Explorer. Here you can find download and installation instruction for Firebug Lite.  Once you get knee deep into Firebug be sure to check out Joe Hewitt’s expert level introduction: Joe Hewitt: “Welcome to Firebug 1.0” Firebug and Web Developer Toolbar. I wish I had these ten years ago.