A tool that outputs the structure of a page. Makes working with CSS (especially resolving inheritance issues) much easier.
A couple of days ago, I was having a little CSS trouble. In the end, it turned out that I had set a property of an element "above" in the document tree, and the problematic element was inheriting that property.
It struck me that it would be easier to work through this kind of CSS problem with some kind of simple tool to show how a page was put together. If I could see all the tags on the page in a nested format, with parent and child relationships obvious, and without all the text getting in the way, my life would be easier.
Classes and ids attributes are highlighted, as are tag names. Class and ID names, though, must be enclosed in quotation marks to be highlighted. Text, closing tags and line breaks are not shown. Though I can understand some people may find it useful to see text, I found it made the tree too large to be usable.
I've used it a few times, and am quickly finding it saves quite a lot of time solving simple CSS problems or conflicts. Which is exactly what it was supposed to do. Enjoy!
When writing the tool, I came across a fairly unusual problem. I wanted, when the mouse was over an element, to highlight its children. However, this cannot be done with CSS (at least, I couldn't think of a way to make it work).
The page structure tool is written to accept a URL either by GET or POST. You can therefore use it one of two ways.
First, you can use the tool by visiting the URL below, replacing "##url##" with the address of the page you want to view:
Alternatively, you can use the following form to submit an address to the page:
If you want to see an example of the output of this tool, you can view the structure for AddedBytes.com.