10 Firefox Add-ons for Web Designers

by jeff

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 <div> 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.

1. FirebugFirst 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.

1. FirecookieInstall 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.

Get Firebug, Firecookie, Codeburner

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.

2. Web Developer Toolbar

Get Web Developer Toolbar

3. Measure It

3. Measure ItEver 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.

Get 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.

4. Colorzilla

Get Colorzilla

5. CSS Viewer

5. CSS ViewerCSS 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.

Get CSS Viewer

6. Screengrab

6. ScreengrabA 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.

Get Screengrab

7. Gridfox

gridfoxIf 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.

Get Gridfox

8. Firefox Accessibility Extension

8See how your pages will be displayed when viewed with assistive devices – high contrast, images disabled, etc.  This add-on will go a long way in helping you design accessible sites and includes links to FAE, WAVE and other accessibility evaluators.

Get Firefox Accessibility Extension

9. User Agent Switcher

9If 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.

Get User Agent Switcher

10. PageDiff

10Those 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.

Get PageDiff

email it digg it del.icio.us Technorati links