11 Best Web Developer tools for Firefox and Internet Explorer

Here are 11 web developer tools & add-ons that i personally use and find them very useful. These are the tools that i need whenever i am doing any web application development, In their absence i feel i have become a handless person.

This list is in priority order of my usage or in other words, their importance to my work.

1. Firebug
2. Measure It
3. ColorZilla
4. Web developer Tool bar
5. Del.icio.us Bookmarks
6. YSlow
7. Screengrab & FireShot
8. IE Developer Tool bar
9. Delicious Button for Internet Explorer
10. DebugBar
11. Nikhil’s Web development Helper

Add-ons That I use on Firefox

All these extensions complement each other really good. check out this screenshot to see their exact location.

1. Firebug

If I have to choose between all these plugins I will choose firebug. It is a very versatile tool, which provides ability to see html source code in a formated manner. You can see style sheet applied to each and every element in the webpage and you can see all the ajax request headers. You can actually edit the css to see them affecting the website in real time. this is swiss army knife of web development world. Download the firebug.

2. Measure It

A very handy and simple tool, Measure It allows you to measure the width and height of any area in the webpage. You don’t have to any image editors any more to get the width and height of that block. Download Measure It.

3. ColorZilla

This is a very cool color picker tool that is available for Firefox. If you want to know the color of any thing opened in the web browser, yes even images, then this is the tool for you.

You can see all the options that are available. Download ColorZilla.

4. Web Developer Toolbar

This is another very useful tool, You can use this to disabling js, css images etc to simulate different conditions. You can read and delete cookies, clear caches, enable or disable form elements and lot of other things easily. Get the Web Developer Toolbar.

5. Delicious Bookmarks

Well, In general if you see, it does not contribute to web application development directly, but it’s ability to share my bookmarks across different machines that i use, It becomes very valuable. After all those book marks are all the references collected from the web that are related to my web development activities. Get Delicious Bokmarks.

6. YSlow

A plugin from yahoo, this one helps me analyze the speed of my website as per yahoo’s recommendations for optimizing and speeding up the website for my users. Get YSlow.

7. Screengrab And/Or FireShot

I was using screen grab for capturing screenshot’s of webpages that i liked, and sometimes, to show my colleagues what’s wrong with their layout. Get ScreenGrab.Since i have found out about FireShot, i am using it exclusively for this purpose.

FireShot provides the features to added notes without opening any image editor, this is the feature that made me fall in love with it. Get FireShot now.

Extensions That I use on Internet Explorer

Even though lot of people have to use Internet Explorer for development. Very small percentage of them know about the tools available for Internet Explorer. Lack of these tools had forced me to switch to Firefox(otherwise i would have never known about beauties of firefox.), but now that i know about these tools i use them every time i have to fix an issue in IE. It has made my life very easier.

1. IE Developer Toolbar

This is a combination of firebug+web developer toolbar+colorzilla and measure it, but for Internet Explorer. Though It does not provides all the features of firebug, still something is better then nothing. I liked the way you can add ruler with this plugin. Get IE Developer Toolbar now.

2. Del.icio.us Buttons for Internet Explorer

Well I need easy access to Delicious on every browser. Download it from Delicious website.

3. DebugBar

I use it because it provides ability to grab screen shot’s of the website and color picker in a easy access way via toolbar on top. Get the DebugBar.

4. Nikhil’s Web Development Helper

It provides ability to capture all the http request, ability for javascript debugging.

Get Nikhil’s web development helper.

Well these are all the tools that help me in my web development activity. Am I missing some tools? please help me find them.