Ten Most Popular Firefox Plugins of Web Designers

By / Oct 22, 2009 / Tools
shares

Firefox is the browser of choice for most web designers. Not only does it display websites the way they should be displayed, but it also gives users the ability to add tons of functionality and customization through add-ons or plugins. Since Web designers spend most of their day working in a browser it makes since to be able to do things like make edits to css without switching to a different application.

If your a Firefox user, but have yet to try any extensions, here are 10 of the most popular among web designers. You should really give them a try. They may just make your life a lot easier.

Firebug

firefox plugins

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

Web Developer

firefox plugins

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. One of my favorite features of this extension is being able to edit css of any web page and see the results in real time.

ColorZilla

firefox plugins

ColorZilla assists web developers and graphic designers with color related tasks – both basic and advanced. With it you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes.

Codetch

firefox plugins

Codetch gives you the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.

Window Resizer

firefox plugins

Window Resizer is useful tool for testing different screen sizes. It accurately resizes your browser so you can test to see if the web page you’re working on looks right in all of the standard resolution sizes. It supports the 640×480, 800×600, 1024×768, 1280×1024, 1600×1200 resolution sizes.

Pixel Perfect

firefox plugins

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.

Pencil

firefox plugins

Pencil is a free and opensource tool for making diagrams and GUI prototyping that everyone can use. Some of the key features include: multi-page document with background page, on-screen text editing with rich-text supports, and PNG rasterizing.

FireFTP

firefox plugins

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

FireShot

firefox plugins

FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part). Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.

MeasureIt

firefox plugins

MeasureIt allows you to draw out a ruler to get the pixel width and height of any elements on a webpage.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

20 Comments

  1. Bariski | TutZone.net
    October 22, 2009

    Very nice list. I agree they are very important for every designer and blogger also.

    Reply
  2. Cosmin
    October 22, 2009

    I don’t understand why some people use Window Resizer and MeasureIt with WebDeveloper Toolbar also installed.

    WebDeveloper has both of these functionalities included (and personally, I even think they’re better than their stand-alone counterparts)

    Reply
  3. Marty Sullens
    October 22, 2009

    I have to admit I go “Plugin Crazy” every now and then when it comes to Firefox – but in the end I always end up turning them all off because it slows down Firefox so much.

    It also does not help that Firefox is getting heavier and heavier every version :(

    We need Firefox Lite!

    Reply
  4. stili.st
    October 22, 2009

    nice! i published a similar article on my blog some days ago, but its kinda new and in german language.

    Reply
  5. Charlie Nielsen
    October 22, 2009

    I have to agree with Cosmin. Skip a few addons a use Web Developer properly. Furthermore some of these tools are buil in on Mac OS X, so I gues you guys are PC users ;)

    Reply
  6. Todd
    October 23, 2009

    Great plugins!

    I had never heard of the measureit, and it is exactly what I need right now.

    Thanks!

    Reply
  7. Autonomy
    October 23, 2009

    Marty, word about the increasing weight of Firefox. I have been playing around with the new version of Camino simply because of the difference in speed. I am glad that Firebug is at the top of the list as I have been using it for sometime now and it has been an extremely useful tool. I highly recommend it!

    Reply
  8. Tracy
    October 23, 2009

    screenGrab is a good alternative to fireshot. It works on Linux too. Colorzilla and Firebug are ace!

    Reply
  9. designfollow
    October 24, 2009

    thanks for this great post.

    Reply
  10. aceh
    October 24, 2009

    this amazing post..thanks

    Reply
  11. Sean
    October 25, 2009

    Agree with Cosmin on this. Don’t need Window Resizer when you can do the exact same with the Resize feature of the WebDev Toolbar. Also, props to Cosmin, as I didn’t realize that there was a ruler in the Toolbar as well (never paid much attention to what was in Misc). Guess I can get rid of MeasureIt…Especially because it can be flaky on occasion.

    Reply
  12. Rob @ Creative Web Design
    October 25, 2009

    I have already used some of these in Firefox and my favourite is the Alexa add-on. It is great if you are an Alexaholic and like to keep an eye on your website’s Alexa rank.

    I don’t use too many at the moment as it slows down the load up time for Firefox on my machine (well, when I increase my RAM I’ll be able to use more).

    Will be coming back to this list when I have upgraded my RAM :).

    Reply
  13. Phaoloo
    October 26, 2009

    Firebug is always the best tool for me and I really like the Window Resizer you listed here. It helps me test the design in many resolution sizes with ease.

    Reply
  14. Yi_Desktop Sharing
    October 26, 2009

    Hi Web Design Ledger!

    Maybe you would be interested in checking out Mikogo Firefox add-on. It’s a cross-platform freeware desktop sharing app. It allows a designer to share his/her screen live over the Web with 10 others. We’ve included a great range of features to facilitate the designers’ communication with their clients. You can find more info here: http://www.mikogo.com. Feel free to contact me if you have any questions.

    Thanks!

    Yi
    The Mikogo Team
    Twitter: @Mikogo

    Reply
    • Davidicus
      January 22, 2010

      I would try both http://www.proxynetworks.com and http://www.mikogo.com/. They are similar but different enough that you may prefer one over the other.

      Reply
  15. GIVISION | Jiri Mocicka
    October 28, 2009

    Really useful post – unfortunately nothing really new apart from pixel perfect.
    THX

    Reply
  16. November 4, 2009

    Niice! I did not know about window resizer and a few of the others. Good timing. Thank you oodles!

    Reply
  17. Lepnio
    November 6, 2009

    Why not YSlow ? It can be useful to optimize the page.

    Reply
  18. robb
    November 9, 2009

    i find firebug very useful,
    even for advanced users.

    Reply
  19. Kelsey C
    January 31, 2010

    For screen and file sharing we use RHUB Web Conferencing. It has been great for my organization.

    Reply

Leave a Reply