Designer’s Toolbelt: Firebug
Firebug is a free, open source add-on for Firefox, and nobody who does web work should be without it. Regardless of which tools you use for generating HTML, CSS, and JavaScript, Firebug is what you need for troubleshooting and validation.
Firebug adds a pane at the bottom of the browser window that can be easily opened and closed. It can also be opened in a separate window. This pane provides a wealth of information about the page being viewed. It provides the source HTML in a hierarchical tree. Move the cursor over any element within the code, and Firebug highlights it in the page. Likewise, when the “Inspect” mode is turned on, hovering over an object in the page will result in the corresponding code highlighting below. Click anywhere in the code to insert a cursor—changes are displayed immediately in the page.
At the same time, Firebug is also listing styles for the highlighted object, indicating those that are being cancelled out and in which stylesheet they reside. The CSS is also editable. You can view measurements for offsets, margins, borders, paddings, and sizes of each object. Troubleshoot layout issues by turning styles on and off, watching the page change in real time.
Firebug also includes a JavaScript debugger. I don’t write JavaScript myself, but the developers I work with swear by it. You can pause script execution, set breakpoints, and watch expressions. It provides useful error reporting about JavaScript, CSS, and XML. You can view the DOM, easily finding, and yes, editing objects. Or, if you require it, you can use a built-in console for command line JavaScript execution. Finally, you can use Firebug to monitor the performance of your page through a graph showing when each item was loaded and how long it took.
Firebug is an extremely robust tool. Whether you are a designer that primarily works on the visual design, a developer that does the heavy coding, or somewhere in-between, Firebug is a lifesaver. Even when my team is working on an application that will only be used in Internet Explorer, it is easier for us to develop using Firefox with Firebug, and then work out the IE-specific quirks later.
