Dojo: The Definitive Guide

HTML and CSS

You should be fairly comfortable investigating the HTML and CSS tabs because you encountered the same content during your earlier escapade with the Inspect button. Still, a somewhat subtle feature worth pointing out is that you can right-click on items in either of these tabs to reveal a contextual menu with several useful options in it. Among these options are the ability to scroll the page to the element of interest, log events related to the element, directly modify the element, and so on.

A superset of the same content that appears under the CSS tab also appears in the HTML tab if you select the underlying Style tab, included in a pane on the right. Note that you can directly change the style of elements through the CSS tab, as shown in Figure A-8, or through the HTML tab. You can also click on a style element to disable it in the page depending what is most helpful for your particular situation. And wait, there's more: the Layout tab that's adjacent to the Style tab displays the active properties for the currently selected element's padding, borders, margins, and offset. As might be expected, you can preview changes to these properties by changing the values directly in the diagram.

Figure A-8. Top: disabling elements; middle: Firebug's Layout ruler; bottom: manipulate the layout of a DOM element's margin, or anything else for that matter (this example shows the upper ...