10 Killer Firefox Add-ons For Web Designers and Developers

I hope it doesn’t come as a big surprise that Mozilla Firefox is easily the most desirable browser for web designers and developers, but if it does, you’re in for a quite a treat!

So why does Firefox have a firm grip on all of the internet geeks out there? The answer is quite simple – add-ons. Downloadable add-ons can make your design and/or developing experience much more efficient and fun, and while there are thousands of add-ons available for nearly any situation, there are some that are truly geared towards web designers and developers.

Below, we’ll go over 10 of the hottest add-ons for web designers and developers.

1. Web Developer 1.1.6

Without a doubt, Web Developer should be on every Firefox “top add-ons” list. I’m sure most developers reading this will nod their head in agreement when I say, “What did we do before this came out?”

Web Developer

The Web Developer add-on adds a nice menu and toolbar to Firefox that is full of wonderful web developing tools to make your life easier. Web Developer allows you to do anything from disabling certain features on a page (like JavaScript, page colors, etc…) to editing the CSS of any webpage in real time. Features like that allow you to save all sorts of time, and in the design/development world, time is most definitely money. Web Developer is an absolute must-have.

Download Web Developer

2. Firebug

Another heavy hitter in the developer’s arsenal, Firebug is another one of those add-ons that you simply can’t live without. Firebug allows you to do things like “find HTML elements buried deep in the page”, and pretty much hands over a golden plate of information at your fingertips.

With Firebug, you can edit and debug HTML, JavaScript, and CSS in real time and figure out why you’re getting that pesky error message. You can also monitor network activity (to figure out why your page is taking so long to load), visualize CSS metrics (so that you can find out why CSS boxes aren’t lining up like they should be), and so much more. There are also a ton of different extensions for Firebug that are constantly being developed.

The best way to find out what Firebug can do for you is to check out their site.

Firebug

Download Firebug

3. ColorZilla 2.0.2

This is such a handy little add-on that so many different types of users could find useful. How many times have you been on a particular site and wondered exactly what color they used for a certain text or element on their page? Probably hundreds of times, right?

Colorzilla

Now, with the click of a button you can easily grab the RGB, hex, and even get information about DOM elements on the fly. ColorZilla also gives you the ability to zoom the page and measure the distance between any two points on the page you’re viewing. That’s just awesome.

Download ColorZilla

4. ScreenGrab 0.96.1

Think about how many times in your web development life that you’ve hit the “print screen” button. Exactly. Instead of doing things the old school way, someone was smart enough to launch a free way to quickly and easily grab a screenshot of an entire page, a specific section of a page, the entire window you’re looking at, and a few other options.

Screengrab

ScreenGrab will remind you of SnagIt, only you don’t have to shell out any cash for it and it works just as well. I don’t think anyone would argue that this is another standard add-on that should be in every developer and designer’s browser.

Download ScreenGrab

5. LinkChecker 0.6.3

Even the best of the best screw up the occasional link on a page. That’s why a genius by the name of Kevin Freitas built the simple, yet very useful LinkChecker add-on for Firefox. It will check if a link is valid or not, and this is easily one of those “use every day” type of add-ons that will be another valuable tool in your collection.

Linkchecker

Below is the plugin in action, on Webitect.

Bad Link Webitect

Download LinkChecker

6. Window Resizer 1.0

Testing your new site or project in several different screen sizes is crucial to your process. This simple add-on allows you to do just that. Window Resizer supports 640×480, 800×600, 1024×768, 1280×800, 1280×1024 and 1600×1200 resolutions. Talk about convenient!

Window Resizer

Download Window Resizer

7. IE View 1.4.3

Another essential step in the design/developer process is viewing the site in different browsers. The first and most important additional browser to check your work in is Internet Explorer.

IE View was created to quickly check to see how your project appears in IE, giving you a fast way to spot any problems. Again, another very simple add-on here that can help boost your efficiency.

IEViewer

