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 
Leave a Reply