View Source Chart – A Firefox Extension

A couple of weeks ago I wrote an article titled Instant Source – Hacking Websites The Easy Way. It covered the Internet Explorer extension Instant Source, which allowed a much more informative view source functionality. I really liked this extension BUT being an IE only program I set out to find a Firefox alternative.

View Source Chart is a fairly suitable alternative that I found. It is a Firefox extension that allows you to view the source of the document in a state that represents the document after it has been altered by any Javascript. Here are a few of the features:

  • 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
  • Graphically Displays HTML Tag Boundaries
  • Graphically Defines Tag Nesting Order, Structure and Hierarchy
  • Adds A Simple but Powerful User Interface to Source Code
  • 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

I’ve been using this for a couple of weeks now and have found great use for the way it shows the structure of the document. Not only that but you can collapse/fold the document code to get a real birds eye view of what you are looking for.

View Source Chart