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.
Disable:- will give following options (including disable cache / javascript).
Cookies:- will give many options to manipulate Cookies/session 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.
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.
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...
Images: This menu has some useful options too.
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..!
Miscellaneous: Edit Html is one of the handy option and you can see what we can do with it in following screenshot.
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. 
Resize: let's you resize your browser in standard as well as your defined resolution.
Tools: Handy options for Validation of document against lots of standards. (Local web page validation options is available too.)
View Source: View Generated Source will also show source code generated by DOM manipulation after initial page load.
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.
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.
#1 by Casey on March 11, 2008 - 2:53 am
Quote
I’ll argue that while the Web Developer Toolbar is awesome, Firebug is more awesome, and more useful.
#2 by Adam on March 11, 2008 - 5:12 am
Quote
It all looks good, but the Firebug seems better. Firebug also comes with a javascript debugger. What more can you ask for.
#3 by Arun Sharma on March 11, 2008 - 10:11 am
Quote
Some more goodies for people using web developer
ctrl+shift+h – get w3c validation
ctrl+shift+f – get attribute,element information,position etc
ctrl+shift+a
#4 by Maciek on March 11, 2008 - 1:42 pm
Quote
I am using Web Developer as a good addition to Firebug, which IMHO is the BEST EVER extension for Designer/Web Developer.
Web Developer has a number of features not available in Firebug, like displaying a lot of on-page information, disabling certain parts of the site (CSS, JS etc.) but the highlighting of selected HTML elements is much better in Firebug. First, it is totally intuitive and interactive. And it allows one to see all information concerning the element at the same time (HTML, actual rendered view, CSS, DOM properties etc.).
And the funniest part is that Web Developer and Firebug seem to be design to complement each other: WD is available in the tool bar whereas FB is in the status bar, so you can use them simultaneously!
#5 by Maciek on March 11, 2008 - 1:43 pm
Quote
Forgot one more great Web Developer Extension feature: the validation of _local_ HTML/CSS.
Trackback: Web 2.0 Announcer
#6 by Adrian on March 11, 2008 - 3:24 pm
Quote
Perhaps you should check out Firebug. It’s been a big deal for a year now, and does various thigns much better than web dev toolbar.
#7 by Dharmavirsinh Jhala on March 12, 2008 - 1:25 am
Quote
Hi all firebug lovers I love firebug too.
and I am suppose to write my next post with list of all great features of Firebug with quick tutorial for those who don’t know how to utilize javascript debugger too.
Thanks a lot for all your reply..!
Pingback: Bookmarking the web - w11/2008
#8 by Web developer on March 20, 2008 - 3:01 pm
Quote
Hey simply the Firefox toolbox is great for every Web developer.
#9 by Stronghold on March 30, 2008 - 3:57 pm
Quote
Very nice
btw very good tips i will use them. Some of them i did not knew.
Pingback: Faster Page Loads with Apache mod_deflate output filtering | BLOGS@DiGiTSS