up vote 2 down vote favorite
share [g+] share [fb]

Before I build it myself, is there a tool that gives me a quick tree-like structure of a webpage? Basically all Divs and other layout element with an overview of their ID and CLASS tags, but no scripts, spans or other non-layout content (and yes, i know that css position:absolute can turn everything into a layout element, but let's ignore that...).

This is to get an overview of Nesting, Inherited CSS classes etc.

Edit: I want to print out or copy the outline to annotate it, so it needs to actually strip out any content/non-layout elements.

link|improve this question

69% accept rate
feedback

1 Answer

A great tool for this is Firebug. You can also use the Web Developer toolbar to achieve a "highlight and border" effect on positioned elements.

Firebug

link|improve this answer
Sorry, I should have mentioned I want to print out or copy the outline, so that I can annotate it. Firebug doesn't seem to be able to do that :( – Michael Stum Feb 24 '10 at 23:16
Use Web Developer and highlight divs and positioned elements then. – Josh K Feb 24 '10 at 23:23
feedback

Your Answer

 
or
required, but never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.