#1 Firebug
What It Does: Inspect web pages.Firebug is an extension both web designers and developers can’t live without. This extension is like an advanced version of the integrated developer console that comes with Firefox. But, Firebug makes things a lot easier for you to inspect elements on web pages and see how things work on different websites.
#2 FireFTP
What It Does: Fire transfer client for Firefox.
FireFTP is an FTP/SFTP client for Firefox that lets you securely upload and transfer files between your computer and the server directly from within your browser. Thanks to this add-on, you’ll never have to jump back and forth between your browser and FTP client apps ever again.
#3 Web Developer
What It Does: Analysing and inspecting web pages.
This is kind of an all-in-one extension that adds a number of useful tools to your Firefox. Some of the tools included in this add-on are displaying and editing CSS Stylesheets, disabling styles, debugging tools, and more.
#4 ColorZilla
What It Does: Color analyzing tool.ColorZilla is a great tool all front-end web designers will find to be quite useful. This plugin has an eyedropper for quicking picking colors on web pages, a CSS gradient generator, color analyzer, color palettes, and much more.
#5 Greasemonkey
What It Does: Change websites with custom code.Loved by over a million Firefox users, Greasemonkey is an extension that you can have an endless amount of fun with. What this plugin does is it allows you to customize popular websites by editing them with your own custom JavaScript code. You can also have fun with the scripts already created by other developers as well.
#6 Pixel Perfect
What It Does: Adjust offset of web elements.
A simple yet a useful plugin that allows you to inspect elements and visually see how many pixels are off in elements by creating a composition with transparent layers. Using this composition, you can adjust your real web page to match the overlay to achieve the best result without any guess work.
For example, if one of the images on your web page is overlapping another object, you can use Pixel Perfect to determine how many pixels you need to adjust to get that image in the right place.
#7 DownloadThemAll
What It Does: Download everything on a web page.This plugin lives up to its title by letting you download everything on a web page. With a single click, you can download all images, links, and more contained on a web page using this plugin. It also has an integrated download accelerator that optimizes download speed by 4X.
#8 IE Tab V2
What It Does: Test web pages on Internet Explorer environment.
Believe it or not, there are people out there who still use old versions of Internet Explorer to browse the web. Designing websites that works well on these old browsers is one of the problems web designers are still struggling with. This plugin makes things easier to adjust your web designs for older Internet Explorer browsers by creating a new tab with IE environment.
#9 BuiltWith
What It Does: Learn about the technologies used on a website.
Want to know what kind of technologies are used to build your favorite websites? Then this add-on will come in handy. BuiltWith is an extension that allows you to scan websites to find what kind of technologies are in use on the page. A nifty tool for all aspiring web designers to learn from established websites.
#10 QuickJava
What It Does: Turns Java on or off.This add-on lets you easily turn Java on or off on your browser. It can also turn off Javascript, Cookies, Animated Images, Flash, and more on a web page. It’s a useful plugin not just for developers, but also for regular users for improving browser security and lowering bandwidth usage.