Raindrops on roses and whiskers on kittens…yada yada yada (I mentioned the kittens). Here are a few of my favorite Firefox things: Web Developer, Pixel Perfect, ColorZilla, Measure It and Pixl Grabber.
If you are not yet using the Firefox extension Firebug, run–don’t walk–to downloadville. It is a must-have Web tool, especially if you are working with content management systems where the cascading stylesheets tend to look like Victoria Falls. While the extensions in this series do not rely upon it, some will integrate with it. If you are asking “What is Firebug?”, have a read of “Firefox and Firebug: A Developer’s Swiss Army Knife”, from the HTMLGoodies.com archives.
Okay, where were we? Oh, right, bright copper kettles and the Web Developer extension.
The Web Developer extension for Firefox (and Opera) is a mother lode of Web tools.
Below are a few of my faves–available through Firebug:
DISABLE
The Disable menu offers several options, but the one that you will want to select for certain is “Disable Cache”. If you prefer to cache websites viewed for personal use, this extension makes it quick and easy to toggle it back on.
Under the “Disable JavaScript” option, enable “Strict Warnings” to help you debug JavaScript problems.
COOKIES
Disabling cookies, or at least session cookies, is helpful for troubleshooting or when changing users in a content management system (CMS).
CSS
The CSS feature is handy for toggling your styles on and off. Ever stared at a seemingly perfect external stylesheet bewildered as to why your page is not displaying properly…only to discover a conflicting inline style (which takes precedence)? Well, before your eyes glass over, use the Disable Inline Styles option to help troubleshoot.
IMAGES
Image load times are not the problem that they were years ago (since high-speed broadband is more readily available), but having a tool to manipulate their display is useful. Toggle images off to see how your site would look to those shunning your graphics (if they still exist). Or, use this to test how your site looks initially (before graphics have loaded) for users on slow internet connections, such as dialup. Some users (hello!) won’t bother to wait for large images to load, so you should be aware of the effectiveness of your textual content.
“Display Alt Attributes” is a great option for checking for that missing data and for evaluating the effectiveness of your ALT keywords.
MISCELLANEOUS
Boy, the Miscellaneous flyout is chocked full of goodness but, IMO, has three standouts: Small Screen Rendering, Line Guides, and Ruler.
The “Small Screen Rendering” option will resize your display to mimic what your site might look like on a smart phone.
“Line Guides” will display on the screen horizontal and vertical lines for the X and Y axes of a given point on your page. This is very helpful for determining values to use for (CSS) absolutely positioned objects.
You can change the color of the line guides and add additional ones, if needed. A drag-n-drop cursor lets you easily adjust the guides, and an info box displays the grid position.
“Display Ruler” also is helpful for determining X-Y position of a selected area or for measuring available space within a layout. For example: If you’ve built a page with text only and now want to embed a photo, the ruler is a nice tool for helping you mock up the size for your inserted image.
A drag-n-drop cursor lets you easily move around your defined area block and resize it accordingly. Dimensions and coordinates are shown in the toolbar area of the browser.
(Note: A later article will introduce another ruler extension that is independent of the Web Developer extension.)
RESIZE
A tool to resize your browser to mimic different screen resolutions is always handy. This feature gives you the option to resize the browser window or the viewport. Resize to preset or custom sizes.
Summary
Installing the add-on is as simple as clicking the “Add to Firefox” button of the extension’s download page (if using Firefox to do so), then clicking Firefox’s menubar {Tools | Add-ons} to complete the installation and enabling.
Comment to share some of your favorite features and examples of how you use them.
