11 Best Web Developer tools for Firefox and Internet Explorer(FF和IE的11个Web开发人员推荐工具)


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

Are you satisfied with your knowledge? No, then spent 15 minutes every day on PHPCamp.net a knowledge sharing website for our own PHP community

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

all firefox plugins

  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.

  1. 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. measure it

  1. 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.
colorzilla for fireofx

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

colorzilla options

  1. 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.

  1. 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.

  1. 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.
yslow for firefox

  1. Screengrab And/Or FireShot

screen grab for firefox

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 for firefox

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.

fireshot editor

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.

all internet explorer  plugins

  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.

internet explorer developer toolbar

  1. Del.icio.us Buttons for Internet Explorer

del.icio.us extension in internet explorer

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

  1. DebugBar

debugbar, a developer tool bar for internet explorer

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.

  1. Nikhil’s Web Development Helper

It provides ability to capture all the http request, ability for javascript debugging.
nikhil webdeveloper helper for ie

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.

Friday, June 10, 2011 | 其他技术