5 must have firefox addons for every web developer

Being a web developer there are some tools which I need and use on daily basis. Here are 5 such addons I think every web developer should install on their firefox.

1- Web developer toolbar

Home: http://chrispederick.com/work/web-developer/

Install: https://addons.mozilla.org/en-US/firefox/addon/60

Web Developer Toolbar

This addon adds a toolbar and a menu to firefox. The toolbar contains several mini tools in it to perform various tasks. It has 11 built in menus for different tasks like cookies, css, forms, html, images and many others. You can read a review of web developer toolbar here.

2- JSONView

Home: http://benhollis.net/blog/2009/02/24/jsonview-view-json-documents-in-firefox/

Install: https://addons.mozilla.org/en-US/firefox/addon/10869

JSON is becoming more popular day by day as a data exchange format. JSONView allows you to view json documents in the browser itself without having to open in any text editor and format it. Local files can also be seen if they have .json extension. It formats the document nicely and also provides options to collapse/expand nodes too (just like XML).
In case of invalid json it reports an error.

3- Fireftp

Home: http://fireftp.mozdev.org/

Install: https://addons.mozilla.org/en-US/firefox/addon/684

You will not have to open a separate ftp client if you use this. To open Fire FTP, go to Tools -> Fire FTP on firefox menu bar. It opens an easy to use interface in a new tab. You can create multiple accounts and you will get all the features that you expect from a ftp client.

From the site: “Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!”

4- IE Tab

Home: http://ietab.mozdev.org/

Install: https://addons.mozilla.org/en-US/firefox/addon/1419

Use IE tab if you want to check display of your web pages in Internet explorer. Instead of opening IE separately, it will open a tab in firefox which will display your page using the IE engine installed on your machine.  It will put an icon on your status bar using which you can switch engines.

5- Firebug

Home: http://getfirebug.com/

Install: https://addons.mozilla.org/en-US/firefox/addon/1843


How can a firefox addons list be complete without Firebug.

From the site: “Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”

Firebug needs no inroduction to web developers. It reduces the development time to a great extent, specially if your application relies on javascript/ajax too much. It provides rock solid debugging for javascript where you can add/remove breakpoints, watch variables in real time and much more.

Want more? You can inspect and edit html/css on the fly to change the look and feel of a page. You can also check the download time for your css files,scripts, images and html pages using the net tab which are helpful for optimizations.

Firbug has a number of addons too (yes! addons for an addon). I recommend both the addons given below.

Page Speed : It is an addon from Google which is used to analyze the loading performance of a page. It tests a page against Web Performance Best Practices which you can read here. After this a score out of 100 is provided. Greater score means faster page load. Install it from this link.

YSlow: YSlow is a addon similar to Page Speed. It is created by Yahoo. YSlow measures a web page’s performance against a set of rules for high performance pages created by Yahoo. You can download it from here and read the performance criteria here.

Bonus:  Colorzilla

Home: http://www.colorzilla.com/firefox/

Install: https://addons.mozilla.org/en-US/firefox/addon/271

Need to pick a color from any web page, text or image within browser? Just click colorzilla, which sits at extreme left of your status bar, and point to that location. Now right click on colorzilla and you can copy rgb and hex color codes for that color.

It comes with a built in Color Picker and Palette Browser.

Related Posts

3 thoughts on “5 must have firefox addons for every web developer”

  1. I think that you are missing a lot of other good addons which is also essential for a web developers. Some of which might be, Measureit, Yslow, pixel perfect to name a few.

    Still the article is a good one.

Leave a Reply