View Source Chart bookmarklet

What Why & How

What

View Source Chart is a one-of-a-kind JavaScript-based DOM inspector which provides the most compelte visualization of DOM structure and hierarchy of any inspector available.

View Source Chart is available as a browser add-on and as a bookmarklet. The bookmarklet can be used with multiple browsers, while the add-on is exclusively for Firefox.

It should be noted that some browsers display charted source in a pre-rendered state, while others display charted source in a post-rendered state. The option to view charted source in both states gives bookmarklet users an added bonus.

Why

A Picture Says A Thousand Words

Eyesight is the most efficient way for the human brain to process information. By placing visual boundaries where they already exist invisibly, Source Charting enables you to take in DOM structure and hierarchy as fast as your brain possibly can.

It's Better Because...

When we have to build invisible HTML boundaries mentally - which always includes some devised series of manual actions (clicking, finding, reading, etc.) - we experience forced breaks in cognitive processing. As the DOM becomes more complex, more productivity is lost. It doesn't take long before mentally navigating the DOM becomes impossible.

The Misapplication of the Linked-List User Interface

"Linked Lists", as far as Data Visualization is concerned, were intended to show sequential processes and cycles, NOT structure.

DOM Inspector using Linked List UI

This is why DOM inspectors and folder viewers that employ a "linked list" UI to depict nested structure fall short.

The "links" in linked lists span only one generation (parent-child). These links provide no indication of ancestry/descent beyond one generation, and the user is force to rely on indentation. Indentation lacks precision and is an inefficient way to gauge nested structure.

The only way to visually measure nested structure accurately is to apply an indicator of the start point which continues to the end point of elements.

How

Using View Source Chart bookmarklet (VSCb) is very easy - click the bookmark to launch, scroll to view more of the DOM, and click individual containers to collapse and expand pieces of the page DOM.

Zoom Out

A lesser known but very useful debugging/inspecting technique is decreasing the font size (Ctrl + -) to zoom out of the chart. This is useful when viewing the charts of highly complex pages. Hovering your mouse over a container will still display the container's opening tag in a normal-sized, readable tooltip.

VSCb's Color-Coding Convention

The color convention is easy to learn and makes scanning the DOM a breeze. You can also use it to debug a web page with a bit of acquired skill.

Customization

The bookmarklet is easy to customize. See the Hacks Page for more info.

Finding Errors - How To

Usually, a DOM containing errors will produce a chart with "emtpy-ended" containers, as this screenshot shows. This also causes containers to have mis-matched end tags. For instance, this chart is displaying the closing body tag in a paragraph container instead of its assigned black dashed border.

This is an indication that
something's wrong with the code

This is an indication that
something's wrong with the code

3 Steps to Locating Errors
1. The best way to locate an error in a chart like this is to begin looking at the last container which has an end tag. In this case, it is the body tag. Navigate up from the body tag looking for mismatched starting and ending tags.

2. The easiest way to find a mismatch is by hovering your mouse next to the end tag and comparing it to the opening tag displayed in the tooltip.

3. Use the process of elimination: begin collapsing "well" containers above (and within) the mismatched container.

By far, View Source Chart bookmarklet for Opera will expose more DOM errors than other browsers. IE also exposes more errors, but not as many as Opera. The Screenshots and Green Coding pages discuss this difference in depth and are worth a read.

Ending DIV tag
where ending IFRAME should be

Ending DIV tag
where ending IFRAME should be

In this screenshot, the first red flag that something is wrong is that the body tag is out of it's black-dashed-bordered container.

Notice the iframe container: the ending iframe tag is outside its container. A closer look reveals an improperly nested ending DIV tag.

That problem is easy enough to solve, but it doesn't explain why the body container (black-dashed-border container) has an ending div tag. This signifies an error further upstream.

Problem Solved!

Remember to match end tags with start tags in each container by hovering your mouse over the end tag, then compare it to the tag name in the tooltip.

After a bit of detective work, you can see the problem is an ending span tag where there should be an ending div tag.

Since there is no visible ending div tag, we can assume the ending span tag was mistakingly used in place of a div tag.

Problem solved!

Watch your P tags

In this shot, the problem is not a misplaced DIV tag, but an extra ending A tag further up in the DOM. The last place you want an error is anywhere near P tags!

In my experience, all browsers are very picky about P tag nesting order, and make adjustments accordingly. To avoid problems, be very careful with your P tags.

Remember that the Source Chart is a web page in a browser window, so you can use your browser's Find functionality just as you would with any web page.

View Source Chart bookmarklet

