Firefox extensions that help web development

Firefox extensions that help web development
Apr 28, 2008

It is no coincidence that Firefox is the default browser for most web developers. The reason is not just security or tabbed browsing. It has become an invaluable tool in web development, particularly on creating & debugging XHTML and CSS layouts.

If we have to measure the exact space available between columns on screen, or if we have to find the which block breaks the layout, we can find it right away with a few clicks. Firefox makes CSS bug tracking much simpler.

While developing web projects I find it impossible to work without Firefox. And, I couldn't use Firefox for web development without the following 'extensions'.

Firefox Extensions list for Web Development

The Firefox browser turns into an invaluable web development tool with the following extensions.

1. Web developer
It can be termed as the de-facto requirement for web developers and quite aptly named also. It provides a plethora of options. A separate user guide can be written for properly describing the functions.

Some of my favorite functions are 1)Outlining blocks, tables etc. 2) Display Element Information which shows all the parent blocks and styles for a chosen element, and also listing the child elements available within it. Many a time this one function saved valuable minutes if not hours. 3) Display Ruler which lets me to measure any available space in the page. It helps more particularly in adding boxes somewhere in existing layout. 4) View CSS - helps in going over a web page's styles without having to save them.

2. FireFTP
Another must for me. Many FTP software falters when opening web folders with more than thousand files. This one does not. (Don't ask me why someone keeps more than thousand files in a folder, self-styled seo-minded customers are usually very adamant). Even when FileZilla fails, this one works consistently well. Special thanks to Mime Cuvalo.

3. IE Tab
This one is however Windows specific. While working on a layout or a display, we can check how it appears in Internet Explorer just by clicking the icon in bottom right. It's a small convenience, but very valuable.

4. ColorZilla
Perhaps the 'Zilla' in the name attracted me (identifies with Mozilla & FileZilla), but without it picking exact color shade from a web page will take an extra routine of work. It sits on the left corner of status bar without grabbing attention. A nifty & invaluable tool.

5. Screen grab!
Eventhough hitting 'Print Screen' in keyboard and pasting it in GIMP is easier, this tool helps to get a full page view in image, even if that page scrolls to 3 or 4 full screens. Handier.

General Extensions:

Apart from the above extensions which obviously helps only if you do web development or web design. The following extensions are handy and tidy, and part of my list of extensions.

6. Download Statusbar
I strongly feel that this one should be integrated into the browser. While downloading files, you often have to endure the unsightly popup of Downloads list which needs frequent cleaning. Thankfully, this extension shows the downloads as neat boxes in status bar.

7. SEOQuake
Provides a detailed list of SEO parameters for each URLs in search result pages. Very handy if you need that information.

8. Sage
A light weight RSS feed reader. One of the many choices, but a simple uncluttered one.