18.3. DOM InspectionDOM, Dynamic, Explore, Inspect, Interrogate, Investigate, Presentation, Render, Snapshot, State, View, Visualise, Visualize Figure 18-6. DOM Inspection18.3.1. Developer StoryDevi keeps clicking on the Clear button, but the document text remains stubbornly unaffected. She fires up a DOM Inspection tool and discovers that the button's onclick event handler isn't present, which explains why nothing was happening. 18.3.2. ProblemHow can you inspect the DOM's state at any time, taking into account DOM manipulations that may have occurred since the page was loaded? 18.3.3. SolutionUse a DOM Inspection Tool to explore the dynamic DOM state. The initial HTML for an Ajax App is often minimal and, in any event, likely to change over time due to DOM Manipulation. A DOM Inspection tool traverses the browser's current DOM model, rather than the initial HTML source, to build up a presentation of the current DOM. Many times, the tool is interactive, allowing you to drill down the hierarchy, search for keywords, and so on. All of this is very useful for checking assumptions and diagnosing problems, since many Ajax bugs arise because the programmer misunderstood the DOM state at a particular time. Incidentally, DOM Inspection is useful beyond the fact that the DOM is dynamic. Even for static applications, an interactive exploration tool is often a good complement to the mound of text that makes up a complex HTML document. 18.3.4. Tool Support18.3.4.1. Firefox DOM InspectorFirefox ships with a DOM Inspector tool, accessible from the tools menu (Figure 18-7).[*] The inspector is a popup window showing the DOM hierarchy on one side and facing a summary of the selected node. The summary shows node attributes such as registered event handlers, as well as CSS style information.
Figure 18-7. Firefox DOM Inspector18.3.4.2. Firefox Web Developer ExtensionChris Pederick's Web Developer extension (http://chrispederick.com/work/webdeveloper/) is an invaluable Firefox toolbar for web development (Figure 18-8). Among its vast feature set are several commands especially relevant to DOM Inspection: Figure 18-8. Web Developer toolbar
18.3.4.3. View Rendered SourceJennifer Madden's View Rendered Source (http://jennifermadden.com/scripts/ViewRenderedSource.html) is a Firefox extension that shows the entire DOM as an HTML document (Figure 18-9). Note that this is not the same thing as the good old View Source feature, because the rendered source reflects the DOM after any manipulation has taken place. The rendered source is shown in a pretty-formatted style, with colors and spacing to help convey the DOM structure. This is a free tool, and you can also purchase a slightly enhanced version for a small fee. Figure 18-9. View Rendered Source18.3.4.4. IE Developer ToolbarMicrosoft's free IE Developer Toolbar for IE6+ (http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en) has a number of DOM Inspection capabilities and is similar to the Firefox Web Developer Extension (Figure 18-10). It also includes a DOM Explorer similar to Firefox's DOM inspector (Figure 18-11). Figure 18-10. IE Developer ToolbarFigure 18-11. IE DOM ExplorerYou can find a list of IE DOM Inspectors at http://blogs.msdn.com/ie/archive/2005/05/10/416156.aspx. 18.3.4.5. IEDocMonTim Tabor's IEDocMon (http://www.cheztabor.com/IEDocMon/index.htm) is an open source tool that extends IE to include an interactive view of the DOM. 18.3.4.6. Mouseover DOM InspectorSteven Chipman's Mouseover DOM Inspector (http://slayeroffice.com/tools/modi/v2.0/modi_help.html) is a convenient bookmarklet that lets you explore the DOM by mousing over page elements. It works on all recent browsers except Safari. |