Hack 53. Probe HTML with the DOM Inspector

Mozilla's powerful DOM Inspector tool deconstructs web pages for your benefit.

The standard Firefox install comes complete with the optional DOM Inspector tool. This tool gives web developers and Mozilla programmers a microscope that can be used to examine HTML and XML documents after they're displayed. This hack shows how to analyze an HTML page with it. You can also use it to analyze XUL pages [Hack #76] . In this hack, we'll work with the following web page content:

<html>
  <head>
    <style>
      .header { font-family : Arial; }
    </style>
    <script>
      function click_handler( ) {
        alert("Click");
      }
    </script>
  </head>
  <body>
    <h3 class="header">Test Page</h3>
    <script>
      document.write("<p>Hello, World!</p>");
    </script>
    <p id="link-para">
      <a href="about:blank" onclick="click_handler( )">A Link</a>
    </p>
  </body>
</html>

5.11.1. Inspecting a Page

The DOM Inspector can be a tricky little tool to coordinate with your web page. There are several ways to start it up:

Display the target web page normally. Choose the menu item ToolsDOM Inspector, or press Ctrl-Shift-I. The DOM Inspector window appears with the target page loaded.
Start the DOM Inspector. Type a URL into the top text field and press the Inspect button at the right (pressing Enter is not sufficient). The Inspector displays the page in a new panel at the bottom, and the existing top portion loads that target page.
Start the DOM Inspector. Choose menu items FileInspect a URL... and matters proceed as detailed in the previous item.

The formatting and indenting of our sample page results in lots of extra W3C DOM 1 Core Text Nodes being added to the document when it's displayed. In most cases, and to match the screenshots in this hack, you should filter out that separator content for convenience. To do so, just pick ViewShow Whitespace Nodes, unticking that item. That reduces the output so that it matches this single-line version of the document:

<html><head><style> .header { font-family : Arial; } </style><script> 
function click_handler(  ) { alert("Click"); } </script></head><body>
<h3 class="header">Test Page</h3><script> document.write("<p>
Hello, World!</p>"); </script><p id="link-para">
<a href="about:blank" onclick="click_handler(  )">A Link</a></p>
</body></html>

You can open several DOM Inspector windows if you want. If the window or pane that displays the target web page ever goes away, the DOM Inspector will stop working. If that happens, close down the DOM Inspector and restart it. The FileInspect a Window menu option is not used for HTML documents; it's for XUL documents.

5.11.2. Deconstructing a Page

Figure 5-10 shows the page as the DOM Inspector sees it, with the tree of DOM 1 Core Nodes in the left pane fully expanded to show detail. The highlighted items are things that are safe to click once the page is displayed.

Figure 5-10. DOM Inspector view of a target web page

Let's first look at the left pane. Notice how the <script> element in the body appears in its original form; such elements are usually static content of the page. Notice also how the content generated by document.write() (the first <p> element) also appears in the tag hierarchy. The DOM Inspector displays the living state of the page, not just the content of the source HTML document.

The right pane displays the tag attributes for the selected <a> element. In this case, the pane displays tag attributes, but that can be changed with the drop-down menu in the top-right corner of the page. The two most useful options in that menu are CSS Style Rules and Computed Style. Unlike other tools, such as the Web Developer Toolbar, the DOM Inspector display can be used to report the state of every CSS and Mozilla property that might apply to a given element.

If the HTML document is big, use the SearchSelect Element By Click menu option (or the equivalent icon on the toolbar) to pick out a piece of HTML in the target document. Click in the target document to reveal and highlight the equivalent element in the DOM Inspector.

5.11.3. Hacking a Page to Bits

The DOM Inspector is a read/write tool. You can cut, copy, paste, insert, delete, or update nodes in the target page in a permanent way. That's more powerful than just applying display: none styles to existing content. To do so, just display a target page as in the previous section, select an item in the tree of nodes in the left pane, and then click in any of these places to see the set of operations you can apply:

Pick from options in the Edit menu.
Right-click on the selected tree item to expose a context menu.
Right-click on any tree or list item in the right-hand panels to expose a context menu.

Make any such change and the window displaying your target HTML document changes to match. Any changes that you make like this will survive until the target page is reloaded. Cut, copy, and paste operations cannot deliver content to other applications via the desktop clipboard. Only the Copy XML operation can do that.