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.
