The Web Developer tools presented on this page are geared toward helping with different aspects of HTML editing. Both View Document Outline and Display DIV Order are found on the Web Developer Toolbar Information menu.
View Document Outline
The DOM Inspector, discussed previously, allows you to view the hierarchical interrelation of all elements in a web document. This graphic view of the document structure is extremely useful for a number of code editing tasks.
But sometimes the kind of document "Outline" that you need is the term-paper kind... one that shows only heading titles and the content hierarchy within the markup. The Information | View Document Outline tool does just that by popping open a new browser tab or window and displaying all H tag contents. This tool is particularly useful for creating and editing textual content in the markup file.
The Document Outline page can also be printed for reference.
Display DIV Order
When you are working with more complex web documents, especially if someone else created them, keeping track of DIV names and their location within the markup can be difficult. This is especially true if some DIVs are styled with absolute positioning and do not render anywhere near their actual location in the markup. The Information | Display DIV Order tool not only outlines each DIV element on the page, but it also shows the DIV name and its sequential placement order within the markup.
The number "1" DIV will be the first DIV following the BODY tag in the markup. DIVs at the end of the markup document will diplay the highest numbers.
