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

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.

For instance, just by glancing at the screenshot to the left, you can tell immediately how deeply nested is the span tag (highlighted by the yellow container), and that its ancestors are div tags (highlighted by purple containers) as well as a ul tag (highlighted by the green container).

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.

Whitespace is both an inefficient and inaccurate way to navigate the DOM. Why work harder than you have to?

Typical browser "View-Source"

Theatre of the absurd, anyone?

HOW

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

Tooltip

Hovering your mouse cursor over any container, even one whose top and bottom are out of view, will display that container's entire opening tag in a tooltip.

This allows you to easily see the opening tag of any container in the viewport.

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.

Bookmarklet Demo using Chrome

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 if you know CSS. Just paste into an editor and have fun!

Locating Errors

Often times, a P tag is involved in a chart anomaly, because the Firefox, Safari, and Chrome browsers do not automatically make a correction when block level elements are mistakenly placed inside a P tag.

Hence, when this type of error has occured, your charts will display container mis-matches or, as seen in the capture to the right, empty-ended containers.

Find the error using the process of elimination: begin collapsing "well" containers nested within this chart manifestation.

As you can see in the capture below, the P tag is not always the culprit.

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: a closing div is there instead.
Notice the iframe container: the ending iframe tag is outside its container.

In this case, 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. Here, the tooltip displays an opening div tag, but the container has a closing span tag.

Opera

Finally, it is of utmost importance that you know (and take advantage of) how Opera displays source charts. Unlike Firefox, Safari, and Chrome who display charts based on CORRECTED and RENDERED source code, Opera displays charts based on the original source code. This means that it will not display the result of any JavaScript-generated markup, or include corrections (although it too makes corrections to markup). Last I checked, Internet Explorer functioned in this same way. This is a plus because you are able to see errors in full, especially helpful when pulling content together from different sources.

So why would I use other browsers who display charts based on corrected and rendered source code?, You ask. It is because of something I call "Green Code".

What is Green Code?

Green Coding is a method of relying on the client browser to finish building the page for you - something heavy traffic sites do to reduce file size, hence saving bandwidth.

Writing green code is very simple: omit the end tags of certain elements. Because browsers' HTML parsers make corrections to markup, you can omit even end tags that aren't supposed to be optional.

Viewing Source Charts in Chrome, Safari and Firefox will reveal the corrections the browsers have made to the original markup (and the result of script-generated markup). Using VSCb in these browsers is the best way to be sure your page is being parsed exactly as you want it to be.

Chrome - Safari - Firefox

This capture is from a page in which the closing span, td, and tr tags have been commented out. The commented tags are seen, followed by the identical tags the browser replaced them with! Even ending span tags are inserted by the browser, which are not on the end-tag-optional list.

Opera - Internet Explorer

Conversely, viewing the same Source Chart in Opera exposes the errors of the missing end tags. The closing span, tr, and td tags are not inserted into the DOM view (though the browser has made the corrections), and as a result, the subsequent tr and td tags appear inside the span tag's container, indicating an error.

Similarly, IE returns many, but not all browser corrections.

The Moral of the Story

VSCb for Opera is a wonderful debugging tool when you want to see your original markup in charted form. VSCb for IE is also a useful debugger.

VSCb for Chrome, Safari and Firefox is vital for Green Coding, or for simply viewing the final stage of your code after the browser gets through with it.
See this Google Webmaster article for more info on optional end tags.

View Source Chart bookmarklet by Jennifer Madden

What Why & How Get the bookmarklet DEMO
What Why & How WHAT View Source Chart is a one-of-a-kind JavaScript-based DOM inspector which provides the most complete 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. 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. For instance, just by glancing at the screenshot to the left, you can tell immediately how deeply nested is the span tag (highlighted by the yellow container), and that its ancestors are div tags (highlighted by purple containers) as well as a ul tag (highlighted by the green container). 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. Whitespace is both an inefficient and inaccurate way to navigate the DOM. Why work harder than you have to? Typical browser "View-Source" Theatre of the absurd, anyone? HOW Using View Source Chart bookmarklet (VSCb) is very easy - click the bookmark to launch, and click individual containers to collapse and expand pieces of the page DOM. Tooltip Hovering your mouse cursor over any container, even one whose top and bottom are out of view, will display that container's entire opening tag in a tooltip. This allows you to easily see the opening tag of any container in the viewport. 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. Bookmarklet Demo using Chrome 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 if you know CSS. Just paste into an editor and have fun! Locating Errors Often times, a P tag is involved in a chart anomaly, because the Firefox, Safari, and Chrome browsers do not automatically make a correction when block level elements are mistakenly placed inside a P tag. Hence, when this type of error has occured, your charts will display container mis-matches or, as seen in the capture to the right, empty-ended containers. Find the error using the process of elimination: begin collapsing "well" containers nested within this chart manifestation. As you can see in the capture below, the P tag is not always the culprit. 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: a closing div is there instead. Notice the iframe container: the ending iframe tag is outside its container. In this case, 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. Here, the tooltip displays an opening div tag, but the container has a closing span tag. Opera Finally, it is of utmost importance that you know (and take advantage of) how Opera displays source charts. Unlike Firefox, Safari, and Chrome who display charts based on CORRECTED and RENDERED source code, Opera displays charts based on the original source code. This means that it will not display the result of any JavaScript-generated markup, or include corrections (although it too makes corrections to markup). Last I checked, Internet Explorer functioned in this same way. This is a plus because you are able to see errors in full, especially helpful when pulling content together from different sources. So why would I use other browsers who display charts based on corrected and rendered source code?, You ask. It is because of something I call "Green Code". What is Green Code? Green Coding is a method of relying on the client browser to finish building the page for you - something heavy traffic sites do to reduce file size, hence saving bandwidth. Writing green code is very simple: omit the end tags of certain elements. Because browsers' HTML parsers make corrections to markup, you can omit even end tags that aren't supposed to be optional. Viewing Source Charts in Chrome, Safari and Firefox will reveal the corrections the browsers have made to the original markup (and the result of script-generated markup). Using VSCb in these browsers is the best way to be sure your page is being parsed exactly as you want it to be. Chrome - Safari - Firefox This capture is from a page in which the closing span, td, and tr tags have been commented out. The commented tags are seen, followed by the identical tags the browser replaced them with! Even ending span tags are inserted by the browser, which are not on the end-tag-optional list. Opera - Internet Explorer Conversely, viewing the same Source Chart in Opera exposes the errors of the missing end tags. The closing span, tr, and td tags are not inserted into the DOM view (though the browser has made the corrections), and as a result, the subsequent tr and td tags appear inside the span tag's container, indicating an error. Similarly, IE returns many, but not all browser corrections. The Moral of the Story VSCb for Opera is a wonderful debugging tool when you want to see your original markup in charted form. VSCb for IE is also a useful debugger. VSCb for Chrome, Safari and Firefox is vital for Green Coding, or for simply viewing the final stage of your code after the browser gets through with it. See this Google Webmaster article for more info on optional end tags.	"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. Say "thanks" by hosting with DreamHost through this link
What Why & How Get the bookmarklet