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 looking for, you can do just about anything from within the HTML tab: dynamically edit the node's content, add an attribute, remove an attribute, reveal the corresponding CSS that styles a particular node, etc.

Figure A-4. The Inspect button at work

Take a few moments to get better acquainted with the inspection feature by exploring other aspects of the O'Reilly Network's main page. A particularly interesting activity includes modifying elements in the DOM tree and seeing the effects immediately take place in the browser. For example, Figure A-5 shows one of the graphics on the front page resized to be a little too wide. Again, just click on the HTML to modify the attributes of the various tags to see the changes take effect. You might also try adding a valid attribute to an element by selecting the DOM element and then clicking on the Edit button that appears whenever inspection is occurring.

Figure A-5. You can use Firebug to hack on the HTML in the page and see live results