Ten Most Popular Firefox Plugins of Web Designers

By / Oct 22, 2009 / Tools

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.

  • http://tutzone.net/ Bariski | TutZone.net

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

  • http://www.themedigital.com Cosmin

    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)

  • http://www.martysullens.me Marty Sullens

    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!

  • http://stili.st/ stili.st

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

  • Charlie Nielsen

    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 😉

  • http://aridni.com Todd

    Great plugins!

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

    Thanks!

  • http://www.autonomywebdesign.com/ Autonomy

    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!

  • http://worldoweb.co.uk/ Tracy

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

  • http://www.designfollow.com/ designfollow

    thanks for this great post.

  • http://www.acehpromoweb.com aceh

    this amazing post..thanks

  • Sean

    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.

  • http://www.nzcreativewebdesign.com Rob @ Creative Web Design

    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 :).

  • http://www.gigglecomputer.com Phaoloo

    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.

  • http://www.mikogo.com Yi_Desktop Sharing

    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

  • http://www.givision.net GIVISION | Jiri Mocicka

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

  • http://www.starsunflowerstudio.com

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

  • Lepnio

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

  • http://robinferianto.com/ robb

    i find firebug very useful,
    even for advanced users.

  • http://thesocialrobot.com Kelsey C

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