10 Firefox add-ons for web designers

admin — Fri, 08 May 2009 18:28:13 +0000

Firefox has emerged victorious from the Great Browser War - at least as far as web developers are concerned. While it may not be the most-used browser for the everyday web surfer, Firefox is clearly the first choice of developers for a few very simple reasons. Its support for web standards is legendary, but the real super powers come from Firefox’s extensibility. With a plethora of add-ons and extensions, created for developers by developers, Firefox becomes much more than just a browser and turns into an essential part of your toolbox. Rather than digging through your source code with squinted eyes, use Firefox add-ons to pinpoint Javascript errors and debug them like a pro. Use add-ons to measure areas of your page, select colors directly from the site or view the specific CSS assigned to a pesky

element. You can even get a leg up on assuring your sites are accessible and use valid markup - all thanks to Firefox’s add-ons.

Here are 10 free add-ons covering everything from DOM inspection to screenshots, making designing and developing with Firefox a breeze.

1. Firebug + Firecookie + Codeburner

The first on our list of 10 is actually 3 separate add-ons but they are all meant to work together, and when combined they form one of the most powerful development tools available.

First and foremost, if you’re doing any sort of Javascript development Firebug is essential. Otherwise you’re really just stumbling around in the dark when it comes to debugging. Firebug not only gives you a robust error console, but also lets you add breakpoints in your code. Firebug’s HTML and CSS inspector gives you the freedom to either browse your source code in a collapsible tree, or click an element within the page to see its markup. Firebug also lets you edit your “live” HTML and CSS and instantly displays the results for you to review - no reloading, no saving.

Install the Firecookie add-on and Firebug gets a new super-power: complete cookie viewing and management. You can view the full content of each cookie, and even edit and delete them all from Firebug’s window.

Codeburner then rounds out the Firebug setup by adding a compete W3C reference lookup with search-as-you-type on HTML elements & attributes as well as CSS properties. Ever wonder which browsers support the text-transform CSS atrtribute? Codeburner will tell you that it’s buggy in IE7, but has full support in Firefox 3, Safari 3 and Opera 9.
Here are 10 free add-ons covering everything from DOM inspection to screenshots, making designing and developing with Firefox a breeze.

Download: Firebug, Firecookie, Codburner

2. Web Developer Toolbar

If writing Javascript without Firebug is like fumbling in the dark, building a site without the Web Developer Toolbar is like blindfolding yourself, tieing your hands and and trying to run through the woods without hitting a tree. Disable your cache, images and cookies, switch style sheets by media type, auto-fill forms with temp data, outline certain element types, resize the browser window to common sizes and validate your markup - all from within one toolbar. The Web Developer Toolbar does a whole lot more and is always the first add-on I install in Firefox. Give it a try and you’ll wonder how you ever got along without it.

Download: Web Developer Toolbar

3. Measure It

Ever need to know just how much space you have for a photo, or how wide a dynamically sized column is? This handy little guy lets you measure, in pixels, any area on the page. Super simple and super helpful.

Download: Measure It

4. Colorzilla

Another very simple but very useful add-on that displays the RGB and HTML color codes directly beneath your cursor. With a click, Colorzilla will copy the HTML color code to your clipboard for use in your favorite editor.

Download: Colorzilla

5. CSS Viewer

CSS Viewer takes one of the features in the Web Developer Toolbar and makes it a little easier. Just point your cursor at any element on the page and CSS Viewer will show you all of its CSS attributes, from size and position to fonts and colors, all in an easy to read overlay.

Download: CSS Viewer

6. ScreenGrab

A simple screenshot tool, Screengrab will save the visible area or the complete page as a file on your desktop. You can choose to save as a png or jpg, and even auto-add a datestamp to the file name

Download: ScreenGrab

7. Gridfox

If you use grid layouts or want to learn how, Gridfox is for you. It displays a simple overlay on your page to help you align elements to both vertical and horizontal grid lines. You can easily set the column and row sizes and spacing, choose from left-aligned, right-aligned or centered layouts and set the opacity of the overlay.

Download: Gridfox

8. User Agent Switcher

If you swap style sheets or display alternate content based on which browser the user is viewing your site with, this add-on will tell Firefox to pretend it is another browser. Choose from Opera, Internet Explorer, or add your own custom user-agents to the list.

Download: User Agent Switcher

9. PageDiff

Those of you familiar with the linux/unix “diff” command will instantly understand what this add-on does. Compare the source code of any two pages and see where they differ. This is very useful when comparing staging and production environments, or comparing a backup to a current deployment before restoring any code.

Download: PageDiff

10. Cache View and Cache Status

CacheView is a GUI Front-end of "about:cache" that allows searching,sorting and saveing memory and disk cache files. Very usefull when 1) You want to see what is in your cache and 2) Save things from memory or disk cache since firefox has a very cryptic way of storing it's cache.

Cache Status is a customizable presence to your browser window's statusbar that gives you up-to-date information on your browser's cache usage, both RAM and the hard drive. The presence also has a right-click context menu, where you can easily clear your browser's cache. It can also automatically clean your cache when it reaches a specified level, through its Options.

Download: Cache Viewer, Cache Status

ADM Blog » designer