Download IE View

(Note: Similar to IE View is Safari View. This is another one worth downloading.)

8. Dummy Lipsum 2.3.0

For the thousands of times you’ve copied and pasted “Lorem Ipsum” dummy text for all of your past projects, you’ll have wished you found Dummy Lipsum a lot sooner! This awesome add-on is a no-brainer for any designer or developer.

With a few clicks, you can easily generate a page full of space filler text, and you even have the option of including punctuation, showing or not showing html tags, and whether you want to start it with the infamous “Lorem ipsum dolor sit amet…” You can also have it generate the text in the form of a paragraph, words, bytes, or even a list!

Dummy Lipsum

Download Dummy Lipsum

9. HTML Validator 0.8.5.6

Instead of using a separate tool or website to validate HTML on a page, you can download this nifty little add-on which adds HTML validation inside of Firefox.

HTML Validator shows you the number of errors of a HTML page seen in an icon on the status bar when you’re browsing, which makes the process of spotting errors extremely fast and easy. While some other add-ons include this already, this is a nice hands free way to spot errors on the fly.

HTML Validator

Download HTML Validator

10. MeasureIt 0.3.8

I’m sure there have been countless times where you quickly needed the measurements of how large an image was, or how many thumbnails you could fit into one box, etc…

With MeasureIt, you can quickly and easily draw out a ruler to get the measurement (in pixels, width and height) of anything on a webpage. MeasureIt is another awesome tool for any designer to add to their Firefox browser, as it will surely speed up the process.

MeasureIt

Download MeasureIt

Wrapping Up

10 super efficient Firefox add-ons that should allow you to shave some time off of your many projects. I know there is a mess of additional helpful add-ons for designers and developers, but the 10 above are the ones that seem to be the staples among the thousands of others available.

Here are five more add-ons worth mentioning (just in case you can’t get enough):

  1. FireFTP – Instead of opening an external FTP for site updates, this is easier.
  2. Font Finder – Quickly show all the properties of selected text on a page.
  3. Colorblind Simulator – Experimental add-on that simulates what a page looks like to colorblind people. Since 10% of the population is colorblind, this is smart!
  4. SEOQuake – SEO is fundamental, so why not have a little help?
  5. Greasemonkey – Extremely popular add-on that allows you to run custom JavaScript against any webpage.

Written By Kayla

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

7 Comments

  1. Ethan

    June 21st, 2009 at 09:31 pm

    While MeasureIt has been an invaluable resource in the wordpress customizations I have done over the past few months, perhaps the most helpful tool over all on this list is Colorzilla.

    I have been to many websites and have wondered countless times what the exact color of a logo or page was. Before Colorzilla I was forced to “Print Screen” import to my graphic editor of choice and then do a color match that way. Colorzilla has definitely saved me a lot of time and headache!

  2. Leddy

    June 21st, 2009 at 10:42 pm

    I agree, Ethan! ColorZilla is AWESOME! I’m not even a full-fledged designer, and I still can’t live without it :)

  3. Cosmin

    June 22nd, 2009 at 01:42 pm

    WebDeveloper has both a window resizer and a “measureIT” ;)

    as for the others, if you’re a webdesigner, you have no excuse if you don’t use them.

    Oh, and here’s my list of plugins, in a post on Theme Forest :

    http://themeforest.net/forums/thread/firefox-addons-which-ones-do-you-use/12866

    I may be obsessed, but you gotta try Ubiquity :)

  4. Mimi

    July 14th, 2009 at 09:05 am

    I just wanted to add that the new IE also has addons does it not? So saying Firefox is best for web designers simply because of addons isn’t really a true statement.

  5. Dubai

    October 18th, 2009 at 01:05 pm

    Great :-) Thank’s

  6. Tamanrasset

    October 18th, 2009 at 01:06 pm

    Good plugin Window Resizer 1.0

  7. London

    October 18th, 2009 at 01:07 pm

    thank you for this list