Blog » View Page Structure
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).
How to Use
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:
- This tool works best with valid code, especially XHTML.
- A certain amount of basic code improvement is done before processing (for example all empty tags are automatically closed).
- Sites with non-empty tags that aren't closed properly may not show up correctly.
- Sites with large amounts of nested code should still show up, but it may be difficult to view the output.
If you want to see an example of the output of this tool, you can view the structure for AddedBytes.com.