Six Essential Firefox Extensions For Web Designers

Extensions are what make Firefox a truly great browser. Not only do they add extra functionality to its already-great out-of-the-box features, they also help define the role Firefox plays in a computer user’s life online. Web designers, for example ought to have the following set of extensions installed:

ColorZilla

Before this extension came along, copying color values from web pages meant taking a screenshot of the browser window, opening your favorite image editor, pasting the screenshot there, and then using the eyedropper tool. With ColorZilla, you get the same functionality right inside your browser, sans the whole arduous process. Just click on it to activate the tool, and click anywhere on the web page to get the color value for that coordinate. You may then copy that color value—available in a variety of RGB and hex formats—to the clipboard for pasting into your image editor, or a stylesheet document.

ColorZilla also features DOM inspector, color picker, and page zooming capabilities.

Web Developer

Web Developer is an extremely powerful web design/development toolbar companion that packs everything but the proverbial kitchen sink. This makes it a must-have for serious web designers, as it helps you dissect all aspects of a web page. To name a few, Web Developer allows you to:

  • Display an element’s attributes and style properties, as well as draw colored outlines around them;
  • Edit linked/embedded stylesheets in the sidebar while previewing—in realtime—any changes made to the styles;
  • Validate your HTML, CSS, and RSS documents via the W3C Validation Services;
  • Resize your browser window to standard resolutions, or to custom sizes.

IE View, OperaView

A good web designer always tests in multiple browsers, and with these two extensions, cross-browser testing is just a couple of mouse-clicks away. IE View and OperaView enable you to open your currently-viewed page from Firefox in Internet Explorer and Opera, respectively. Sure, you only save a couple of clicks here and there, but in the end it’s all about streamlining your work process.

Screen Grab!

Need a quick way to get sample screens to show to your clients? Tired of having to stitch several screenshots of a long page in Photoshop? Screen Grab! takes care of that. It automatically scrolls around the whole page, taking snapshots of each portion. It then stitches them together and outputs it into high-quality PNG format.

Note: Screen Grab! requires Java 1.4 or higher to work.

Update 2006-03-14: Alex found an alternative released just a few days ago that takes advantage of Firefox’s <canvas> element, instead of Java. It’s called Pearl Crescent Page Saver, and I’m assuming that since it uses <canvas>, it will only work in FF 1.5 and up.

wmlbrowser

wmlbrowser is a simple extension that allows you to view WML pages in Firefox. This will come in handy for mobile web developers, especially now that mobile phones and other similar portable devices are joining the mainstream Web bandwagon.

Tip: Couple this extension with Web Developer’s small screen rendering function, and you have yourself a mobile device emulator!

16 Responses to “Six Essential Firefox Extensions For Web Designers”


  • That’s very very handy, thanks.

  • @screen Grab – There is a better way in using the Pearl Crescent Page Saver without Java, simply to install simply to use check out! http://pearlcrescent.com/products/pagesaver/

  • Alex: Good find, thanks for the link! Although I hope the bug that prevents Flash portions from being included gets fixed ASAP.

  • Nice article. I have to say, Colorzilla really is a lifesaver when it comes to being a web developer.

    At Alex – Thanks a bunch. I’ve been looking for a good Firefox screen grabber for ages. And anything that uses Java just turns me off.

  • thanks for the above recommendations gentlemen.

    for color sampling, ive used ColorCop for several years now (not a FireFox extension):
    http://www.datastic.com/tools/colorcop/

    now, as for my favvorite extension though (as mentioned above) is the Web Developer Toolbar.
    simply the best ive ever installed, coupled with IE Tab.

  • Since I do all of my CSS coding in TopStyle Pro and it has a brilliant color picker system, there’s no need to use an external app. The funny thing is, why would you ever want to color pick while you are using Firefox? I’ve been designing professionally since 1992 and never once have I ever wanted this functionality. I just don’t get it. The only time that I ever use color picking is while coding CSS or desiging in Fireworks. They both have excellent color picking features.

    TopStyle Pro and Fireworks are all I’ll ever need.

    The Web Dev extension is pretty useless to me too. The only reason why I use it is because the Mozilla team took out the CSS switcher icon in the status bar of Firefox and removed support for it completely. The Web Dev extension has the nice CTRL SHIFT S feature. Everything else is just fluff.

  • @Craig

    I use the color picker all the time, it’s very useful imo, for all sorts of things, as is most of the webdev toolbar, the CSS changer, the image info, the resize tool, Outlining elements etc. are all really great when web developing imo.

  • Craig: Ok, so the Colorzilla isn’t for everyone, but being into CSS coding is all the more reason to have Web Developer extension installed.

    I cannot tell anyone enough how useful this particular extension is. I can investigate in detail my CSS-based layouts and “debug” any display inconsistencies, emulate image-disabled or javascript-disabled browser experiences, check out how my site looks at different resolutions, display information for each element, edit CSS “on the fly”, quickly validate my code… the list goes on. :)

  • Web Developer is shockingly useful. I’m surprised that anyone could fail to see its uses; here are some I use frequently:

    – Quick disable of Javascript
    – Quick disable of styles
    – View color information (to check I haven’t introduced an extra, similar color)
    – View document outline (tells me whether my document is structured well for screen readers or keyboard nav in Opera)
    – Unvisit links
    – Several of the Outline options, but especially outline current element
    – Resize window (viewport)
    – Validate local HTML (the HTML tidy extension is better for constant background validation, but it’s not the gold standard W3C validator)

    And then you can reset all those options with one toggle.

    WebDev extension rules :D

  • Lesson for Craig: just because you don’t see a use for something doesn’t mean other do not.

    Once you get deep in to CSS and implementation design to website systems, you’ll find Colorzilla, Measureit, web dev, dom inspector all extremely useful.

    And then you will discover Firebug… which is enormously useful. View a dom tree of the page, click on any element, see the html structure, what css is being applied, in what order, see computed value, make changes in real time – great for both debugging and developing.

  • I can’t believe firebug has only been mentioned once. Then again, the page is titled web designer and not web developer. Out of the ones mentioned firebug for me is the one i can’t live without.

  • Super-Duper site! I am loving it!! Will come back again – taking you feeds also, Thanks.

  • This blog aided me somewhat in narrowing down some problems with the latest release candidate, Why do they often leave out vital information when they upgrade? It may be minor to them but not for us! I’m sure i’m not alone either.

  • Another great tool is MeasureIt, which allows you to measure the size of images, layouts, elements on the page with the browser. It’s found at https://addons.mozilla.org/en-us/firefox/addon/measureit/

    • Ah, but the Web Developer Tool also has a ruler function. Still, great find! Thanks for the addition.

      Though, I’d like to see a similar tool that has a snap feature that detects the edges of elements and assumes the element you’re trying to measure.

  • Hi Brownspank
    Am I missing something – you didn’t mention Firebug!

    Or has it been overtaken with “Web Developer”?

    I use Firebug all the time.

Comments are currently closed.