DOM inspector viewers

You can use the DOM nodes viewer in the document pane of the DOM inspector to find and inspect the nodes you are interested in. One of the biggest and most immediate advantages that this brings to your Web and application development is that it makes it possible to find the mark-up and the nodes in which the interesting parts of a page or a piece of the user interface are defined.

One common use of the DOM inspector is to find the name and location of a particular icon being used in the

user interface, which is not an easy task otherwise. If you’re inspecting a Chrome document, as you select nodes in the DOM nodes viewer, the rendered versions of those nodes are highlighted in the user interface itself. Note that there are bugs that prevent the flasher from the DOM inspector APIs that are working currently on certain platforms.

If you inspect the main browser window, for example, and select nodes in the DOM nodes viewer, you will see the various parts of the browser interface being highlighted with a blinking red border. You can traverse the structure and go from the topmost parts of the DOM tree to lower level nodes, such as the ‘search-go-button’ icon that lets users perform a query using the selected search engine.

The list of viewers available from the viewer menu gives you some idea about how extensive the DOM inspector’s capabilities are. The following descriptions provide an overview of these viewers’ capabilities: 1. The DOM nodes viewer shows attributes of nodes that can take them, or the text content of text nodes, comments and processing instructions. The attributes and text contents may also be edited. 2. The Box Model viewer gives various metrics about XUL

and HTML elements, including placement and size. 3. The XBL Bindings viewer lists the XBL bindings attached to elements. If a binding extends to another binding, the binding menu list will list them in descending order to “root” binding. 4. The CSS Rules viewer shows the CSS rules that are applied to the node. Alternatively, when used in conjunction with the Style Sheets viewer, the CSS Rules viewer lists all recognised rules from that style sheet. Properties may also be edited. Rules applying to pseudoelements do not appear. 5. This viewer gives a hierarchical tree of the object pane’s subject. The JavaScript Object viewer also allows JavaScript to be evaluated by selecting the appropriate menu item in the context menu. Three basic actions of DOM node viewers are described below.

Selecting elements by clicking: A powerful interactive feature of the DOM inspector is that when you have it open and have enabled this functionality by choosing Edit > Select Element by Click (or by clicking the little magnifying glass icon in the upper left portion of the DOM Inspector application), you can click anywhere in a loaded Web page or the Inspect Chrome document. The element you click will be shown in the document pane in the DOM nodes viewer and the information will be displayed in the object pane.

Searching for nodes in the DOM: Another way to inspect the DOM is to search for particular elements you’re interested in by ID, class or attribute. When you select Edit > Find Nodes... or press Ctrl + F, the DOM inspector displays a Find dialogue that lets you find elements in various ways, and that gives you incremental searching by way of the <F3> shortcut key.

Updating the DOM, dynamically: Another feature worth mentioning is the ability the DOM inspector gives you to dynamically update information reflected in the DOM about Web pages, the user interface and other elements. Note that when the DOM inspector displays information about a particular node or sub-tree, it presents individual nodes and their values in an active list. You can perform actions on the individual items in this list from the Context menu and the Edit menu, both of which contain menu items that allow you to edit the values of those attributes.

This interactivity allows you to shrink and grow the element size, change icons, and do other layout-tweaking updates—all without actually changing the DOM as it is defined in the file on disk.