From Ajax Patterns
Tags: DOM Dynamic Explore Inspect Interrogate Investigate Presentation Render Snapshot State View Visualise Visualize
Devi keeps clicking on the Clear button, but the document text remains unaffected. She fires up a DOM Inspection tool, and discovers that the button's onclick event handler isn't present, which would explain why nothing was happening. Reloading the application, the DOM inspector shows her that the event handler is initially present, but removed upon the first clear operation and never restored.
How can you inspect the DOM's state at any time, taking into account DOM manipulations since the page was loaded?
Use a DOM Inspection Tool to explore the dynamic DOM state. The initial HTML for an Ajaxian application is often minimal, and in any event likely to change over time due to DOM Manipulation. A DOM Inspection tools 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 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 pile of text that makes up a complex HTML document.
Firefox DOM Inspector
Firefox ships with a DOM Inspector tool, accessible from the tools menu in Windows, you need to ensure [http://www.clagnut.com/blog/340/ Web Developer Tools is selected during installation. The inspector is a popup window, showing the DOM hierarchy on one side, facing a summary of the selected node. The summary shows node attributes such as registered event handles, as well as CSS style information.
Firefox Web Developer Extension
Chris Pederick's Web Developer is an invaluable Firefox toolbar for web development. Among its vast feature set are several commands especially relevant to DOM Inspection:
- Display commands augment the page with DOM information, which makes a great alternative to exploring the DOM in a completely separate view. For example, Display Topographic Information alters the page to reveal the layout of DOM elements and Display ID and Class Details augments each element with its id and class attributes.
- Outline commands draw outlines around elements of a particular type. For example, Outline Block Level Elements or Outline Table Cells. In fact, you can define custom outlines to outline any element you want.
- Form commands help expose form structure. Display Form Details augments the form with information about each control, while View Form Information opens up a summary page.
View Rendered Source
Jennifer Madden's View Rendered Source is a Firefox extension that shows the entire DOM as an HTML document. 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, using colours and spacing to help convey the DOM structure. This is a free tool, though there's a slightly enhanced version that can be purchased for a small fee.
IE Developer Toolbar
Microsoft's free IE Developer Toolbar, for IE6+, has a number of DOM Inspection capabilities and is similar to the Firefox Web Developer Extension.
Tim Tabor's IEDocMon is an open-source tool that extends IE to include an interactive view of the DOM.
Mouseover DOM Inspector
Steven Chipman's Mouseover DOM Inspector is a convenient bookmarklet that lets you explore the DOM by mousing over page elements. It works on all recent browsers except Safari.