This post is a follow up to my former "top 10 Firefox Extension That I Cannot Live Without" article. You can have a look at it for a more brief list.

For the lazies out there you can immediately donwload all the extensions mentioned in this article as a bundle.

...

There are tons of (official and unofficial) extensions you can install to your Firefox. Some of them are valuable time savers and organizes, and some are simple nothing but junk.

For those who want to be more productive and separate gold from trash, I have compiled a list aimed specifically for Web Application Developers.

But, why not use M$IE ?

Well, if you are one of those who still associate an "is a" relationship between the "e" letter on your desktop with "the Internet".

That little e is not "the Internet". Nor it is the only way to access to the Internet. There are many alternatives around. And, as a web developer, you should be well aware of the fact. Even being aware is not enough, you should evangelize about it.

If you still do not get it, I suggest you go away and so away from the community of web developers.

Don't be so pushy, I pretty well know about browsers, but why Firefox?

What I really like about Firefox can be boiled up to

• vast majority of extensions,
  
• standards compatibility,
  
• and speed.

Needless to say the tabbed browsing interface is a great time saver. And I particularly like the "session saver" extension, in case of a power brownout, system outage all my sessions (and tabs) are restored as soon as I restart Firefox.

I'll introduce you 30 invaluable extensions which will make your Firefox work like a charm. Please note that my list is specifically optimized for front end Web Application Development and design. So if you are an average Joe, or especially specialized in back end services you may not find the list that useful.

Enough chit chat, let's begin:

Get an up to date Firefox version first

Most of the versions I present here work best with Firefox version2.x.x and above. So spare some time and update your Firefox if you have not done already.

Install Noia Extreme theme

There are many many themes around. But Noia Extreme Theme is the best one imho, which combines eye candy and productivity together.

install noia extreme to your Firefox

Get Firefox Extension Backup Extension

I know, it's name is sorta funny. But what it does is priceless. With FEBE not only you can back up your extensions, you can back up your entire user profile (along with bookmark, preferences, cookies, plugins, history and more)

Moreover it compiles a nice HTML list of extensions when you perform a back up. (I use that list to write this post list now ;) )

FEBE is half a FEBE if it's without CLEO (compact library extension organizer). CLEO is a Firefox extension that works with FEBE to package any number of extensions/themes into a single, installable .xpi file.

install FEBE to your Firefox

install FEBE-CLEO combo to your Firefox

Ultimately Necessary Extensions for Your Web Development Needs

Meet Aardvark

Things you can do with aardvark

• Clean up unwanted banners and surrounding "fluff," especially prior to printing a page
• See how the page is created, block by block
• View the source code of one or more elements

install Aardvark to your Firefox

Also while you're there, check Platypus. It has similar extensions and more (thanks Sarah). Platypus is a Firefox extension which lets you modify a Web page from your browser -- "What You See Is What You Get" -- and then save those changes as a Greasemonkey script so that they'll be repeated the next time you visit the page. Editing pages to suit your needs is dandy -- but making those changes "permanent" is the real payoff.

Some of the things you can do with Platypus include:

• Remove parts of the page you don't wish to see.
• Move a part of the page to a different location.
• Change the style and format of page elements.
• Modify all the links on the page using a regular expression.
• Insert your own HTML code.

install Platypus to your Firefox

Get Firebug

Simply get it. I cannot explain how a valuable resource it is. You shold see it for yourself. One can write a separate article on how to use Firebug. It's more than a debugger. It's a framework by itself.

install Firebug to your Firefox

Web Developer Toolbar

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

If you are a standards-aware web developer you must have the web developer toolbar in your arsenal. If you are not I suggest you re-read the beginning of this post.

install Web Developer Toolbar to your Firefox

Html Validator

HTML validator is a nice Tidy and OpenSP based extension. It validates the (X)HTML of your pages as you browse. it's a great time saver.

As far as my experience is concerned, having a strictly valid page, or at least knowing which parts of it are left intentionally invalid prevents you from sleepless nights, extra dose of caffeine and headaches in the morning.

Sarah says:

I've always just used the validators in the Web
Developer toolbar, but this is pretty freakin' sweet!

