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.


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.


  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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