3.3. Inspecting elements with DOM Inspector [Dive Into Greasemonkey]

3.3. Inspecting elements with DOM Inspector

DOM Inspector allows you to explore the parsed document object model (DOM) of any page. You can get details on each HTML element, attribute, and text node. You can see all the CSS rules from each of the page's stylesheets. You can explore all the scriptable properties of an object. It's extremely powerful.

DOM Inspector is included with the Firefox installation program, but depending on your platform, it may not installed by default. If you don't see DOM Inspector in the Tools menu, you will need to re-install Firefox to get DOM Inspector. This will not affect your existing bookmarks, preferences, extensions, or user scripts.

Procedure: Install DOM Inspector

Run the Firefox installation program.
After accepting the licensing agreement, select Custom install.
After selecting the destination directory, the installation wizard will ask you to choose additional components you want to install. Select Developer Tools.
After the installation is finished, run Firefox. You should see a new menu item, Tools → DOM Inspector.

To get a sense of how powerful this tool really is, let's take a tour of the DOM of Dive Into Greasemonkey's home page.

Procedure: Inspect and edit the Dive Into Greasemonkey home page

Visit http://diveintogreasemonkey.org/.
From the menu, select Tools → DOM Inspector to open DOM Inspector.
In the DOM Inspector window, you should see a list of DOM nodes in the left-hand pane. If you don't, open the dropdown menu in the upper-left corner and select DOM Nodes.
The DOM node tree always starts with the document element, labeled #document. Expand this to reveal the HTML element.
Expand the HTML element to reveal 3 nodes: HEAD, #text, and BODY. Note that BODY has an id of diveintogreasemonkey-org. Adjust the column widths if you don't see this.
Expand BODY to reveal 5 nodes: #text, DIV id="intro", #text, DIV id="main", and #text.
Expand DIV id="intro" to reveal 2 nodes: #text and DIV class="sectionInner".
Expand DIV class="sectionInner" to reveal 2 nodes: #text and DIV class="sectionInner2".
Expand DIV class="sectionInner2" to reveal 5 nodes: #text, DIV class="s", #text, DIV class="s", and #text.
Expand the first DIV class="s" to reveal 5 nodes: #text, H1, #text, P, and #text.
Select the H1 node. On the original page (behind DOM Inspector), the H1 element should briefly flash a red border. In the right-hand pane, you should see the node name (“H1”), namespace URI (blank, since HTML does not have a namespace -- this is only used on pages served as application/xhtml+xml, or pages displaying XML in some other namespace), node type (1 is an element), and node value (blank, since headers do not have a value -- the text within the header has its own node).
In the dropdown menu at the top of the right-hand pane, you will see a number of choices: DOM Node, Box Model, XBL Bindings, CSS Style Rules, Computed Style, and Javascript Object. These provide different information about the currently selected node. Some of them are editable, and changes are immediately reflected on the original page. Select Javascript Object to see all the scriptable properties and methods of the selected H1 element.
Select CSS Style Rules. The right-hand pane will split into two panes, the top showing a list of all rules that affect the element (including default rules built into the browser itself), the bottom showing individual properties defined by those rules.
Select the second rule from the top-right pane, the style rules defined by the stylesheet at http://diveintogreasemonkey.org/css/dig.css.
Double-click the font-variant property from the bottom-right pane and enter a new value of normal. In the original page (behind DOM Inspector), the “Dive Into Greasemonkey” logo text should immediately change from small-caps to normal uppercase and lowercase letters.
Right-click (Mac users control-click) anywhere in the bottom-right pane and select New Property. A dialog will pop up titled “New Style Rule”. Enter a property name of background-color and click OK, then a property value of red and click OK to apply the new property. The new property and value should show up in the bottom-right pane along with the existing properties, and the logo text in the original page should immediately change to a red background.

If clicking through each level of the DOM node tree is not your idea of a good time, I highly recommend the Inspect Element extension, which allows you to drill directly to a specific element in DOM Inspector.

You must install DOM Inspector before installing the Inspect Element extension, otherwise Firefox will crash on startup. If this has already happened to you, open a command line window, navigate to the directory where you installed Firefox, and type firefox -safe-mode. Firefox will start up without loading extensions, then select Tools → Extensions and uninstall Inspect Element.

Procedure: Directly inspect an element with Inspect Element

Visit the Inspect Element download page and click Install Now.
Restart Firefox.
Revisit http://diveintogreasemonkey.org/.
Right-click (Mac users control-click) on the logo text, Dive Into Greasemonkey.
From the context menu, select Inspect element. DOM Inspector should open with the H1 element already selected, and you can immediately start inspecting and/or editing its properties.

DOM Inspector does not “follow” you as you browse. If you open DOM Inspector and then navigate somewhere else in the original window, DOM Inspector will get very confused. It's best to go where you want to go, inspect what you want to inspect, then close DOM Inspector before doing anything else.

Dive Into Greasemonkey