Genii Weblog

View formatted source in Firefox

Thu 2 Jun 2005, 07:47 AM

by Ben Langhinrichs
There is a cool extension to Firefox called View formatted source which lets you view your page source in a formatted way, with CSS elements highlighted, etc.  I wouldn't care for just the pretty printing, but I really like the way you can quickly identify the extent of a <div>...</div> or a table cell or almost any other inclusive group of HTML.  This makes analysis of a database much, much easier.  For example, the first image below is part of the source of the Genii homepage with the regular View - Page Source in Firefox, and the same part with formatted source:

Regular View - Page Source in Firefox

Page Source in Firefox

New formatted page source

Note that the highlighted area shows up when you mouse-over any <table> or <td> or <div> or whatever, and lets you instantly see where it starts and stops (you can do it on the </table> or </td> or </div> as well).  You can even click on the hink-minky on the left and collapse a whole element.  This is very good for finding mismatched elements, abd seeing just parts of a page, etc.
Formatted page source

Copyright 2005 Genii Software Ltd.

What has been said:

320.1. Stephan H. Wissel
(06/02/2005 10:35 AM)

You can push that further with "View rendered source". That's invaluable if you are the JS wizzard and want to know if the html your functions write is ok.

Find it here:

;-) stw