13 helpful Firefox add-ons for designers and developers

April 23, 2008

Last time I presented you 3 must-have IE add-ons that I use for design and development. This time I’ll show you 13 helpful Firefox add-ons that I also use.

1. CSSViever

This is a simple hover CSS property viewer. Simple, but yet – very useful.

CSS Viewer

2. ColorZilla

This tool enables you to pick up a color from any point in your browser and reuse it in other applications.


3. Palette Grabber

Creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, or OS X based on the current page.

4. ScreenGrab!

Screengrab! saves entire webpages as images. It will save what you can see in the window, the entire page, just a selection, a particular frame…

5. Measureit

Draw out a ruler to get the pixel width and height of any elements on a webpage.


6. View Formatted Source

Displays formatted and color-coded source and optional CSS information for each element. You can see exactly which CSS rules match for an element. The rules are displayed including file name and line number.

View Formatted Source

7. Console²

Console² (pronounced Console Squared or Console Two) replaces the JavaScript Console with what could be the next generation Error Console.


8. FireBug

This well known tool integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.


9. Web Developer

Adds a menu and a toolbar with various web developer tools.

Web developer

10. CS Lite

This extension will allow you to easily control cookie permissions. This is a lighter, scaled down version of CookieSafe. It contains less features, but is considerably easier to use.

11. JS View

All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. You can use the JSView extension to solve the problem.

12. UrlParams

Shows you the GET and POST parameters of the current website in the sidebar. You can alter their values, add new parameters, switch get/post and more.

13. Regular Expression tester

Regular Expressions Tester offers developers functions for testing their regular expressions.
The Tool includes options like case sensitive, global and multiline search, color highlighting for found expressions, a replacement function incl. backreferences, auto-closing of brackets, testing while writing and saving and managing of expressions.

Regular Expression tester

I discuss these topics on twitter too. In case you feel nostalgic, my RSS feed is still working.


  • önder (May 17, 2008)

    good list.

  • restaurant software (May 20, 2008)

    i like firebug.

  • Yannis (May 21, 2008)

    This tools are great. Makes life easier. I like the CSS viewer. When ever I see a design I like, I usually look at the html source code, then will call up the css style. The CSS Viewer save two steps.


  • Asma (May 23, 2008)

    Awesome blog … and very helpful!

    //Pakistan’s not in the list BTW :)

  • Janko (May 23, 2008)

    Thank you Asma, I’ll add Pakistan in next version ov my blog :) It is initially not in BlogEngine.NET list. I’ll have to check other countries as well. Sorry for that.

  • Lee (May 31, 2008)

    Thanks I had missed that CSSViewer!! I only ever use Firebug but I’ll give this one a whirl

  • Augusto (August 4, 2008)

    Yay!! Thumbs up for CSS viewer and screen grabber! :D

  • Website monitoring (December 18, 2008)

    I could live without JS View or Colorzilla, but Firebug and Web Developer are must-have plugins for every webmaster.

  • Jamie Dolan (February 11, 2010)

    Firebug is great, one of my favorite extensions for Firefox. It save me hours of hunting down the location of elements in style sheets.

    Jamie Dolan
    Neenah, WI