«

The Five Most Precious Firefox Extensions for Web Developer

Posted on January 3, 2008
Filed Under Web Related | 2 Comments     


I develop web applications and test them in Firefox, for Firefox provides many extensions that are not only useful, but sometimes vital to the completion of my projects. Over a period of time, I have been continuously evaluating different Firefox extensions in attempting to sort out the valuable ones (for web development). At last, I come up with these five.

Live HTTP Headers

This extension captures raw HTTP headers and displays both client request and server response. With this extension, you can easily examine headers such as server status code, Content-Encoding (to determine if compression is enabled), cookies, Content-Type, Etag, Expires and Cache-Control. If you need to optimize site performance by fine tuning browser caches, look no further, this is the tool for you. Download this extension.

ss1.gif

YSlow

Developed by YAHOO, YSlow is another valuable extension from Firefox. YSlow can benchmark the performance web pages and give advices based on rules for high performance web sites. That's not all. YSlow can also generate a report on external files including images, external CSS and JavaScript which have been loaded along with the requested page. After the report has been generated, it calculates the total size for both fresh and cached pages. This way, you can get an idea on how optimized the page is.

ss2.gif

YSlow provides a component view. In it you can view a list of external files which are associated with the current benchmarked page. For each file, you can inspect whether compression (usually in gzip) is enabled, expires date in the header is optimized, and Etag is presented. Download YSlow.

Web Developer

Its name already suggested that this is a tool for web developers. This extension combines various useful tools into one. Among them, you can always find something that can assist your web development. My favorite ones are Resize Window and Cookie tool. With Resize Window extension, you can test how well a page fits into different screen resolutions without having actually changing the screen resolution. Cookie tool allows you to view and edit cookies under current domain. There are numerous other features that Web Developer provides. Download and Explore them yourself.

ss3.gif
Line Guides and Ruler in Web Developer extension

iMacro

For testing purpose, web developers frequently need to perform repetitive tasks. An example scenario of such task is the testing of registration form. To ensure the form is functional, one needs to enter some garbage data before a test can be performed, and it needs to be redone upon the next test. This kind of repetition is inarguably annoying and the solution is iMacro.

iMacro is yet another mighty extension of Firefox. iMacro supports many kinds of browser automations. It can automatically fill out HTML forms, change browser URL, crawl information from web pages, simulate mouse click, and more. Download iMacro.

Here's a sample macro that fills out HTML form in iMacro:

URL GOTO=http://127.0.0.123/account/login
TAG TYPE=INPUT:TEXT ATTR=NAME:email CONTENT=unknown@gmail.com
TAG TYPE=INPUT:PASSWORD ATTR=NAME:password CONTENT=111222

Firebug

There isn't a need of introduction for this creature, for it is so well known and everyone loves it. It is has almost everything that a web developer can ask for (beware I said almost): A point-and-click DOM inspector, a JavaScript debugger, a HTML tree node explorer and a logging console. Firebug can monitor XHR and display the request detail in the console window. So this is a must have extension for every web developer, especially Ajax developer.

In Firebug, you can edit many things on the fly. For instance, you can change CSS property of any HTML element on a web page without changing a line in the actual file. You can also run JavaScript code directly from Firebug's console. Download Firebug.

That is my list of Firefox extensions that I find the most useful to me. Hopefully they can become useful to you as well.

If you find this post useful, consider donating a few bucks to help the server running cost.

Go to Top

More interesting posts ...

Subscribe to keep track of your comment.
2 Comments so far
  1. Mike January 20, 2008 11:21 pm
    Thanks for sharing! I'm a big fan of Firefox. Discovered useful add-ons in your article.
  2. Dali Burgado January 21, 2009 9:24 am
    Hi There,
    Great post. I love Web Developer and Firebug. I definitely will check out the others.

    I appreciate you!
    Dali Burgado
Code Central Special

Polls

  • Which browser are you using to browse this site (v.2)?

    View Results

    Loading ... Loading ...