DOM Inspector FAQ

  • Revision slug: DOM_Inspector/DOM_Inspector_FAQ
  • Revision title: DOM Inspector FAQ
  • Revision id: 57339
  • Created:
  • Creator: Sevenspade
  • Is current revision? No
  • Comment Mention the pseudo-classes dialog since Wladimir said he didn't know about it, and I've seen it asked about before. (http://www.glazman.org/weblog/dotclear/index.php?post/2010/10/01/help-needed-about-inDOMUtils-and-dynamic-pseudo-classes#c14244); 195 word

Revision Content

How do I inspect a web site/window?

  • Enter a URL into Inspector's URL bar, and hit Enter. Alternately, you can select the File > Inspect a Content Document menu item from within Inspector.
  • Or if you want to inspect an open XUL window, you can use File > Inspect a Chrome Document to select one.
  • To open an external URL, you can use File > Inspect a URL

These are applicable for Firefox 3.5+

Why do some nodes in the Document DOM Node View 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 Sheet viewer in the document pane, and locating it in the CSS Rules viewer in the object pane.

Original Document Information

  • Author(s): Christopher Aillon
  • Last Updated Date: November 11, 2003
  • Copyright Information: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | Details.

{{ languages( { "ja": "ja/DOM_Inspector_FAQ" } ) }}

Revision Source

<h2 name="How_do_I_inspect_a_web_site.3F">How do I inspect a web site/window?</h2>
<ul> <li>Enter a URL into Inspector's URL bar, and hit Enter. Alternately, you can select the <strong>File &gt; Inspect a Content Document</strong> menu item from within Inspector.</li> <li>Or if you want to inspect an open XUL window, you can use <strong>File &gt; Inspect a Chrome Document</strong> to select one.</li> <li>To open an external URL, you can use <strong>File &gt; Inspect a URL</strong></li>
</ul>
<p>These are applicable for Firefox 3.5+</p>
<h2 name="Why_do_some_nodes_in_the_Document_DOM_Node_View_appear_in_red.3F">Why do some nodes in the Document DOM Node View appear in red?</h2>
<p>These nodes are <a href="/en/XBL/XBL_1.0_Reference#Anonymous_Content" title="en/XBL/XBL_1.0_Reference#Anonymous_Content">anonymous content nodes</a>, meaning they are not in the DOM generated by the original document.</p>
<h2 name="Okay.2C_what_if_I_don.27t_want_to_see_those_anonymous_nodes.3F">Okay, what if I don't want to see those anonymous nodes?</h2>
<p>You can hide anonymous nodes in inspector by unchecking the <strong>View &gt; Show Anonymous Content</strong> menu item.</p>
<h2 name="I_see_a_lot_of_empty_.23text_nodes_that_I_don.27t_see_in_the_original_document._What_are_they.2C_why_are_they_there.2C_and_how_can_I_get_rid_of_them.3F">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?</h2>
<p>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.</p>
<p>The good news is, you can hide these <a href="/en/Whitespace_in_the_DOM" title="en/Whitespace_in_the_DOM">whitespace nodes</a> in inspector by unchecking the <strong>View &gt; Show Whitespace Nodes</strong> menu item. Note that not all empty text nodes will be hidden. Those nodes whose <code><a class="external" href="http://www.w3.org/TR/CSS21/text.html#propdef-white-space">white-space</a></code> CSS property value prevents the user-agent from collapsing sequences of whitespace will not be hidden.</p>
<h2 name="I.27m_having_trouble_finding_a_specific_node_in_the_DOM_tree._Isn.27t_there_is_a_faster_way_to_find_it_than_navigating_the_tree.3F">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?</h2>
<p>Sure. You can do a search via the node's name, id, or an attribute/value pair. Choose the <strong>Find Nodes...</strong> 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 <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/Core_JavaScript_1.5 Reference/Global_Objects/RegExp">JavaScript RegExps</a> 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 <a href="/en/XUL/tabpanel" title="en/XUL/tabpanel">tabpanel</a> and <a href="/en/XUL/tabbox" title="en/XUL/tabbox">tabbox</a> as well as <a href="/en/XUL/tab" title="en/XUL/tab">tab</a>. 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 <em>exactly</em> "tab".</p>
<p>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 <strong>Select Element by Click</strong> menu item.</p>
<h3> How do I inspect pseudo-classes and pseudo-elements in the CSS Rules viewer?</h3>
<p>DOM Inspector allows you to force the <a href="en/CSS/:hover" title="en/CSS/:hover">:hover</a>, <a href="en/CSS/:active" title="en/CSS/:active">:active</a>, and <a href="en/CSS/:focus" title="en/CSS/:focus">:focus</a> 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 <strong>Set Pseudo-classes</strong> menu item, which will allow you to set the content state for the aforementioned pseudo-classes.</p>
<p>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 Sheet viewer in the document pane, and locating it in the CSS Rules viewer in the object pane.</p>
<div class="originaldocinfo">
<h2 name="Original_Document_Information">Original Document Information</h2>
<ul> <li>Author(s): Christopher Aillon</li> <li>Last Updated Date: November 11, 2003</li> <li>Copyright Information: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li>
</ul>
</div>
<p>{{ languages( { "ja": "ja/DOM_Inspector_FAQ" } ) }}</p>
Revert to this revision