View Source Chart for IE

Thought i’d share that there’s an IE port of a valuable plugin i’ve used in Firefox for a while, View Source Chart:

Steps to get beautiful, visually sensible HTML source viewing in IE9:
1. Copy the script below andΒ paste it into a new browser bookmark.
2. Click the bookmark from any page to view its source chart.

For other browsers, check the first code block on this page.

About View Source Chart

Cross-browser bookmarklet now available at

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.

When mentally building tag boundaries by reading a tag name, then using manual actions like clicking, finding and scrolling, 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.

Source Charting eliminates the need for processing any other way but the fastest: visually. It provides an instant and complete visualization of hierarchical nesting of any tag in the view port.

Source Charting…
* Defines HTML Tag Boundaries (so you don’t have to)
* Defines DOM Structure and Hierarchy (so you don’t have to)

Case In Point: The Misapplication of Flowchart-style UI for DOM Inspectors
DOM inspectors and Folder Viewers have historically (and mistakenly) used flowchart-style GUIs to help users navigate hierarchies. The problem is that this type of GUI is intended to convey sequential movement or flow, not structure.

Because sequence and flow is measured one step at a time, the lines connecting elements in a flowchart-like GUI span only one generation (parent-child). When used to depict complex hierarchical structures like the DOM, the user is forced to inefficiently and inaccurately measure hierarchical nesting levels using white space indentation. (See image #3 above)

It is precisely this subtle but monumental mistake that View Source Chart overcomes.

The only way to visualize structure accurately is to measure hierarchical nesting. This is done simply by pictorially delineating element boundaries, which results in a manifestation of document structure.

For a full de-bugging How-To, visit

Cross-browser bookmarklet available at

Leave a Reply

We help Department of Defense clients realize benefits such as faster decision making, total traceability, and automated updates by identifying targeted goals and putting an emphasis on a culture of adoption through buy-in by individual team members.

How to: Create a report quickly from a #SharePoint list or library in the #PowerBI service

Leverage Microsoft Project for the web with the Project Accelerator via @YouTube

Load More...