What Why & How Browser Support Get the bookmarklet
What Why & How What View Source Chart is a one-of-a-kind JavaScript-based DOM inspector which provides the most compelte visualization of DOM structure and hierarchy of any inspector available. View Source Chart is available as a browser add-on and as a bookmarklet. The bookmarklet can be used with multiple browsers, while the add-on is exclusively for Firefox. It should be noted that some browsers display charted source in a pre-rendered state, while others display charted source in a post-rendered state. The option to view charted source in both states gives bookmarklet users an added bonus. Why A Picture Says A Thousand Words Eyesight is the most efficient way for the human brain to process information. By placing visual boundaries where they already exist invisibly, Source Charting enables you to take in DOM structure and hierarchy as fast as your brain possibly can. It's Better Because... When we have to build invisible HTML boundaries mentally - which always includes some devised series of manual actions (clicking, finding, reading, etc.) - we experience forced breaks in cognitive processing. As the DOM becomes more complex, more productivity is lost. It doesn't take long before mentally navigating the DOM becomes impossible. The Misapplication of the Linked-List User Interface "Linked Lists", as far as Data Visualization is concerned, were intended to show sequential processes and cycles, NOT structure. This is why DOM inspectors and folder viewers that employ a "linked list" UI to depict nested structure fall short. The "links" in linked lists span only one generation (parent-child). These links provide no indication of ancestry/descent beyond one generation, and the user is force to rely on indentation. Indentation lacks precision and is an inefficient way to gauge nested structure. The only way to visually measure nested structure accurately is to apply an indicator of the start point which continues to the end point of elements. How Using View Source Chart bookmarklet (VSCb) is very easy - click the bookmark to launch, scroll to view more of the DOM, and click individual containers to collapse and expand pieces of the page DOM. Zoom Out A lesser known but very useful debugging/inspecting technique is decreasing the font size (Ctrl + -) to zoom out of the chart. This is useful when viewing the charts of highly complex pages. Hovering your mouse over a container will still display the container's opening tag in a normal-sized, readable tooltip. VSCb's Color-Coding Convention The color convention is easy to learn and makes scanning the DOM a breeze. You can also use it to debug a web page with a bit of acquired skill. Customization The bookmarklet is easy to customize. See the Hacks Page for more info. Finding Errors - How To Usually, a DOM containing errors will produce a chart with "emtpy-ended" containers, as this screenshot shows. This also causes containers to have mis-matched end tags. For instance, this chart is displaying the closing body tag in a paragraph container instead of its assigned black dashed border. 3 Steps to Locating Errors 1. The best way to locate an error in a chart like this is to begin looking at the last container which has an end tag. In this case, it is the body tag. Navigate up from the body tag looking for mismatched starting and ending tags. 2. The easiest way to find a mismatch is by hovering your mouse next to the end tag and comparing it to the opening tag displayed in the tooltip. 3. Use the process of elimination: begin collapsing "well" containers above (and within) the mismatched container. By far, View Source Chart bookmarklet for Opera will expose more DOM errors than other browsers. IE also exposes more errors, but not as many as Opera. The Screenshots and Green Coding pages discuss this difference in depth and are worth a read. In this screenshot, the first red flag that something is wrong is that the body tag is out of it's black-dashed-bordered container. Notice the iframe container: the ending iframe tag is outside its container. A closer look reveals an improperly nested ending DIV tag. That problem is easy enough to solve, but it doesn't explain why the body container (black-dashed-border container) has an ending div tag. This signifies an error further upstream. Remember to match end tags with start tags in each container by hovering your mouse over the end tag, then compare it to the tag name in the tooltip. After a bit of detective work, you can see the problem is an ending span tag where there should be an ending div tag. Since there is no visible ending div tag, we can assume the ending span tag was mistakingly used in place of a div tag. Problem solved! In this shot, the problem is not a misplaced DIV tag, but an extra ending A tag further up in the DOM. The last place you want an error is anywhere near P tags! In my experience, all browsers are very picky about P tag nesting order, and make adjustments accordingly. To avoid problems, be very careful with your P tags. Remember that the Source Chart is a web page in a browser window, so you can use your browser's Find functionality just as you would with any web page.	Screenshots Hacks Green Coding Bug Reports "This Simple Tool can make it easier and faster for any Web developer to debug a design" -Macworld Magazine "...the most accessible DOM inspector available to web developers. (This) extension should be standard in every web developer's toolkit." -John Resig, creator of jQuery, from his book, Pro JavaScript Techniques. Mentioned in these books...
What Why & How Browser Support Get the bookmarklet