Email Me
JenniferMadden.com View Source Chart Mashable's Top 10 Popular Firefox Add-ons for Web Developers FAQs Video Demonstration

  • Inspect the DOM at lightning speed.

  • If you're new to the containment concept, one glance at a Source Chart and you're over the learning curve.

    • Firefox 3.6.*Install View Source Chart 3.01

    NEW FEATURES:
    -Cursor changes to hand to indicate clickable areas
    -Text inside containers is word wrapped
    -Selected text can be DEselected (by clicking it) without collapsing a container
    -Displays entire opening tag in titletip when mouse hovers over container. This enables view of opening tag/attributes from any hot area of a container. This is especially useful when navigating a deeply nested page structure.
    VSC for older Firefox versions:
    Firefox 3.5.*Download View Source Chart 2.7

    What Is Source Charting?

    • Defines HTML Tag Boundaries (so you don't have to)
    • Defines Tag Nesting Order, Structure, and Hierarchy (so you don't have to)
    View Source Chart source view
    View Source Chart source view     Default Browser source view
    Default Browser source view

    WHAT IS SOURCE CHARTING?
    Source Charting is a User Interface useful for navigating HTML source code at lightning speed. It is also an excellent visual aid for those learning HTML.

    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* - usually made up of 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.

    Source Charting is better because it eliminates the need for processing any other way but the fastest: visually.

    ZOOM FEATURE
    View Source Chart users can take advantage of a built-in browser feature (Ctrl + -) which results in zooming out of source charts. Now you can see more of the DOM than ever before! You don't even have to scroll as much. Sweet.

    SUMMARY
    Source Charting:
    * Visuallly Defines HTML Tag Boundaries (so you don't have to )
    * Visually Defines DOM Structure and Hierarchy (so you don't have to )

    Source Charting allows a user to ...
    *quickly scan and identify tags without reading
    *gauge a tag's hierarchy rank just by looking to its side
    *see more of the DOM in the view port by zooming out!

    JUST A THOUGHT
    The source charting concept can also be used as the basis for any User Interface design which attempts to depict containment such as file/folder viewing, website navigation, and last but not least, [your idea here].
    View Source Chart on Facebook
    "...the most accessible DOM inspector available to web developers."
    "(This) extension should be standard in every web developer's toolkit."
    John Resig, creator of the jQuery JavaScript Library, from his book, Pro JavaScript Techniques.
    "this is a great quick debugging tool for me and a lifesaver of a learning tool for those i instruct. html is all about nested containers and this clearly shows them much better than all my commenting, indentation, or syntax coloring ever could."
    Cheridy
    Harvard University Graduate School of Design Instructor
    "Even the most complicated nested xhtml containers and hierarchies are so much easier to navigate that it's almost laughable."
    Dewey Spencer
    Zoomed-Out View
    Zoomed Out View

    Handy Keyboard Shortcuts for use with View Source Chart

    Ctrl + - Allows Zooming OUT of HTML Chart by decreasing text size.
    Zooming out allows a broader view of the document structure.

    Ctrl + + Allows Zooming IN of HTML Chart by increasing text size.

    Ctrl + 0 (zero) Changes text size back to normal.

    Ctrl + F Employs the find functionality. Alternatively, you may use Firefox's Find-As-You-Type functionality (specified in Options).

    Ctrl + W Closes window.

    Ctrl + S Saves the chart to your hard drive.
    Q How do I use View Source Chart?

    A Right click on a web page and select "View Source Chart" from the context menu.
    To view a frameset document, select "View Source Chart" from Fx's View menu.

    To Use Collapse/Expand Feature:
    Click on an opening tag to collapse its box, and anywhere in the collapsed box to expand.
    With practice, you'll learn all the clickable spots, namely; anywhere within a container except on indented tags.
    This allows you collapse a container from its side or bottom.

    Scroll Into View Collapsibility:
    If a container is collapsed from its bottom or side (the container top is out of view), the document is scrolled up and positioned just above the top of the newly collapsed container, enabling you to keep your place.

    To Open Source Charts in a new Tab:
    Tools > Extensions > click to highlight View Source Chart > Options > click checkbox



    Q Why does View Source Chart change my XHTML tags to HTML tags?

    A It doesn't. The browser is making these changes, VSC merely displays what the browser has done with your code. Most common: self closing tags lose their closing slash (/). See this article on Rendered Source for more information.



    Features Include:

    -Collapsible Containers
    -Ability to select text without collapsing a container
    -Extraneous whitespace removed
    -Scroll-into-view collapsibility
    -Ability to edit styles using Web Developer extension



    Home | Email