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