Debug Ajax-Generated Tags in Firefox
(Page 1 of 2 )
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.
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!
Next: Inspecting Dynamic Creations >>
More JavaScript Articles
More By O'Reilly Media
