Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question

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.


share|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

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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