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