Dojo: The Definitive Guide

Inspect

Notice the colorful Firebug icon in the upper-left corner of the Firebug pane. In addition to being a nice decoration, it also doubles as a button that reveals a menu fairly similar to the one in the Tools menu. The remaining items in the row—Inspect, Clear, and Profile—are also buttons. Let's start with the Inspect button.

The Inspect button allows you to instantly locate any element in the DOM tree by hovering over it in the browser window, which is really helpful when you're trying to troubleshoot a particular part of a complex layout or search for a needle in a haystack. Click on the Inspect button, shown in Figure A-4, so that it becomes depressed. The main menu provides all of the representative main menu items and is always located in the upper-left corner. The Inspect button, always beside it regardless of the selected tab, is incredibly handy and one of the most common features you'll probably find yourself using. Watch as Firebug switches to the HTML tab and displays the corresponding HTML and CSS as you hover over various elements on the page. The corresponding HTML pertinent to the currently hovered-on item is highlighted in the HTML tab so that you can easily inspect the entire element and its context.

Clicking the hovered element in the page causes the corresponding content in the HTML tab to become highlighted and the scrolling ceases so that you can take control of your mouse again without losing your place. Once you've located the particular DOM element you're ...