Scott Stroz (aka boyzoid) has a nice little post on the Firefox Web Developer Toolbar by Chris Pederick.
The toolbar (which has been around for ages) is a must have for any web developer, I thought I’d post some of the tools including their shortcuts which I use regularly.
CSS
Viewing CSS - Ctrl+Shift+C
Opens up a new tab with the current pages CSS. I also use the [JSView](https://addons.mozilla.org/firefox/2076/) for this because it lets you view and individual Javascript or CSS files
View Style Information - Ctrl+Shift+Y
In this mode you can hover your mouse over any area of the page and the status bar will show you where you are in the markup
Edit CSS - Ctrl+Shift+E
This one I use all the time, you can edit CSS (even on a remote site!) in real time. Saves making changes to your CSS, saving the file, switching to your browser and refreshing when you want to experiment with your CSS/markup
Disable Styles - Ctrl+Shift+S
Now we all test our pages to ensure they display correctly with no styles don't we?
Forms
Display Form Details
Excellent for showing all field types, names and values
Show Passwords
If ever you need to see the value of a password field, this saves you having to view source
Clear Radio Buttons
Ever wished you could uncheck a radio button?
Populate Form Fields
When you're developing with forms it is a PAIN to keep filling them out every time you want to test a submission.
Images
Display Image Paths
Very handy when you want to see the path of broken images etc
Information
View Color Information
I sometimes use [pixie](http://www.nattyware.com/pixie.html) for this, but it is really handy to get hex values for all colours on the current page
Miscellaneous
Edit HTML
Much like edit css, this allows you to edit your HTML in real time without needing to flick between your editor and a browser. Of course this doesn't actually save changes to your file, it's best used to see what things look like before deciding on the final edit to make in your file/IDE.
Show Ruler
When you want to measure an element on the page
Clear Cache
When you need to get the latest data, particularly usefull when working with flash content
Resize
800 x 600
To test your page in a different resolution
Tools
Validate
There are a lot of tools which you should use to validate your pages before going into production environments. CSS and HTML are 2 which I validate regularly. HTML shortcut is Ctrl+Shift+H
Javascript Console - Ctrl+Shift+J
When working with Javascript, the console keeps you informed about any bugs in your code. Note that [firebug](https://addons.mozilla.org/firefox/1843/) is also a great tool for this.
Validate Local CSS
When you're working in a development environment, external site might not have access to your web site.
All in all the web developer toolbar provides a wealth of information and can save you a LOT of time and heartache in day to day development.
Learn to know and use these tools and you’ll be smiling wider in no time :)