View Source Chart (Firefox Extension)

Contact JenniferMadden.com View Source Chart Firefox Extension Download View Source Chart FAQs

<body> 
<div>
<table>
<tbody>
<tr>
<td>
<blockquote>
<span>
<ul>
<li>
<p>
</p>
</li>
</ul>
</span>
</blockquote>
</td>
</tr>
</tbody>
</table>
</div>

View Source Chart [Firefox Extension]...

Draws a Color-Coded Chart of a Webpage's Source Code
Displays Source in its Altered State After the DOM has been Manipulated by JavaScript

What Is Source Charting?

Graphically Displays HTML Tag Boundaries
Graphically Defines Tag Nesting Order, Structure and Hierarchy
Adds A Simple but Powerful User Interface to Source Code

The old method of using indentation to format source code is OK, but consider...

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

If you're new to the containment concept, one glance at a source chart and you're over the learning curve. Intermediate and advanced developers can save hours tracking down bugs in complex documents.

"...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

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.

Default Browser source view

View Source Chart source view

???FAQs?????????????

Q How do I install this extension?
1) First, do one of the following:

2.5.03 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)

A. Get VSC 2.5.03 FREE:
This free version works ONLY with Firefox 2.

B. Purchase 2.5.0503 for $10 (For Firefox 3)
This beta version is Firefox 3 compatible! Any future upgrades are free.

Purchasing VSC 2.5.0503 will help me develop a stable FX3 compatible version. There are bugs to work out, but major functionality is Fx 3 compatible. Please read known issues below.

works only in a tab
no auto-focus on Chart tab (user has to click new tab to view chart)
cannot navigate away from the chart (chart will persist in that tab until closed)

When you purchase View Source Chart, you will be directed to a secure paypal server. If payment is cleared immediately, once you click on the "Continue" link at PayPal, you will be taken to a download page. If the order has not been processed, or the payment is pending, you will receive an email with the download links when the transaction has completed. Download and save the file. Drag and drop into Firefox window or File > Open to install the View Source Chart extension.

2) Then:

Using Firefox, click the Install link (no right click). This opens a dialog box.
When the "Install Now" button becomes clickable, click it.
At this point, 99% of you will see a message like this:

To override, click the Edit Options button, then Allow the installation.
Once again, click the Install link, then "Install Now".
To complete installation, close ALL FIREFOX WINDOWS and restart Firefox.

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 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.

Home | Email