FireBug is the Swiss army knife of web development gadgets: an extension for Mozilla Firefox that allows you to debug, edit, and monitor any website’s CSS, HTML, DOM and JavaScript; it also provides other web development tools [1]. It permits the logging of web pages, page error reporting, page inspection, AJAX request logging, and to top it all off - Live Page Editing.

It has wound up being one of the most useful utilities that I have at my web page development/surfing disposal. One of its most useful tricks is the HTML inspector (view screenshot). If you are ever on a page, and are curious about the layout or inner workings of the HTML, just open up FireBug, click on Inspect->HTML and navigate your mouse to the section that interests you. FireBug will highlight the HTML code you are curious about, and you can look at it in all its raw markup glory. You can use this to easily find out how a nifty feature, or a design or layout works-or even to figure out a way around a pesky pop-up JavaScript link when you want to just send a link to someone.

In fact, one of my favorite uses is, when developing DOM interactive JavaScript, I can easily find an object within the entire document. And once it’s found, I can do all the nifty JavaScript manipulation I need.

Now, let’s say that page you’re dealing with is one that you control, or for which you can affect design decisions. You may not have the ability, time or patience to constantly make a change to the code, save it, reload the page, and do whatever various tasks it takes to update the page. And what if you were doing that on a live page and you made a mistake? That’s not a fun thing to fix. Well, once you use the inspector to find the piece of HTML you want to change, you can then click over to the Edit and make live changes to the HTML or the CSS. In this example I changed the size of the picture and added some bolding to one of the paragraphs. Tinkering with a live web page without ever touching the production code-now how fancy is that?

Once you decide on the changes you want to make, and roll those into production, FireBug will also notify you if there are any problems on the page. Green is good, red means that there is something wrong.

This is really a tool that you need to install, fire up and just start tinkering with. You can even take it beyond some of the hocus-pocus we’ve been discussing, and do some performance overviews. FireBug has a built in page performance monitor. With this you can keep an eye on the different aspects of your page, and the time it takes to load. Clicking on the Net tab and reloading the page will give you the stats for the individual components of the page load, and well as the total time to request the page (Performance Monitor Screenshot). You can also click on each request and see the headers of each item that was received. Outside of performance testing your own pages, these headers are a great way to see the cookies, AJAX requests and all the other dirty little details that have passed between the browser and the server.

Two of FireBug’s other exciting features are the ability to go through JavaScript code line by line. You can set up breakpoints and evaluate each step of the code execution, including editing, stack tracing, nested groups and assertions. Additionally, it helps remove one of the burdens of JavaScript development, the “alert debugging” and having to click OK multiple times per page to see how the variables are changing. With FireBug, you can log messages from JavaScript directly into the FireBug Console.

FireBug is the MacGyver tool for web developing, and so, as I said earlier, it really is a tool that you need to explore on your own. The way one person uses one of the tools can be completely different from how someone else works it into the testing and debugging routine. That is really what the power of FireBug is. Download it, explore it - it’s a great little extension that, at the bare minimum, will tell you whether or not a web page is broken!

[1] Wikipedia