Web Development

12 Greatest Firefox Add-ons For Developers & Designers

With the latest Firefox browser update – Firefox Quantum – Mozilla made a leap forward in the browser game. The new Firefox browser is not only super-speedy and sleek. It caused an uproar as the new version only supports Firefox add-ons using the WebExtensions API.

We researched, reviewed, and hand-picked 12 of the best Firefox add-ons for developers.

The Best Firefox Add-ons for Firefox Quantum

Mozilla got quite some attention after launching Firefox Quantum in November 2017. Mostly due to its surprisingly great performance.

It’s fast. Really fast. Firefox Quantum is over twice as fast as Firefox from 6 months ago.

(source: Mozilla)

Apart from the performance improvements, Mozilla updated these features as well:

Minimalistic design
Private browsing & tracking protection
WebExtensions support

On a downside, Firefox might no longer support your favorite add-ons. With the new update, legacy add-ons that do not use the WebExtensions API are not available.

The good news is: We reviewed and collected the best Firefox add-ons for developers (supported by Firefox Quantum).

1. Usersnap

The Usersnap Firefox add-on lets you capture and annotate any website. It works great for collecting and managing user feedback on websites or applications or for tracking bugs in your browser.

All screenshots are directly saved in your Usersnap projects. It integrates with your workflow, and you can connect Usersnap with JIRA, Trello, Slack and 20 other project management tools. A perfect fit for QA and development teams.

Try Usersnap for free: https://addons.mozilla.org/en-us/firefox/addon/usersnap/

2. Web Developer

I absolutely recommend the ‘Web Developer‘ add-on. It gives you some great features which will make your development workflow faster.

I enjoy various CSS, form and image options. No matter if I want to check alt tags, missing images or image dimensions, this add-on is my preferred choice.

https://addons.mozilla.org/en-us/firefox/addon/web-developer/

3. User Agent Switcher

The User Agent Switcher allows you to switch the user agent of your browser. The add-on will add an option to the tool settings. This option lets you switch the user agent.

https://addons.mozilla.org/en-US/firefox/addon/uaswitcher/

4. Ghostery

Ghostery is a great add-on to display installed trackers and pixels of any website. It helps you to find and analyze the used marketing- and tech stack of any website. And you can block them if you don’t want your session to be recorded.

https://addons.mozilla.org/en-us/firefox/addon/ghostery/

5. ColorZilla

ColorZilla is an advanced color picker and eyedropper. It allows you to get the color of any pixel in the browser window. The extension also has a built-in averaging square. This helps you get a matching color to for a photo. The add-on is pretty simple and easy to use.

https://addons.mozilla.org/en-uS/firefox/addon/colorzilla/

6. HTTPS Everywhere

This Firefox add-on encrypts all your communication with many major websites.

As many sites support HTTPS, they still might use HTTP. Or they fill encrypted pages with links that go back to unencrypted sites. The HTTPS Everywhere add-on fixes these problems by rewriting all requests to HTTPS.

https://addons.mozilla.org/en-US/firefox/addon/https-everywhere/

7. BuiltWith

The BuiltWith add-on analyses websites and their technologies, servers, and hosts. It works great for analyzing competitor websites and you can get insights on any web page.

And it even displays tracking IDs, like the Google Analytics ID.

https://addons.mozilla.org/en-US/firefox/addon/builtwith

8. Web Developer Checklist

The Web Developer Checklist is a simple add-on that gives you an overview of the usability of your site.

https://addons.mozilla.org/de/firefox/addon/webdeveloperchecklist/

9. Cookie Manager

This Cookie Manager lets you check and manage the cookies. You are able to view, add, change or even delete cookies in any of the domains.

You can even export and import cookies. This is helpful to reproduce certain issues by recreating certain browser sessions.

https://addons.mozilla.org/de/firefox/addon/a-cookie-manager/

10. NoScript Security Suite

Winning the “PC World Class Award”, this Firefox add-on got quite some attention. It is one of the top-rated add-ons. This extension makes your browser safer by restricting JavaScript and other executable content.

https://addons.mozilla.org/EN-uS/firefox/addon/noscript/

11. Open Lorem

As a web developer or designer, you’ll find this extension quite helpful. Open Lorem generates “lorem ipsum” text for you and your websites.

https://addons.mozilla.org/de/firefox/addon/openlorem/

12. Page Performance Test

It analyses web pages’ performance based on various parameters. The Page Performance Test measures network, browser, and server performance.

You can use Page Performance Test directly on your console:

Open up your console; you will now find a new tab “page performance”
Start the performance test

https://addons.mozilla.org/en-US/firefox/addon/page-performance-test/?src=api

Summary

In this article, we collected the best Firefox add-ons for developers and designers. Firefox Quantum and the listed Firefox add-ons allow you to step up your development workflow. Go, and check out these add-ons and see how they can make your Firefox a more powerful browser.

This article was brought to you by Usersnap – a visual bug tracking tool for every web project. Used by software companies, like Facebook, AddThis, and Google.

Thomas Peham