Share Email Me View Source Chart DOWNLOAD VIEW SOURCE CHART FAQs Video Demonstration

  • Inspect any Webpage DOM, faster than ever.

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

    What Is Source Charting?

    • Visually Displays HTML Tag Boundaries
    • Visually Defines Tag Nesting Order, Structure, and Hierarchy

    What Source Charting Does that Indentation-Only Formatting Does Not:

    • quickly scan and identify the types of tags a document contains without reading a single tag
    • see how deeply nested an element is, just by looking to its left (no scrolling)
    • identify the ancestor tag types an element is nested within, without having to scroll and read them
    View Source Chart source view
    View Source Chart source view
    Default Browser source view
    Default Browser source view

    Firefox 3.6.*Download View Source Chart 3.0

    -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 hoovers 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.
    "...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."
    Harvard University Graduate School of Design Instructor
    View Source Chart works great as a visual aid tool for use in learning environments.
    "Even the most complicated nesting xhtml containers and hierarchies are so much easier to navigate that it's almost laughable."
    Dewey Spencer
    By "reading" the chart's lines and colors side to side, one can visually navigate through the most complex document structure with ease.


    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.

    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.

    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

    Language Locales:
    Africaans (af-ZA) by leuce
    Danish (da-DK) by AlleyKat
    German (de-DE) by Fux
    Spanish (es-ES) by Urko
    Persian (fa-IR) by bahramm
    Finnish (fi-FI) by Risse
    French (fr-FR) by Goofy
    Croatian (hr-HR) by Krcko
    Italian (it-IT) by Luca90
    Korean (ko-KR) by wtspout
    Dutch (nl-NL) by pgUp
    Portuguese (pt-PT) by alexvf
    Russian (ru-RU) by rpocc
    Slovenian (sl-SI) by miha
    Thai (th-TH) by Qen
    Chinese (zh-CN) by rickcart
    Japanese (ja-JP) by drry
    Portuguese-Brazil (pt-BR) by humbertosartini
    Romanian (ro-RO) by alexxed
    Czech (cs-CZ) by mik
    (thanks Goofy)

    Home | Email