It has been now around 2 year since I am using Web Developer Toolbar with Firefox and believe it's kind of I can't live without...! Whenever I go if I install it immediately if I have to deal with web-development. It's really helpful when we are debugging web-applications. I would like to thank Chris Pederick for his efforts and time he spent behind development of such a useful toolbar extension for Firefox.

Here on my this blog post I am listing some of the features of this toolbar and that's my way to thank Chris by promoting it.

I believe it will be really helpful to all the developers / designers if they use it.

Below given is a screenshot of the Web Developer extension.

Web Developer Toolbar for Firefox

Disable:- will give following options (including disable cache / javascript).

Web Developer - Disable

Cookies:- will give many options to manipulate Cookies/session cookies.

Web Developer - Cookies

CSS:- View stylesheet Information is one of the very useful option and View CSS will list all CSS attached to current web page in new window.

Web Developer - CSS

Edit CSS is one of very useful feature which will give us a way to edit web-page's css on the fly and we can see the effect immediately. You can see that in following screen-shot.

Web Developer - CSS - Edit CSS

Forms: It contains few of the very useful options for debugging our application like Display Form Detail, Show Password, Make Form Fields Writable, Convrert Form Methods and so on...

Web Developer - Forms

Images: This menu has some useful options too.

Web Developer - Images

Information: View Javascript, Display Div Order are one of the useful options. There are many more and one can utilize them based on their type of development. Below image shows what Display Div Order will do..!

Web Developer - Information

Miscellaneous: Edit Html is one of the handy option and you can see what we can do with it in following screenshot.

Web Developer - Misc

Outline: Outline Table is quite handy and useful when we want to see table and cell outlines. You can see that in the screen below. Web Developer - Outline

Resize: let's you resize your browser in standard as well as your defined resolution.

Web Developer - Resize

Tools: Handy options for Validation of document against lots of standards. (Local web page validation options is available too.)

Web Developer - Tools

View Source: View Generated Source will also show source code generated by DOM manipulation after initial page load.

Web Developer - View Source

Options: Persist Features option will let you keep your selected / deselected options Persistent during concurrent page loads so that we don't need to check/uncheck them each time.

Web Developer - Options

I believe Web Developer Toolbar is handy and must have TOOL for all web developers / designer... doesn't matter what technology/language they are using.

You can download it from official Firefox Add-ons site https://addons.mozilla.org/en-US/firefox/addon/60

Web Developer extension Home: http://chrispederick.com/work/web-developer/
Here, I would like to mention similar toolbar for Internet Explorer 7 which you can download from http://www.ie7pro.com/. It has similar feature-set but that's all in IE way.