The Mozilla Firefox browser is probably the greatest webbrowser in the world on it’s own. But ever since it’s extension feature matured around the release of Firefox 1.0 it has been an absolute killer application! For web developers it has become the ultimate tool to inspect, debug and test and for users it has become the greatest platform for making a browser that suit their specific needs.

I will try and explain the fundamental groups of extensions, and then I will list my favorites in each of these groups.

This article is the first in a series where I will cover various groups of extensions for Mozilla Firefox and related products such as Thunderbird.
The first part is for Web Developers, but I also plan to cover extensions that will be of interest to the rest of you!

Web Developer’s Firefox Extensions

JavaScript Console

First of there’s the magnificent JavaScript Console, not really an extension, but too useful to omit, this will list all errors and warnings encountered during a session. It also features a strict mode which will give you all sorts of useful tips for improving your code quality, such as detection of multiple variable declarations, possible misuse of equal (=) and equality (==).

DOM Inspector

This tool could be defined as the divined hand of the browser god, letting you practially inspect anything on a webpage from the complete DOM tree to stylesheets and JavaScript objects. Any JavaScript developer should atleast have some experience with this tool, as it can be a real lifesaver in some debug situations (to inspect generated DOM nodes).

Venkman – JavaScript Debugger by Robert Ginda

Venkman is a full featured debugger for Mozilla/Gecko based applications. It allows you to set breakpoints anywhere in the JS code, inspect objects and variables. It even has some profiling features, which can come in handy when performance optimizing your code. I’m not really a big user of debuggers, since I usually create my own logging and error handling, but it sure can come in handy in complex situations, and is undeniably very powerful.

Web Developer Extension by Chris Pederick

This is without doubt the most useful extension in the history of Firefox. Bascially it is a suite of many previous smaller Mozilla extensions beautifully put into a single extension featuring a toolbar, that gives a web developer (or any other curious person) a great toolset for inspecting, editing, validating and manipulating web pages in real time. I often use it’s features to disable all stylesheets (CTRL-Shift-S), which is a great way to get an idea of how a site is actually built, and how well it will work on non-css browsers.
The outlining tools are great for visualising block and table elements, giving a more technical overview of how the page is built up, a great help during development / debug.
The realtime CSS editing sidebar is a true gem, that can really come in handy when testing stuff. the ‘Display ID & Classes’ is also really handy as it puts labels directly on the page, so it’s really easy to get an overview of the CSS skeletal structure in the page. The handy validation links for HTML, CSS, RSS etc.. are nice to have by the hand.
For JS developers it contains a very handy icon in the right side of the toolbar, which will turn into a yellow warning triangle whenever a JS exception occurs, clicking on it brings up the before mentioned JavaScript Console.
Last but certainly not least it has a View Source button for super ninja swiftly access to the source!

Greasemonkey

The ultimate site hackers tool, it lets you add your own JavaScripts to any site, adding any type of twist to the targetted site (only in your browser! don’t worry, you won’t be hacking the site in any illegal sense). There are hundreds of scripts available, but I haven’t spent too much time on it, since I really don’t need it. But again an impressive tool that could very much come in handy in those tricky time-constrained situations (i.e. you can alter you published site and test scripting stuff before actually upgrading the site itself).
Greasemonkey should be used with caution, and it is ofcourse of extreme importance that you trust the source from which you got the scripts, since they can certainly be made to harm you if it were to be malicious, the same goes for any application and extension you install in general!!

Platypus

An innovative Firefox extension which lets you modify a Web page from your browser in WYSIWYG mode and then save those changes as a Greasemonkey script so that they’ll be repeated the next time you visit the page.

ColorZilla by Alex Sirota

Very handy tool which features a colour picker and an eyedropper feature, allowing you to quickly grab any colour from any pixel inside the browsers content area. It also copies it to the clipboard in any CSS friendly format. Simply outstanding! Although sometimes you might still need a OS based Eyedropper, because ColorZilla is restricted to what is shown in the browser.

LiveHTTPHeaders by Daniel Savard

Very handy tool that gives easy realtime access to the HTTP headers. Very useful for debugging and anlyzing various aspects of a web solution. Other extensions build upon and requires this extension to work (i.e. Header Monitor).

View Rendered Source by Jennifer Madden

Neat tool that allows to view the actual generated markup, useful when generating markup via scripting.

View Cookies by Edwin Martin

Utility that adds a Cookie tab on the ‘Page Info’ window, allowing you to see and edit any set cookie that affects that page.

Add N Edit Cookies

Another tool to create and edit cookies on webpages. I must stress that I have not yet tested this extension, but it looks to be more suited for heavy-duty cookie work than the View Cookies extension mentioned above. And thus perhaps more suited for us developers.

Now go find even more on your own! – Please give your feedback on your opinions, and if you notice any super developer extensions not mentioned, please give me a notice and I will review it for the part 2 comming up sometime.

Ok bye now, look out for the related article series called ‘Firefox Extensions For Everyone’ which I am currently writing.

If you are new to mozilla web development you might want to drop by Henrik Gemal’s Using Mozilla in testing and debugging web sites.

Nader Cserny at bandnews.org sent me a notice that he and his team have just released their site. The reason he told me is that it is using AJAX extensively, and as he said “Unlike all the hyped websites we tried to use Ajax in an intelligent and useful way.” This of course lit my appetite and the rest is history.

The site acts as an RSS aggregator for music bands. This could of course easily be refurnished for other purposes, but I think it’s quite neat idea, which might also make RSS feeds more accessible to the non-techies out there (because they won’t know it’s RSS before it’s too late!! he he)…

The website uses yet another “AJAX” / Rich-App framework called Prototype (JavaScript toolkit for class-driven development). I am not sure what to think of this framework myself, but perhaps it’s because I am too much in love with my own. The code is pretty much stripped from comments, making it hard to grasp all the cool stuff (No, manuals are not enough when trying to read sourcecode, not even a single line describing each class! truly bad code habit). Ok so I don’t think Prototype can be called an Ajax framework, since it does so much more it’s more proper to call it Rich-App framework. Personally I would have divided stuff up in more modular parts, i.e. there is a toColorPart() function in the same framework as Ajax and Event code.. This makes me itch, but ofcourse it’s just me flaming other peoples code, which I’m sure will haunt me in my dreams… Check out their own demos, and also a host of fancy UI components made by others with the use of Prototype, such as Rico. There is some really great stuff there.

Bandnews.org – Search & Read Music News.

Prototype JavaScript Framework

mozillaZine: “Plans are afoot to remove support for SSL version 2.0 in Mozilla Firefox. SSL provides encrypted connections to servers, making it safe to transfer data such as credit card numbers and banking details across the Internet. Unfortunately, there are a number of known security flaws in SSL 2.0, which was the first public version of the protocol (no applications shipped with support for SSL 1.0). Therefore, the Mozilla Foundation is eager to disable support for SSL 2.0 and have all Firefox installations use only the newer and more secure SSL 3.0 and TLS 1.0 protocols.” [...]

I am sure we can assume this will impact all other Mozilla products such as Thunderbird.

Read the full story at mozillazine.org