Firefox has some cool add-ons which make the job of website designers much easier. There are many useful add-ons for Firefox out there and we use several pretty much every day for work.

1. ColorZilla

ColorZilla is an extension for Mozilla Firefox and the Mozilla Suite.It assists web developers and graphic designers with color related tasks – both basic and advanced.With ColorZilla 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. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…

2. FirePalette

FireColorPicker provides the color picker to Firebug’s CSS panel. In the place where the color tooltip is showed, FireColorPicker adds the context menu “Pick xxx color …”. It also works correctly with the color that is a part of mixed CSS values, like “background: #FF8800 none repeat scroll 0 0″.

3. MeasureIt

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

4. Firebug

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.

5. Greasemonkey

Greasemonkey is a Firefox extension that allows you to customize the way webpages look and function.Allows you to customize the way a webpage displays using small bits of JavaScript.

6. GridFox

GridFox is a great extension that will overlay a grid on a selected website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.

7. Web Developer

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

8. Window Resizer

The Browser Window Resizer is useful for testing different screen sizes. It accurately resizes your browser so you can test to see what a web page looks like in all of the standard resolution sizes.Supports the 640×480, 800×570, 1024×768, 1280×800, 1280×1024, 1570×1200 resolutions.Resize the current page via the Context menu, Tool menu or Toolbar button.

9. Screengrab

Screengrab! saves entire webpages as images.It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard.It can capture any Java or Flash embedded in a page, but to do this it requires Java to be installed in the browser.

10. Deleted

11. Image Zoom

Adds zoom functionality for images. Easily zoom in, zoom out, fit image to screen or set custom zoom on individual images within a web page. All this can be done by using the context menu or a combination of mouse buttons and scroll wheel. Handy to see the finer details of smaller pics or to make very large pics fit within your screen.

12. Font Finder

Simply highlight a single element (e.g. a paragraph or a strong tag ), right-click and select `Font Finder`, then marvel as the full CSS text styling of the selected element appears.

13. Pixel Perfect

Pixel Perfect also has an opacity option so that you can view the HTML below the composition. By being able to see both the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action.

14. FirePHP

FirePHP is ideally suited for AJAX development where clean JSON or XML responses are required. All data is sent via a set of X-FirePHP-Data response headers. This means that the debugging data will not interfere with the content on your page.

15. Java Console

The Java Console enables you to monitor status and debug running applets and Java Webstart application that use Sun Java technology.

16. IE View

Lets you load pages in IE with a single right-click, or mark certain sites to *always* load in IE. Useful for incompatible pages, or cross-browser testing.

17. LinkChecker

Check webpage links at a glance with simple color coding. Ditch those massive listings of bad links that provide no context and add LinkChecker to your arsenal of web development tools today.

18. TinyUrl Creator

TinyUrl lets you shrink any long URL in your address bar or link on the page to something you can easily email or Twitter with a single click.

19. JSView

All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page’s source code.

20. FireFTP

Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!

Found something missing in this post?

While compiling this stuff on this post, it’s possible that we miss some other great firefox add-ons. Do not hesitate to share it with us in Comments so that we can add instantly.