Overview of Firebug
An interesting aspect of Firebug is its tight integration with Firefox. You can open Firebug within the browser or in a separate window. Using it within the browser places Firebug at the bottom of the Web page — a separate instance can be attached to different pages via separate tabs or windows. This allows you to work on more than one page at a time.
The interface has four tabs — HTML, CSS, Script, DOM, Net — that correspond to the various aspects of a page, as well as a Console for errors and log messages. You may select each tab to examine the corresponding page elements.
Working with code
The Firebug Console API provides the console variable that you may use in Web page code to generate debugging information as scripts execute. It includes a number of methods to assist with the debugging process, including log, trace, and debug.
The Net tab offers a look at the network activity associated with the associated page. It shows all of the downloads related to the page, as well as how long each resource took to download. Requests are color coded to identify those served from cache. Items are served from the cache in a lighter gray, so you can quickly scan and see how effectively your site is using the cache to optimize page load times.
A great aspect of open source projects is the contributions of other developers and companies. A good example is the Yahoo! Developer Network’s creation of a Firebug add-on called YSlow. It analyzes a Web site based on Yahoo!’s rules for high performance sites. Given the size of Yahoo!, the rules target larger sites with high traffic, but it may be useful for your application.
Don’t use Firefox?
It’s worth the effort
Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.
Check out the Web Development Zone archive, and read previous editions of Tony Patton’s column.
Get weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday. Automatically subscribe today!