Top 12 Mozilla Firefox add-ons for web designers

Mozilla Firefox is the most popular browser among techies(if you haven’t got it, go get it now). Its main advantages are that it is open-source(which means there is a large community to help), is standards-aware and renders all standard coding correctly(unlike Internet Explorer), and of course, has a plethora of extensions, themes and plugins.

Extensions is the biggest selling point of Firefox – they add in a lot of functionality. Adding those extensions by default would be disastrous – Firefox will be a large install, not to mention that most users will never use those extras. So, Mozilla(developers of Firefox) has devoted a website to Firefox add-ons.

Here’s a list of 12 quality extensions for Firefox, aimed at web designers:

• Web Developer: A comprehensive tool for any designer, it includes several options to apply modifications to a page you are viewing, without actually saving the changes. Think of a preview tool! You can edit the CSS of any site, to view the changes instantly. Once you close the “Edit” dialog, the changes will be removed. Very handy for everyone from beginners to advanced users.
• FireFTP: FireFTP, as the name suggests, is an FTP client. It stays inside Firefox as a tab, and allows you to transfer files easily via FTP. It can be very handy, if you are on a friend’s computer, and need immediate FTP access. Weighing in at just over 100 KB, it is lighter than any other stand-alone FTP client. Of course, it may miss a few power-functions, but I have not missed them in my last 4 months of usage.
• Firebug: (No, it is not a bug But it does help you to remove bugs in your code). Firebug is another tool for inspecting documents, finding out bugs/errors etc. It can measure the loading times of various elements of a site, like scripts, images and stylesheets. Very useful in optimizing your site.
• JS View: It shows you the CSS and Javascript files loaded in a page. Similar to Firebug, you can quickly check to see if a extension has loaded on a given page without viewing the source code. It is a great tool for newbies, as you can see how others build their pages.
• EditCSS: Great for all CSS junkies. It lets you tweak CSS and see changes in real-time. It is helpful especially for positioning and structuring elements via CSS.
• View Formatted Source: Every now and then, I find myself scurrying to view the source code of a page, to find out that bit of magical code, which makes sites great and cool-looking. VFS shows you source code in a more readable way.
• Greasemonkey: Greasemonkey is my newfound love. I had to install it to see some Blogger.com hacks. Later, I found many other killer scripts like Comment Pre-fill, Google search focuser, and My Own Google logo. There are hundreds more at UserScripts.org
• Aardvark: Aardvark is a relatively simple add-on, which shows class/id name for any element that you place the cursor on.
• ColorZilla: It is a tiny utility for colour-picking , among other things like advanced page zoom. Until I found this, I had used GIMP’s colour-picking tool! Overkill
• IETab: As I said earlier, Internet Explorer is a pain in the … for every web developer. What works on Firefox, Opera and Safari will not work on IE. This handy add-on helps you test your site for IE compatibility, right inside Firefox!
• MeasureIt: As the name suggests, it is an add-on for measurements. This little Firefox extension stays at the bottom of status bar and allows easy measurement of any element of a site.
• W3 XHTML Validator: This is crucial, whether you are building a generic site design, or somthing particular, like a WordPress theme.

That rounds up my list of add-ons for Firefox. If you know of any other good add-ons, please let me know them through your comments. Additions to this list are always welcome