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 viewsourcechart.com
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 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.
* 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 http://viewsourcechart.com/what-why-how
Cross-browser bookmarklet available at http://viewsourcechart.com/get-the-bookmarklet