Firefox Extension Review: View Source Chart

I found this extension while browsing Firefox extenstions website and it immediately caught my attention. I’m one that learn the most by example so I do a lot of ‘view source’ while browsing the internet to find out how a certain layout is build, how the designer stack and nest the elements, and so on. But with most HTML codes nowadays generated by some kind of automated scripts, the source can be a lot uglier than what is seen on the browser. I’m not talking about table vs. div but long HTML codes without line breaks. It’s a pain having to copy and paste it to a text editor and then inserting the line breaks and indentations one by one just to see the page structure. Not to mention going to another page means having to repeat the process ad nauseaum. This extension does exactly what I need: presenting the source code in a proper nested structure. Plus, it’s color coded!

Installation

As with other Firefox extension, you can download it at Firefox website or directly from the developer’s website. After installation, you can see the option to view the nicely-formatted format in the View menu.

New Menu

Fig 1. Additional view menu

Comparison

Where else to start than the simplest website we all know very well? Google’s website is a perfect example. It looks simple, clean, and sleek on the browser but its source code is not that pleasing on the eye. Here is how it looks with normal source view using View -> Page Source.

Google source code

Fig 2. Google's source code

Now we use View Source Chart to look at the source code and what difference does it make. Nested elements are presented in nested blocks and the blocks are also color coded. You can also zoom in and out which increase/decrease the font size and therefore enables you to see more of the layout structure.

With source chart

Fig 3. Viewed with View Source Chart

You can also hide parts of the source code by clicking anywhere within the block. This is good for seeing the ‘big picture’ or the main page structure without looking at the details.

All blocks expanded

Fig 4. All blocks expanded

With a block hidden

Fig 5. With a block hidden

View Source Chart, however, does not display JavaScript code and replaces it with ellipsis. But this can be ‘fixed’ by combining this extension with Platypus plugin. If both are installed, Platypus will use View Source Chart to render web page’s source code. Here is how it looks with both Platypus and View Source Chart combined.

Without Platypus

Fig 6. Without Platypus

With Platypus

Fig 7. With Platypus

Conclusion

I’m really glad to find this Firefox extension. Overall, I’ll give two thumbs up for the great idea and how it makes learning-by-example process less painful.