SEOs look at the source code of almost every page - I do even when I am not analyzing the page and just browsing. That’s quite natural, I’ve been looking for tools that can represent the information in a better way or allow for more valuable options to experiment with.
I personally don’t use all these extensions and don’t encourage you to. You can play with all of them on your test FireFox profile and decide which one would be useful for you:
| FireFox extension | Most useful feature |
| View Source Chart | Graphically displays source structure. |
| JSView 2.0.5 | Displays information on page external files. |
| HighlightAll | Highlights identical elements in the code. |
| Html Validator | Validates HTML of the current page. |
| View Formatted Source | Shows source structure. |
| SourceEditor | Allows to edit code and view the results. |
| PageDiff | Compares code of several pages. |
1. View Source Chart allows to view a page source code in a more handy format by highlighting its structure and tags:
* graphically displays HTML tag boundaries
* graphically defines tag nesting order, structure and hierarchy.
2. JSView 2.0.5 provides a quick access to information on all page external js/css files from the context menu, from the toolbar, from the view menu, or from the status bar:
3. HighlightAll (as the name suggests) highlights all identical page elements in the source code and calculates their number of occurrences:
4. Html Validator adds a tiny icon to the status bar which instantly validates the code as the page loads. The addon is based on HTML Tidy.
You can also see the detailed validation report:
5. View Formatted Source also shows you a structured variant of the source and enables you fold/unfold block elements. It also shows which CSS rules match each element:
6. SourceEditor enables you to quickly edit the page right in your browser. This could be especially useful for creating killer screen shots for your link bait:
7. PageDiff allows to compare HTML code differences of several pages side by side:
Comments
18 responses so far ↓
Gidseo on Jul 28, 2008 at 6:54 am
Hi Ann
I ♥ the html validator - thank you.
phaithful on Jul 28, 2008 at 8:17 am
I’d recommend adding FireBug to the list. Many professional developers use it regularly to view and manipulate the DOM.
https://addons.mozilla.org/en-US/firefox/addon/1843
Web Agency Chieti on Jul 28, 2008 at 8:52 am
@Ann (and everybody)
HTML VALIDATOR download version is out of order from many days.
Apart from this, the lates xpi I downloaded (that seems to be the same available) isn’t a valid Firefox 3 plug-in.
Are you still using the oldest browser version?
Ann Smarty on Jul 28, 2008 at 9:10 am
@Web Agency Chieti : I changed the plugin download URL:
https://addons.mozilla.org/en-US/firefox/addon/249
It does work with my FF latest version.
Web Agency Chieti on Jul 28, 2008 at 9:27 am
@Ann
Glad to hear this. Update the link to the english version (replace ru with en). Are you Russian?
BTW, I should contact the author and ask him if he’s going to release a Mac OSX version. I definetely abandoned the Windows platform except from programming tasks.
Ann Smarty on Jul 28, 2008 at 9:28 am
@Web Agency Chieti : lol… updates :) thanks
Christoph on Jul 28, 2008 at 2:37 pm
FireBug > all
Hands down.
Allan Wind on Jul 28, 2008 at 6:02 pm
Another vote for Firebug, and when looking at performance issues the YSlow addon for Firebug is really helpful.
Live Headers is a great way to explore complex pages.
g1smd on Jul 28, 2008 at 7:31 pm
I was already using several of those (HTML Validator, Firebug, YSlow), as well as Live HTTP Headers, ShowIP, Check Page Links, Server Spy, etc, but PageDiff is new to me, and just great.
Lucky Balaraman on Jul 28, 2008 at 10:42 pm
You might also try the Web Developer Toolbar, I’ve used it for two years and love it.
Raghavan on Jul 29, 2008 at 1:12 am
@Lucky
Yes but not for source code
Lucky Balaraman on Jul 29, 2008 at 1:32 am
@Raghavan,
Indeed for source code. You can view the HTML under the “Miscellaneuos” tab, edit the HTML and see the effect on your page in front of your eyes; else you can choose “View Source” from the “View Source” drop-down menu and see FireFox’s usual “View Source” page.
You can also view the embedded and external CSS, edit it, and see immediate results on the screen, a process which I have done a gazillion times.
Best,
Lucky
Murthy on Jul 30, 2008 at 5:35 pm
Hi Ann,
Thanks for your information. I want learn more html validator
Dan on Aug 21, 2008 at 2:56 am
2 of them don’t work with Ff3, so my vote goes to Firebug, too.
Raghavendra.Padasalgi on Aug 30, 2008 at 5:38 am
I have installed source editor as fire Fox extension.To my surprise the button on status bar
is not visible, pl advise how I can edit the source code of the html in firefox.
thanks
Ann Smarty on Aug 30, 2008 at 6:16 am
Try Web Developer toolbar then. It allows source editing under “Miscellaneous” => “Edit HTML”
Burg on Sep 4, 2008 at 9:52 am
html validator best plugin
Raghavendra.Padasalgi on Sep 4, 2008 at 9:37 pm
I want to know is there any plugin/software to view offline all the contents of the webpages visited by Firefox on line.Such facility is with IE and the contents of all the webpages visited are stores in the folder C:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files
Please advise.
thanks
Leave a Comment