DOM Inspector FAQ

How do I inspect a web site/window?

The File menu contains approaches which will allow you to inspect a document.

Inspect Content Document

Inspect content, e.g., unprivileged web pages loaded in a browser tab.

Inspect Chrome Document

Inspect application chrome, including open XUL windows, e.g., the browser window.

Inspect a URL

This just focuses the DOM Inspector's address bar, which allow you to inspect arbitrary documents which can be accessed via a URL. This causes the document to be loaded in the browser pane. These can include chrome documents, but it's not suggested that you inspect XUL documents by directly inspecting them via URL, since some behavior may rely on the document being contained in another XUL document, or the converse, where it won't behave correctly because it doesn't expect to be loaded as a framed document. Instead, get the XUL document to load as you normally would (e.g., by invoking commands or opening windows via standard application use), then locate it in the Inspect Chrome Document menu.

Why do some nodes in the Document DOM Nodes viewer appear in red?

These nodes are anonymous content nodes, meaning they are not in the DOM generated by the original document.

Okay, what if I don't want to see those anonymous nodes?

You can hide anonymous nodes in inspector by unchecking the View > Show Anonymous Content menu item.

I see a lot of empty #text nodes that I don't see in the original document. What are they, why are they there, and how can I get rid of them?

Those text nodes are actually the newlines and spacing between the elements. Please see bug 26179 for a lengthy discussion of why they are there.

The good news is, you can hide these whitespace nodes in inspector by unchecking the View > Show Whitespace Nodes menu item. Note that not all empty text nodes will be hidden. Those nodes whose white-space CSS property value prevents the user-agent from collapsing sequences of whitespace will not be hidden.

I'm having trouble finding a specific node in the DOM tree. Isn't there is a faster way to find it than navigating the tree?

Sure. You can do a search via the node's name, id, or an attribute/value pair. Choose the Find Nodes... menu item from the Edit menu in an inspector window that is inspecting the document you wish to search, and enter your search criteria there. The DOM Inspector's search uses JavaScript RegExps to find nodes for tag and attribute searches, and will do partial matching. For example, if you search nodes' tags for "tab", you'll get matches for tabpanel and tabbox as well as tab. To restrict the search, you can use the beginning-of-string and end-of-string markers; e.g., searching nodes for "^tab$" will return only nodes whose names are exactly "tab".

Or, if you do not know anything about the node, you can try to select it by clicking on it. Scroll the node into view, choose the select-by-click toolbar button, and then click on the element you wish to inspect. The Edit menu also includes a Select Element by Click menu item.

How do I inspect pseudo-classes and pseudo-elements in the CSS Rules viewer?

DOM Inspector allows you to force the :hover, :active, and :focus pseudo-classes to apply to a given node. From the DOM Nodes viewer, select the node and bring up the context menu. You should notice the Set Pseudo-classes menu item, which will allow you to set the content state for the aforementioned pseudo-classes.

There is currently no way to inspect dynamically-applied rules for other pseudo-classes or any pseudo-elements from the DOM Inspector UI. You can, however, find any rule in its parent style sheet (e.g., to modify it) by using the Style Sheets viewer in the document pane, and locating it in the CSS Rules viewer in the object pane.