install HTML Validator to your Firefox

Link Checker

Do you have a dozen of pages on your site and each page has tens of links in it, and you want to check for dead links, bad links and good links. Then link checker is your only savior.

install Link Checker tou your Firefox

Extensions to Enhance Your Web Development Experience

Colorzilla - your embedded color picker

Simple and easy to use. No need to create a screenshot, load it into photoshop and get the color code. If what you simply need is a color code, why shoot the fly with a rocket launcher? Just use colorzilla

Alternatively you can use Pixie (not an extension) it gives me a colour picker you can use
anywhere, not just in Firefox, and it's very small: http://www.nattyware.com/pixie.html

install Colorzilla to your Firefox

Measure it

Measure it does what it says: it d raws a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

Also check out the Miscellaneous button on the Web Developer
Toolbar, it has line guides and a ruler.

install Measure it to your Firefox

Screen grab

It, in case you hadn’t guessed, saves webpages as images by scrolling around and stitching the result together. In particular it also will save just a frame as an image.

install Screen grab to your Firefox

IEView

IE View is a simple Mozilla and Mozilla Firefox extension (for Microsoft Windows systems), which allows the current page or a selected link to be opened in Internet Explorer. I use Firefox 99.99% of the time, but there are those moments -- particularly when testing new pages, or when viewing that rare IE-only page that's actually interesting -- when I need to see what things look like in IE.

install IEView to your Firefox

OperaView

If you like IEView, why not try out OperaView ?

install OperaView to your Firefox

LiveHTTPHeaders

This is sorta advanced but extremely useful extension. It allows you to change the header information of any web request on the fly.
LiveHTTPHeaders may be of some help for the following:

• Help debugging web application.
• See which kind of web server the remote site is using.
• See the cookies sent by remote site.

install LiveHTTPHeaders to your Firefox

Tamper Data

Use tamperdata to view and modify HTTP/HTTPS headers and post parameters.

Trace and time http response/requests.

Security test web applications by modifying POST parameters.

FYI current version has conflicts with some plugins like Google Web Accelerator and HTML Validator. Shut them off while using Tamper Data, else your browser will crash.

install Tamper Data to your Firefox

Flash Tracker

While running any .swf Flash file in your browser you can see all the output generated by the "trace" flash functions in this sidebar component.
You NEED the flash player debug version to run this extension correctly

install Flash Tracker to your Firefox

Extensions as Embedded Applications

FireFTP

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

Why need an external FTP client if you have FireFTP at hand? Moreover, it's totally free.

If you find FireFTP inconvenient, or unreliable for some reason FileZilla (not an extension)
is an excellent open source FTP client (an server) with an intuitive interface.

Thanks Kasimir

install FireFTP to your Firefox

ChatZilla

Contrary to popular belief IRC is not just a time waster. It's an ultimate time saver that joins developer communities together. If you have something in mind, go to a proper IRC channel and ask a question. You'll get immediate feedback. Especially RubyOnRails developers have a very active IRC community.

install ChatZilla to your Firefox

SpiderZilla

Spiderzilla is an easy-to-use website mirror utility, based on Httrack.

install SpiderZilla to your Firefox

Usability Extensions to Enhace Your Firefox Experience

Firefox Showcase

Showcase provides a new way to manage your Firefox tabs and windows by showing them as thumbnails in a single window, tab or sidebar. Includes a find bar that will filter the thumbnails, and the capability to select the thumbnails in the same way you would select files in your system.

install Firefox Showcase to your Firefox

Scrapbook

ScrapBook is a Firefox extension, which helps you to save Web pages and manage the collection. Key features are lightness, speed, accuracy and multi-language support. Major features are:

• Save Wep page
• Save snippet of Web page
• Save Web site
• Organize your collection
• Full text search
• Text edit feature resembling Opera's Notes.

install Scrapbook to your Firefox

TabMixPlus

Tabmixplus is the best way to customize your tabbed navigation experience.

(note that if you have installed TabBrowserPreferences extension, it does not cooperate well with this one, so better uninstall or disable it if you want to use this)

install TabMixPlus to your Firefox

PermaTabs

