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