DOM Inspector FAQ

  • Revision slug: DOM_Inspector/DOM_Inspector_FAQ
  • Revision title: DOM Inspector FAQ
  • Revision id: 57334
  • Created:
  • Creator: Sevenspade
  • Is current revision? No
  • Comment fix deki conversion mangling; no wording changes

Revision Content

How do I inspect a web site?

Enter a URL into Inspector's URL bar, and hit Enter. Alternately, you can select the File > Inspect a URL menu option from within Inspector. Or if you want to inspect an open XUL window, you can use File > Inspect a Window to select one.

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 Search > Find Nodes... menu item in an inspector window that is inspecting the document you wish to search, and enter your search criteria there.

Or, if you do not know anything about the node, you can try and select it by clicking on it. Scroll the node into view, choose the Search > Select Element By Click menu item, and then click on the element you wish to inspect.

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?</h2>
<p>Enter a URL into Inspector's URL bar, and hit Enter. Alternately, you can select the <strong>File &gt; Inspect a URL</strong> menu option from within Inspector. Or if you want to inspect an open XUL window, you can use <strong>File &gt; Inspect a Window</strong> to select one.</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>Search &gt; Find Nodes...</strong> menu item in an inspector window that is inspecting the document you wish to search, and enter your search criteria there.</p>
<p>Or, if you do not know anything about the node, you can try and select it by clicking on it. Scroll the node into view, choose the <strong>Search &gt; Select Element By Click</strong> menu item, and then click on the element you wish to inspect.</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