Inspector Clouseau: Firebug UI

Basic UI

When Firebug opens, you'll be presented with an interface very similar to the following image. Firebug employs tooltips liberally, which makes it pretty easy to figure out what things on the interface do. However this page will explain some useful things that may perhaps be less obvious.

The previous is the console tab. This is were all JavaScript errors and various warnings are presented. The button enables a small portion of the bottom of this tab to be presented at the bottom of any other tab, should you need it. This is occasionally useful.

Search Box

This is an important and useful feature worth noting because it behaves differently depending on which tab you are viewing! For most tabs, the search box will highlight the current match and move to the next with the arrow buttons. Hitting enter will also take you to the next match, and shift + enter to the previous. In the console tab the output is filtered so only items matching what was entered are showing. When viewing the HTML tab you can also find things by selector in addition to the usual text snippet matching across all tags, attributes, and content. The placeholder text in the search box gives an idea what it searches over in any context.

To learn more about the next tab continue to the HTML section or return to the main article.