Many web-developers and designers are familiar with one of the most powerful firefox extensions for web work, but many are not aware of it’s full potential. Here I’ll round up all I can about this nifty plugin and hopefully show you something that you may not know.

Navigation

1. CSS
2. View Page Information
3. Display Element Information
4. Populate Form Fields

Color Coated Goodness

• Yellow text is the location of an item. (ex. Start > Run)
• Red text means it’s a keyboard shortcut! (ex. Command/Control+Shift+R)

Where do I find this toolbar?

Well right here, of course. And it is completely useless without Firefox.

Quick note about the toolbar

The main thing people use it for is Validating CSS and HTML under the View Source option, and most students just stop there; they don’t bother to checkout the rest of the tasty features.

CSS

The Web Developer toolbar has many, many features. Some which alot of people find useful, and others that only a select few find necessary. Some of the most commonly used features are the CSS options.

Shortcuts:

• CSS > Disable Styles > Disable All Styles or Command/Control+Shift+S ~ Turn off the CSS for the site currently in the tab.
• CSS > Edit CSS or Command/Control+Shift+E ~ Edit the CSS live.
• CSS > View CSS or Command/Control+Shift+C ~ View the CSS sheet in a separate tab,

I find myself using this tool more than the others at times, for it is a requirement when solving that “How did they make that?” question.

View Page Information

The information toolbar is one of the most over looked options in the Web Developer kit, probably due to the staggering amount of options that are available. Most of my students find it intimidating and don’t bother to click on every option to see what it does. Well luckily for them, I do.

Shortcuts:

• Information > View Page Information ~ View a summary of the page’s elements.

One of the key items in the list is the “View Page Information” option. This gives you a nice little summary of the page and it’s elements. It shows you any forms on the page and the type of button they use, it also list out every image on the page and the option to “Save as”. This is really handy for getting that image that has “Right-Click-Protection” on it, not that I condone stealing images, but if you have to save the world by doing so, then by all means do it.

Edit: Erika let me know that Command-I (Mac) and Control-I (PC) bring up this nifty tool, thanks!

Display Element Information

Need a quick way to see exactly what Div you’re looking at while building your site? Read on.

Shortcuts:

• CSS > Information > Display Element Information or Command/Control+Shift+F ~ Allows you to click elements and view their div properties in realtime.

This handy tool brings up a nice little info box on top of the current tab, and turns your cursor into deadly cross-hairs. Now, feel free to point and shoot at any element on the page, and it’ll bleed out all the juicy, filthy info you need. It’ll give you the div hierarchy, width and height in pixels, and all of the CSS attributes (font, color, etc.).

Also, if you notice at the top of your browser, above the web developer toolbar, you’ll see a new bar listing div hierarchy, if you want to copy that line to your clipboard, just press C.

Populate Form Fields

This button will automatically fill in any form field on the current page with generic text, making it test out the PHP forms you’re debugging.

Shortcuts:

• Forms > Populate Form Fields ~ Fills in any form box on the page with the appropriate text.

Submitting Your Thoughts

If you can think of something else worthy of being a “Secret” of the Web Developer toolbar, please feel free to comment below or just email me at zakfrazier@gmail.com. Thanks, and welcome to Yellatducks.com.

Posted on Wednesday, February 21st, 2007 at 10:54 pm under Firefox, Web Design.