Firefox Web Developer Toolbar
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.
Viewing CSS - Ctrl+Shift+C
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?
Display Form Details
Excellent for showing all field types, names and values
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.
Display Image Paths
Very handy when you want to see the path of broken images etc
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
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.
When you want to measure an element on the page
When you need to get the latest data, particularly usefull when working with flash content
800 x 600
To test your page in a different resolution
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
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 :)