Firebug is an Extension for Mozilla Firefox which allows the debugging, editing, and monitoring of any website's CSS, HTML, DOM and JavaScript, and provides other web development tools[1]. Really, this is the swiss army knife of web development gadgets. It allows for the logging of web pages; JavaScript Debugging; page error reporting; page inspection, AJAX request logging, and to top it all off - Live Page Editing.
This is really a tool that you need to install, fire up and just start tinkering with it. For me, it winds up being one of the most useful utilities that I have at my web page development/surfing disposal.
The one trick that I use the most is the HTML inspector (view screenshot). If you are ever on a page, and are curious of the layout or inner workings of the HTML, just open up Firebug, click on Inspect->HTML and navigate your mouse to the section you are interested in. Firebug will highlight the HTML code of inquiry, and you will see it in all its raw markup glory. You can use this to easily find out how a nifty feature, design or layout work. Or 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 out where an object lies within the entire document. From there, I can do all the nifty JavaScript manuipulation I need.
Now, let's say that the page is one that you control, or have the ability to affect design decisions. You may not have the ability, time or patience to continually make a change to the code, save it, reload the page, and do whatever various tasks it takes to update the page. And then, 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 click over to Edit and make live changes to the HTML or the CSS, As in this example I changed the size of the picture and added some bolding to one of the paragraphs. Now how fancy is that? Tinker with a live web page without ever touching the production code.
Once you decide on some changes, and roll those into production, FireBug willl also notify you if there are any problems on the page. Green is good, red means that there is something wrong.
We can even take it past some of the hocus-pocus that we have been discussing, and get to some performance overviews. FireBug has a built in page performance monitor. With this you can watch 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, as 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 itme that was recieved. Outside of performance testing your own pages, these headers are a great way to see cookies, AJAX requests and all the other dirty little details that the browser and server are communicating.
Two other exciting features are the ability to step 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 bears of JavaScript development, the "alert debugging" and having to click OK multiple times per page to see how variables are changing. With FireBug, you can log messages from JavaScript directly into the FireBug Console.
As I said earlier, this is a tool that you really need to explore for yourself. Its the MacGyver tool for web developing. The way one person uses one of the tools, can be completely different than how someone else works it into the testing and debugging routine. That is really the power of FireBug. Download it, explore it - it's a great little extension that at its bear minimal tells you when a web page is broken or not!
[1] Wikipedia
Christopher McKeever
cmckeever@realtors.org |
