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
- DOM Inspector
- 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.
Last but certainly not least it has a View Source button for super ninja swiftly access to the source!
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!!
- 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.