Adds the ability to turn tabs of your choice into permanent tabs ("permaTabs"). PermaTabs can't be closed accidentally (even when closing multiple tabs at once), and will stick around between sessions.

Useful for keeping URLs you use often, always one tab away. Also, useful for picking up articles where you left off during a previous session.

Just for fun, installs three random "permatabs" (from a built in list) on installation. So maybe you'll discover a useful site you never even knew about.

install PermaTabs to your Firefox

FaviconizeTab

It simply does what it says.

install FaviconizeTab to your Firefox

Target Alert

TargetAlert is an extension for the Firefox web browser that provides visual cues for the destinations of hyperlinks.

If a hyperlink points to a something that is not a web page, then TargetAlert will try to append an icon to the hyperlink that represents its destination. For example, a hyperlink that points to a PDF document would look like this when using TargetAlert:

Sample Link to a PDF

This has two main advantages over plain hyperlinks. First, it makes links to PDF documents easier to find on a web page. Second, if you do not enjoy the "surprise" of clicking on a hyperlink and discovering that it links to a PDF document, you can use TargetAlert as a visual warning.

install Target Alert to your Firefox

Linkification

Linkification converts text links into genuine, clickable links.

Sarah says:

Another option is just to select a plain text link and
drag it to the tab bar or address bar, which will open the link - in a
new tab if you drag it to the tab bar, in the existing tab if you drag
it to the address bar. Seems like a lot of people don't know about this.

install Linkification to your Firefox

PDF Download

PDF Download is a Firefox extension that solves the problems everyone has about handling PDF files with Firefox. PDF Download is not a PDF plugin: you still need to have installed the Adobe or the FoxIt PDF plugin if you want to open a PDF inside Firefox.

install PDF Download to your Firefox

Image Zoom

If you have ever had an image that was too large to fit on your screen or too small to see the finer detail in your browser or email, then image zoom can help. Image zoom gives you complete control of the size of most images displayed in mozilla based software. Both individual images or whole pages of images can be zoomed.

Alternatively, using the Images button on the Web Developer Toolbar, you
can show all images full-size; also, using the Resize button there is a
zoom option (for the whole page, though, not just images) and using the
Miscellaneous button there is a page magnifier tool.

install Image Zoom to your Firefox

Séparé

Séparé is a Firefox extension that helps you keeping tabs tidy by introducing a new kind of tab: the separator. Séparé motto is "Divide et impera!"

install Séparé to your Firefox

Download Manager Tweak

The Download Manager Tweak extension streamlines the current Firefox download manager. The extension allows the Firefox download manager to be opened in a separate window, the sidebar, or a tab. The extension also modifies the default appearance of the download manager to make it more concise and intuitive.

install Download Manager Tweak to your Firefox

Download Status Bar

Download Statusbar is a browser extension that allows you to keep track of ongoing and completed downloads in a hide-away statusbar.

Features:

• Auto-hides when not in use
  
• Single-click pause and resume
  
• Pause all, Resume all, Cancel all, and Remove all finished - available from the context menu of the bar itself
• ... and more.

install Download Status Bar to your Firefox

Miscelleneaus

Restart Firefox Extension

Lazy joe's way to restart firefox after an extension update.
(p.s. the download link below has some other useful extensions)

install Restart Firefox to your Firefox

Forecast Fox (Enhanced)

Yet another extension for the lazy user; Forecast fox will tell the weather report of today and the next couple of days along with satellite images.

install Forecast Fox to your Firefox

Tab Effect

Beautify your tab transitions. Tab Effect is an ActiveX based firefox extension.
Normally I don't like IE's fancy transitionsç But strangely I liked the way Tab Effect works.
Tab Effect simly attaches effects when the current tab changes.

install Tab Effect to your Firefox


Extensions YOU cannot live without

Inspect This

Sarah from DesignShift cannot live without Inspect This.
Inspect adds an entry to the context menu to open the DOM Inspector on the selected element.

install Inspect This to your Firefox

(you can contribute to this list by sending me a comment in any means: by adding a comment directly, sending me an e-mail, IM, whatever method you find convenient)

Keeping an Eye on...

