• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

5. Power Tools for Web Developers > 53. Probe HTML with the DOM Inspector

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>

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint