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.

So, I put together this tool. In simple terms, it will fetch a page from a web server and output the tags within the page in a nested list. The JavaScript side of it will also highlight children of an element when you hover over it.

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!

Highlighting Issues

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 problem with the CSS was that whenever you hover over an element, you are also hovering over its parents. So they, and their children, are highlighted - meaning everything is highlighted. For this reason, the highlighting of elements uses JavaScript.

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:

http://www.addedbytes.com/view_structure.php?url=##url##

Alternatively, you can use the following form to submit an address to the page:

Bookmarklet

To make life a little easier, I've coded a quick JavaScript bookmarklet for you to use, that, when activated, will automatically submit the URL of the page you are viewing to the tool. Simply copy or drag the link below to your links bar, your favourites folder or anywhere else you wish:

• View Page Structure

Notes

• 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.

Example

If you want to see an example of the output of this tool, you can view the structure for AddedBytes.com.