All in one sidebar was an extension I loved to use, keeping everything organized. It is also in my former top ten firefox extensions list. However it does not install on my Firefox 2.0.0.1. I'm looking forward to their new release.

IEView Lite is smaller than IE view, it is cross-platform and it can do everything IE view does.
Unfortunately I was not able to install it to my Firefox 2.0.0.1.

...

That's it. Hope you find this compilation useful.

If you have any other extensions that you cannot live without, I'd be happy to enlarge this list.

 bu yaziyi sevdin mi?  hemen una ekle!

I've listed my most-frequently-used FireFox Extensions.
Hope that you find them useful:

1. All in one SideBar

All in one sidebar enables you to quickly access, organize, update, activate/passivate your extensions. Highly inspired from Opera web browser's sidebar.

You can also access your history, bookmarks, recent downloads, themes, JavaScript Console and Page Properties with just this very side bar.

I highly recommend you try it, if you haven't already done so:

2. Colorzilla

It assists web developers and graphic designers with color related tasks - both basic and advanced.

With ColorZilla you can get a color reading from any point in your browser, quickly
adjust this color and paste it into another program. You can Zoom the page you are viewing and
measure distances between any two points on the page.

Colorzilla is available for download here.

3. Dictionary Search

I am not a native English speaker. Although most of the time I can deduce the meaning of words from the general structure of the sentence; I often wonder the exact meaning of the word
(yeah I'm curious) and Dictionary Search is a great time-saver for me.

4. FireBug

I don't know how I had been developing AJAX applications without FireBug.

Some fun features of FireBug include;

• Logging for web pages
  
  No more 'alert("debug:" + myvar);' s in the source.
  Firebug logs them for you without interrupting the process.
  
  
• JavaScript debugging
  
  You can stop JS execution, add breakpoints, step in, step out from the methods.
  It's no different than using your favorite IDE's debugger.
  
  alert( "I will never ever use alerts for debugging again" );
  
  
• Errors at your fingertips
  
  FireBug adds a little icon to the Firefox status bar which tells you if your page is busted.
  No more digging through the muddy pile of errors in the JavaScript Console window.
  
  
• CSS / DOM inspector
  
  Elements and styles and events, oh my goodness. This can't be true. I can inspect anything on the page with my mouse. Morever I can change attributes, attach new events; modify/override JS methods! Unbelievable!
  
  
• JavaScript comamnd line
  
  To inspect and alter variables and state date.
  Sing with me:
  

  "No more alert debugging."

  
  
• Ajax Request Spy
  
  Logs all your XMLHttpRequests along with post data and header information on-the-fly.
  
  If you are developing (or you plan to develop) AJAX Web Applications; this feature is a must-have for you.
  

You can download FireBug from Joe Hewitt's web site.

5. FireFTP

Forget about your bloated FTP client. And meet FireFTP.

I assure you; you won't look for an alternative once you get used to it.

6. Web Developer Toolbar

A must-have for any Web Developer / Designer.

You had better use it to understand how an invaluable toolbar it is for the web developer.

7. Session Saver

Although FireFox is an excellent browser; it may crash once in a while.

If you are in the middle of a research with a zillion of tabs open (see the next list item);
then session saver is actually your life-saver. It saves all open sessions before the crash
occurs and loads them back when you re-launch Firefox.

8. TabMixPlus

If you are like me, a zillon tabs open side by side; then TabMixPlus is just the tool for you.

9. EditCSS

As its name implies, with EditCSS you are able to edit your site's CSS files on-the-fly and observe the changes immediately.

Edit CSS is available for download here.

10. Total Validator

The Total Validator Firefox extension provides one-click validation for HTML, Accessibility, Dead Links and more...

Total Validator is a complementary tool for standardistas out there.

I say "complementary" on purpose; because as you all know automated accessibility
checks don't mean much and the developer is responsible for passing each checkpoint manually.

BONUS

If have followed up to this point then you deserve a bonus don't you?

11. Noia Theme

Tired of the default Firefox look? Then install noia extreme theme. You'll be amazed how it changes look and feel of your Firefox.


... May the source be with you!

 bu yaziyi sevdin mi?  hemen una ekle!