Website designers and developers can have a very tedious time doing their work if they don’t make use of all the wonderful equipments and resources available out there. A lot of tools have been created to help them in their endeavor. In this article I wish to focus on add-ons.

Technically speaking an add-on is a small piece of software which enhances the functionality of another application and which in itself usually cannot be run independently. It is a set of software components that adds specific abilities to a larger software application. It may also customize the functionality of an application.

This add-on can take many forms. Snap-ins, plug-ins, extensions, and themes for software applications – they all come in the domain of add-ons. Since thousands of add-ons are available in the market, looking for quality add-ons too can be a very frustrating experience. To help you out below I have collected 15 add-ons that I feel are essential for designers and developers. They serve a wide variety of purposes.

For example, let’s say you want to design a quality Facebook banner image for the timeline profile of your client. If you design a larger or smaller image than required then it may loose its charm in shrinking or enlarging. For you to be able to make a perfect design you need to know the exact dimensions of the banner image. The add-on MesureIt, entry number 15 below, will help you achieve this goal very easily.

1. Fire Bug

The most popular and powerful web development tool, Inspect HTML and modify style and layout in real-time, Use the most advanced JavaScript debugger available for any browser, Accurately analyze network usage and performance.

EAODD 01

2. Grease Monkey

Customize the way a web page displays or behaves, by using small bits of JavaScript.

EAODD 02

3. Ad block Plus

Annoyed by adverts? Troubled by tracking? Bothered by banners? Install Ad block Plus now to regain control of the internet and change the way that you view the web.

EAODD 03

4. Pixel Perfect

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.

EAODD 04

5. Sen SEO

Sen SEO is an extension checking the most important on-page-SEO-criteria and calculating a grade of how good your site fulfills these criteria.

EAODD 05

6. Fire Query

Firebug plugin for jQuery development.

EAODD 06

7. Total Validator

Perform many different validations in one go. This multiple validator works with external, internal, or local web pages using a local copy of the desktop tool.

EAODD 07

8. Font Finder

Font Finder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.

EAODD 08

9. Fire Shot

Fire Shot creates screenshots of web pages entirely.

EAODD 09

10. SEO Doctor

SEO Doctor allows easy SEO diagnosis and problem solving for webmasters.

EAODD 10

11. Web Developer

The Web Developer extension adds various web developer tools to the browser.

EAODD 11

12. Color Zilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies…

EAODD 12

13. Page Diff

Page diff is a simple page compare application. It helps web developers and designers to see HTML-code(text) differences between web pages.

EAODD 13

14. No Script

The best security you can get in a web browser! Allow active content to run only from sites you trust, and protect yourself against XSS and Click jacking attacks.

EAODD 14

15. Measure It

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

EAODD 15

Do you know of any other quality add-ons? Do you use add-ons? Is there any particular one that you would like to recommend others? Let me know in the comments below.