Home arrow JavaScript arrow Debug Ajax-Generated Tags in Firefox

Debug Ajax-Generated Tags in Firefox

If you're looking for a better way to look at a web page's code than View-> Page Source, keep reading. This short article will show you how it's done. It is excerpted from the book Ajax Hacks, written by Bruce W. Perry (O'Reilly; ISBN: 0596101694). Copyright © 2008 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
January 04, 2010
  1. · Debug Ajax-Generated Tags in Firefox
  2. · Inspecting Dynamic Creations

print this article

Debug Ajax-Generated Tags in Firefox
(Page 1 of 2 )

HACK 33  Look at the new tags in a tree structure using Firefox’s DOM Inspector.

View -> Page Source has always been a popular (if primitive) programmer tool for inspecting a web page’s code, but the HTML generated by this menu command will not show the newly generated widgets that your Ajax applications might produce. It shows only the original HTML source code. Firefox, however, includes a DOM Inspector tool that shows these newly generated tags in a detailed hierarchical tree-type widget. Let’s look at the web page http://www.parkerriver.com/ajaxhacks/ajax_hack2_5.html.

The page, from “Submit Checkbox Values to the Server Without a Round Trip” [Hack #17], shows two sets of checkboxes representing team sports and individual sports. The application asks users to participate in a poll, choosing their favorite sports by checking the appropriate checkboxes. It then gets the latest results of the poll from a server program and displays them on the page. The checkboxes exist in the HTML source code; however, the text that eventually displays the poll results is dynamically generated on the page, without any visual submission or page refresh. To view the relevant code using Firefox, choose the menu command Tools -> DOM Inspector. Figure 4-9 shows the Inspector window that pops up.

Figure 4-9.  DOM Inspector view in Firefox


The left side of the window shows the entire hierarchical structure of the page’s Document Object Model, with all the parent and child tags available for inspection—simply click the little triangle widget next to a tag’s name, then select an element or Node . These are the DOM nodes for the entire web page.

Viewing the HTML page as a tree structure beginning from the top-level or root element,html, the nodes are the tree branches. Nodes contain parent nodes and child nodes, such as thebody element containing p ordivelements. In the DOM,Nodeobjects represent the web page nodes.

Click on an individualNode, such as theDIVtag in Figure 4-7, and the right side of the DOM Inspector shows all theNodeobject’s properties and methods.

The pop-up menu at the top-right of the Inspector window includes the view “Object - Javascript Object,” which specifically indicates the properties and methods for the selected Node.

The provided information is highly valuable for programmers who write dynamic HTML (DHTML), which involves altering web pages on the fly. Despite all of this “DOM speak,” believe me, this is heaven for a web developer who is working on a page with Ajax techniques!

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials