In recent years Firefox has become immensely popular, and one of the biggest reasons behind its popularity is the plethora of Firefox add-ons at your disposal that can extend the browser’s core functionality. It can come as no surprise that the Firefox browser is such a popular choice for many web designers, we have compiled a list of add-ons to make your lives easier. These add-ons are not in order from best to worst, #15 is just as valuable for developers as #1.  Let us know what other Firefox add-ons you use in the comments.

1. Web Developer

Perhaps one of the best Firefox extensions for developers is the Web Developer Extension. What makes this such a great extension is the fact that it offers several essential tools that will help you improve the quality of your code, furthermore it helps with troubleshooting. The extension adds a simple menu and toolbar to your browser, furthermore Web Developer allows you to edit CSS right from the browser, in other words if you want to change something on your website you can make the changes with the add-on and immediately see the changes.

toolbar

DOWNLOAD ADD-ON HERE

———————————

2. Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug gives you full control over the CSS, HTML and JavaScript of any page that you choose. Inspect and edit HTML, Tweak CSS to perfection, Visualize CSS metrics, Monitor network activity, Debug and profile JavaScript, Quickly find errors, Explore the DOM, Execute JavaScript on the fly, Logging for JavaScript.

efaofwd-02

DOWNLOAD ADD-ON HERE

———————————

3. Pixlr Grabber

Sometimes you are just not near photoshop or other graphics editing programs, and that’s where Pixlr Grabber comes to the rescue. Grabbing screens and pulling images from the web just got a bit easier. With the Pixlr Grabber add-on, you can copy, save, share or even edit your final grabs – including any image or background – with just a right-click.

pixlr

DOWNLOAD ADD-ON HERE

———————————

4. FireFTP

FireFTP is a free, secure, browser based FTP client that allows you to easily access your server via Firefox instead of having to launch a separate program. 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!

06-08_plugin_fireftp

DOWNLOAD ADD-ON HERE

———————————

5. Colorzilla

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. The powerful CSS gradient generator allows quick and easy creation of beautiful gradients

06-07_plugin_colorzilla

DOWNLOAD ADD-ON HERE

———————————

6. MeasureIt

Sometimes web design can become very frustrating, perhaps one of the most challenging parts of web design is making sure your elements are all aligned. And that is exactly where  MeasureIt comes in handy, as it allows you to overlay a ruler on a browser page so you can verify width, height and alignment of page elements.

06-18_plugin_measure_it

DOWNLOAD ADD-ON HERE

———————————

7. CSS Usage

CSS Usage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site. It works by identifying the CSS you use and don’t use, pointing out what unnecessary parts can be removed to keep your CSS files as lightweight as possible. Each time you press “Scan”, the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.

06_45_28_853_file

DOWNLOAD ADD-ON HERE

———————————

8. Page Speed

Every designer knows that the speed at which a website loads is extremely important for usability and the user experience. Previous research shows that website visitors hate slow websites, so you should do the best you can to design sites that are lightning fast. Page Speed is a browser extension (for Firefox and Chrome) developed by Google that analyzes a web page and tells you where improvements can be made to increase the site’s speed. It’s a great tool for testing a web design’s ability to render fast. Alternatively, you can use Page Speed Online, which is a web-based version of the add-on.

06_45_29_162_file

DOWNLOAD ADD-ON HERE

———————————

9. HTML Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The extension can validate the HTML sent by the server or the HTML in the memory (after Ajax execution). The details of the errors are seen when looking the HTML source of the page. The extension is based on Tidy and OpenSP (SGML Parser). Both algorithms were originally developed by the Web Consortium W3C. And now extended and improved by a lot of persons. Both algorithms are embedded inside Mozilla/Firefox and makes the validation locally on your machine, without sending HTML to a third party server.

06_45_29_397_file

DOWNLOAD ADD-ON HERE

———————————

10. SEO Doctor 

SEO Doctor is made with both beginners and experienced SEOs in mind and it’s scoring system and recommendations are based on official SEO documents, namely Google Webmaster guidelines, Google Image guidelines and Google SEO starter guide as well as my own experience.

06_45_32_279_file

DOWNLOAD ADD-ON HERE

———————————

11. FireShot

FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page, FireShot also allows you to add add graphics and notes directly to your screen captures.

FireShot gives you several options for handling your screen captures. Not only can they be saved in a variety of file formats, but they can also be saved to your computer, emailed to others or saved on the free FireShot hosting server. As a result of its wide range of features, this add-on has attracted over one hundred and fifty thousand active users, and has proven itself to be invaluable for web designers and other Internet professionals.

06-04_plugin_screenshot

DOWNLOAD ADD-ON HERE

———————————

12. IE Tab

Yes Internet Explorer is still used by millions of internet users on a daily basis, therefore IE Tab extension can be really useful for web designers. While there are many browsers out there, all web designers agree that getting your site to work in Internet Explorer is really important, and IE Tab lets you do just that without even leaving Firefox. Click on IE Tab and a new tab will open with the website exactly as it would look in IE.

06-09_plugin_ietab

 

DOWNLOAD ADD-ON HERE

———————————

13. Platypus

If you want to make changes to a website then there is really only one add-on that you MUST have and that’s Platypus, this is without a doubt one of the best Firefox extensions for developers needing to modify a web page. What makes it even better is the fact that it works with Greasemonkey, furthermore Platypus will remember the changes you made for the next time you visit the website.

06-13_plugin_platypus

DOWNLOAD ADD-ON HERE

———————————

14. Codetch

Codetch is another great firefox extension and a must have for developers. Codetch might look familiar to those who currently use Dreamweaver, however while it has a similar feel it doesn’t come with the steep price of Dreamweaver. The author really describes it best:

“It’s the closest you can get to a professional web editing interface in a browser. Install it as an extension today and have a full featured editor right beside your web pages as you surf!”

06-17_plugin_codetchDOWNLOAD ADD-ON HERE

  • http://www.stackify.com/ Travis

    Great List! As a coincidence, we just posted about the best Chrome extensions for developers. Looks like there is a lot of cross-over between the two browsers! http://www.stackify.com/the-44-best-chrome-extensions-for-developers/

  • http://www.clippingpathworkhouse.com/ Ashraf

    wow!!! nice tutorial for 14 Firefox Add-ons Web Designers, It’s really helpful post