Zachmann.NET
Get Firebugged? Yes!
Whether you want to tune up a Web site you built yourself or dive into the techniques used to build someone else’s site, Firebug lets you peer under the covers to understand how the site works.
Whether you want to tune up a Web site you built yourself or dive into the techniques used to build someone else’s site, Firebug lets you peer under the covers to understand how the site works.
What? Microsoft-oriented developers should add a free open source tool that only works with a free open source browser to their software toolkit? That's heresy! Are you crazy? Yup -- crazy like a Firefox.
Firebug is an excellent Web developer's tool. It's a free add-on that works only with the Firefox Web browser. It's generally thought of as a JavaScript editor and debugging tool, but it's really much more than that. It's such a good tool that even the most Microsoft-oriented developer with no immediate interest in JavaScript should get a copy and check it out. You'll be glad you did.
Inside Look
Firefox is, of course, the Mozilla Foundation's open source archrival to the Microsoft Internet Explorer Web browser. The application has been steadily gaining market share and today accounts for 18.4 percent of the browser market, according to the latest figures from Web metrics firm Net Applications. The Safari browser from Apple occupies 6.25 percent of the market, giving the two browsers nearly one-quarter of the total market.
It should be little surprise, then, that useful tooling for open source browsers is starting to emerge. Firebug is a superb add-on to Firefox that places a number of useful tools into your hands as a developer. It does many things that are still barely functional -- if at all -- in the beta 1 release of IE8.
Web 'Deconstruction'
The capability I most appreciate, personally, is Firebug's stunning array of tools to analyze and understand -- I'm tempted to say "deconstruct" -- Web pages.
Whether you want to tune up a Web site you built yourself or dive into the techniques used to build someone else's site, Firebug lets you peer under the covers to understand how the site works. And if you happen to use JavaScript, you'll find it an indispensable editing and debugging tool, as well.
If you don't already have Firefox 3 you can get the free download on the Mozilla Web site. You can find the Firebug beta for Firefox 3 there as well. Both install easily. Once set up, Firebug appears under the Tools menu in the Firefox menu bar. You'll also notice a Firebug status icon in the lower-right corner of the browser application window.
Exploring Firebug
Firebug can be opened in its default docked mode by clicking the icon, or you can open it from the menu via Tools | Firebug | Open Firebug. Either option opens the Firebug window in the lower half of the current page displayed in the Firefox browser. Multiple instances of Firebug can be opened as completely separate windows, allowing you to view it in a second display, for example.
Underneath the Firebug menu bar, which changes depending on the view selected, there are six tabs offering different views of the current Web page: Console, HTML, CSS, Script, DOM and Net.
Together these views provide a rich set of ways to view, analyze, test and debug any Web page. Console, Script and Net are disabled by default for better performance in normal Web browsing, but are easily enabled globally or for individual Web sites.
Different Views
HTML and CSS provide neatly indented, expandable, tree-structured views of the HTML and CSS structure, respectively, of the Web page. These are based upon the page as interpreted by the browser, not the raw HTML received from the server that would display in a simple View Source Code window on, for example, IE7. Only the top-level view shows initially on the left, along with -- for the HTML view -- a property inspector window with Style, Layout and local DOM tabs on the right-hand side.
The main DOM tab provides a Document Object Model of the entire page including everything but the kitchen sink. The Console tab shows script errors and messages and the Script tab lists all JavaScript files associated with the page. The Net tab view offers a graphical analysis of the HTTP traffic and loading times for all page elements.
In short, Firebug puts at your disposal an extremely powerful yet easy-to-use collection of tools for dissecting even the most complex and convoluted of Web pages. It helps you extract ideas that are useful to you so you can go on to build inspired sites of your own.
This is a fantastic tool that anyone developing or tuning Web-based code should examine. And the price is right -- it's free.
About the Author
William F. Zachmann, born before the modern digital computer was invented, has lived with them (and made his living off of them) all his life. He was director of research for The Forum Corp. in the mid-'70s and senior vice president of corporate research at International Data Corp. (IDC) in the '80s. He has a copy of Windows 1.0 that Bill Gates signed for him the night it was rolled out at Comdex Fall '85. Zachmann is now director of Canopus Research Inc. He programs in C# using Visual Studio 2005 with a focus on ASP.NET and SQL Server 2005.