Firebug is a highly popular plugin for Firefox. So popular, that many people swear by it, claiming that it's unimaginable how development of scripted web pages (HTML, CSS, Javascript) could be done without it.
Yesterday I joined the crowd. I've installed Firebug a long time ago, and it looked kinda useful but I didn't have any real use for it. Last night I wanted to analyze a web page in a Perl script - the page is a complex mishmash of divs and tables, and getting the interesting information out of it isn't trivial.
Firebug to the rescue ! A small click on the right hand side of the Firefox screen, Firebug opens in its own pane. The HTML tab shows the HTML source of the page currently viewed as a tree, one you can browse (and, if such a need arises, edit on the fly!) The best part of it, however, is that as you hover the mouse over some node of the tree, Firebug "shows" the part of the screen it represents - by flashing a semi-transparent blue background. This is just brilliant ! Such a simple and intuitive way to understand the structure of a webpage.
But this is probably one of the most basic uses of Firebug. The tool also allows to view the CSS of the page, analyzing the CSS style used for each tag. And the best thing - it shows all the CSS styles that affect it and displays the style inheritance. No more manual browsing of CSS, trying to understand what affects what. While I used Firebug only to analyze a webpage, I'm sure that it's even more useful when building one. Such clear and intuitive interface for analyzing and manipulating HTML and CSS should make webpage design a breeze.
Firebug isn't done yet, though. Its probably most advanced function is interaction with the Javascript code embedded in the page. Firebug allows to visually debug and trace Javascript scripts, and displays the DOM representation of each element in a clear, hierarchical way. It also computes the loading time of each page, completing an amazing toolbox for creating rich AJAX-enabled websites.
Some tools just feel right. Firebug is one of them, highly recommended.
And oh, by the way, if we are on the topic of HTML analysis, Perl's
HTML::TreeBuilder is an excellent module that makes hierarchical analysis of a HTML website easy, intuitive and powerful. I find the
look_down method especially useful for intelligently analyzing the content of a page.
Eli Bendersky's website