Handy Firefox Tools for Developers / Designers

I'm a mac guy, and my browser of choice is Firefox. I find it fast, intuitive, and reliable, especially since they've updated to version 3. However, my favorite thing about Firefox are the add-ons .  Add-ons allow you to customize Firefox. They allow you to change the look and feel of the browser, and provide you with some handy tools as well.

Here's a list of my favorite Firefox tips and tools.

Firebug
https://addons.mozilla.org/en-US/firefox/addon/1843
Firebug has quickly become the tool du jour for web developers, and with good reason. It handily edits, debugs, and monitors CSS, HTML, the Document Object Model (DOM) and JavaScript on live sites. Simply open it, hit the Inspect button, and Firebug tells you just about everything you would want to know about an item on a page. Hit the Edit button, and make changes on the fly. Modify and debug JavaScript variables while the scripts are running. Firebug has become so powerful and widely used that it now supports it's own add-ons. It's no wonder this tool is downloaded over 100,000 times each week.

Screengrab! 0.95
https://addons.mozilla.org/en-US/firefox/addon/1146
Yes, OSX has screen capture functionality. But what if you want to capture an entire web page, one that doesn't fit on you screen? Sure, you could do multiple captures, and then combine them in other software. But that's wasting time, especially when there's Screengrab! This handy add-on will save what you can see in the window, the entire page, just a selection, a particular frame... basically it saves webpages as images.

Colorzilla 2.0
https://addons.mozilla.org/en-US/firefox/addon/271
ColorZilla allows you to get a color reading from any point in your browser, quickly adjust this color and paste it into another program. Use it to “Zoom” the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. It also has DOM spying features for getting various information about DOM elements quickly and easily.

CSS Viewer
https://addons.mozilla.org/en-US/firefox/addon/2104
This handy little add-on allows you to quickly see the CSS values of any item on a page. Simply click the icon in the toolbar and a pop-up window will follow your cursor on the screen. Although not as robust as Firebug, this handy app is quick and informative.

Keystrokes
No list of Firefox tips would be complete without a list of keystrokes. In researching these, I found a few new ones, and a few forgotten favorites. Enjoy.

COMMAND + W close tab
COMMAND + R refresh page
COMMAND + T new tab
COMMAND + U view page source
COMMAND + I view page info
COMMAND + O open file
COMMAND + P print
COMMAND + A select all
COMMAND + S save as
COMMAND + D bookmark the current page
COMMAND + F open find panel
COMMAND + G find next (if nothing is in the find box it just opens find)
COMMAND + J download manager
COMMAND + K change focus to the search field
COMMAND + L change focus to the address bar (also F6)
COMMAND + B open the bookmarks panel
COMMAND + N new window

COMMAND + # switch to the # tab
COMMAND + +/- increase/decrease text size
COMMAND + zero change text size to default
COMMAND + up/down toggle search engines when in the search field (CTRL+K)

COMMAND + TAB switch forward through tabs
COMMAND + SHIFT + TAB switch back through tabs
COMMAND + SHIFT + W close entire application
COMMAND + SHIFT + I open DOM inspector

SHIFT + F10 opens the right-click context menu (ESC to close)

F1 help
F3 find
F5 refresh
F6 change focus to the address bar (also ALT+D or CTRL+L)
press F6 again and change focus back to the page