If you are a web developer or designer there are many great add ons are available in Mozilla’s add ons section. I am compiling here some of the Top 15 add ons for web designers which makes your web designs cross browser compatiable, SEO optimized in a click of a button.

1. Firebug Developer Tool

Firebug is one of the most loved add on for web designers from long time. Web developers can can explore, edit, debug, and monitor CSS, HTML, and JavaScript live on any web page available on world wide web. You get many great options for customizing your web designs also.

2. Windows Resizer Add on For Mozilla

As name itself suggests that this one is the windows resizing tool for Mozilla Firefox, which lets you check your web designs in various screen sizes to check if your design is suitable for all types of screen sizes or not.

3. FireFTP : FTP Client inside  Mozilla Browser Plugin

FireFTP is also a most used FTP client which runs right inside your browser , reduces your time in swapping between your windows while designing web. It offers several advantages to standalone FTP application, such as its operating system-independent requirements. All features that any FTP client must have are included in this plugin.

4.  ColorZilla Plugin

ColorZilla is an another great add-on for Mozilla firefox to check the RGB codes that used in any web page in any section. It lets you select the specific region & tells you its RGB color codes for it so you don’t have to remember it any time. Second best thing you can use  it to optimized the advertises within your webpages.

5. The Web Developer Add-on

The Web Developer add-on ads a great developer toolbar as shown in above picture to Mozilla Firefox. It  simplifies working with web pages. You can inspect & edit CSS on live pages to see your designs working or not. You can compile many things like css, html & much more that helps you to improved performance of your codes on front end as well as back end.

6. SeoQuake SEO Developer Plugin

SeoQuake is recommended by many great search in optimizers, and if you wish that your web page design also top the charts on search engines then this one is the must have plugin for your firefox. It gives you a great SEO toolbar for analysing problem about your code regarding SEO. Its sort of of all in one add on for optimizing your webpages.

7.The Greasemonkey Firefox add-on

The Greasemonkey Firefox addon  helps you to see how your web page looks like with the help of javascript poor.MOst importantly, you can download many code snippets for using this add on for different purposes.

8. Font Finder

You can high light any keyword of your interest, & then later you can analyse CSS styling information of that  keyword, so its a small easy to use Font Finder add on for finding font information of any word in  web page.

9. Total Validator

Total validator is a great  validation tool that will check HTML, links, take screenshots and do a many things needed for validating your codes. It also enables accessibility validation (WCAG, US-508), broken link checking, spell checking (in five different languages), and take screen captures via different web browsers and operating systems to find out how your web pages are performing on different browsers & OS.

10. Measure It Firefox Add-on

Measure It is also a one of the most handy tool I use most of the time to find of the different sizes of any area on any web pages. you can use it to track any,  pages content , sidebar, header & footer’s height & width.

11.CSSViewer Add on

CSS Viewer allows you to inspect CSS properties on a web page that you’re viewing. It’s a great way to study styles that you’ve seen on websites to learn CSS development techniques.

12. Pallete Grabber

Pallete Grabber is a add on that allows you to export the color pallets of any webpages to favorite graphic editing softwares like Photoshop, Paint Shop Pro, GIMP, Fireworks, and Paint.NET ect., Also a must have if you do not do web pages from scratch.

13. IE Tab Add-on

It is very annoying when you are using firefox like addicted & you have to always check your web pages for Internet explorer compatibility. So this great new plugin allows you to check the compatibility right inside your mozilla firefox. Great, Isn’t it ?

14. Codecatch WYSIWYG Editor : Dreaweaver Alternative

Codetch is a WYSIWYG editor add-on for Firefox which allows you to edit web pages directly in to the Firefox. The interface is similar to dream weaver & it reduces your time while designing as you do not have to swap everytime between your developer studio & browser.

15.Yslow : Front End Design Analyser

YSlow is a Mozilla or IE web browser utility that analyses the front-end design performance of any web page . This great plugin for mozilla allows ou to optimize your web design on its performance basis like , in what time it loads & what are the different problems with it.