Debug Ajax-Generated Tags in Firefox - Inspecting Dynamic Creations (Page 2 of 2 )
What if your page does not display as expected, and you want to look at the underlying code to see what’s going on? View -> Page Source just shows the page’s original HTML or XML. However, open up a new Inspector window, and you can look at the new structure that your DOM programming created, as shown in Figure 4-10.
Choosing the Firefox menu command Tools -> DOM Inspector will open up a new Inspector window alongside any existing ones.
Figure 4-10 shows that an existingspanelement has new content in the form ofBRtags and text nodes. If you click on a text node in the Inspector, the right side of the Inspector window shows the value of the node. This information can be invaluable for DOM programmers who are encountering a lot of text nodes, for example, that are emptystrings. These empty nodes sprinkled throughout a page often pose difficulties for any code that iterates through the document nodes looking for specific nodes or structures.
Power Hacks for Web Developers
Figure 4-10. Voila, JavaScript-generated nodes
The DOM Inspector is a great tool for debugging Ajax applications, not to mention a handy way to examine the DOM structure of any web page and to learn about the available object properties and methods.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
JavaScript 
HTML5 Boilerplate: Working with jQuery and Modernizr
