Mozilla Firefox browser is probably one of the most popular browsers among developers. The open-source browser has approximately 250 million monthly users, according to TechCrunch, and offers an enhanced level of browser privacy compared with others like Google Chrome.
Privacy and data transparency are a huge selling point for a large part of the tech world, so it’s no surprise Mozilla Firefox has risen to the top. And with functionality matching that of Chrome, the browser has a lot to offer for web development.
In this article, I want to share some of the most popular Firefox developer tools that will hopefully improve your productivity, privacy and flexibility when browsing the world wide web!
Firefox Developer Edition
For the Firefox newbies, make sure you have the right Mozilla browser. As far as I know, Mozilla offers two browsers. These are compatible with Windows, Mac and Linux and are available in over 90 languages. There’s the normal browser and then the Developer Edition — which is the one you (a developer) should install.
I don’t want to go into a whole comparison between the two browsers, all you need to know is the Firefox Developer Edition browser was created specifically for developers with preferences tuned specifically for web developers and built-in dev tools.
Once the Firefox download is complete and you’ve got it running on your PC, the next step is to find some handy extensions to add to your toolbar.
...
1. Ghostery
Ghostery is essentially an ad blocker for websites. You might be wondering why you need an adblocker if Firefox has such good privacy settings. Well, while Firefox blocks tracking you’ll still see generic ads displaying when browsing web pages.
Install the Ghostery tool to eliminate that marketing clutter. As a bonus, the blocking feature speeds up page loads and optimizes page performance by automatically blocking and unblocking trackers to meet page quality criteria.
Beyond blocking ads you’ll be able to enjoy enhanced anti-tracking features that ensure your data is protected and anonymised. This extension comes highly rated and recommended by the Mozilla team so you know you can expect the highest standards of security, functionality, and user experience.
2. AdBlocker Ultimate
A good alternative to Ghostery is AdBlocker Ultimate. This extension has one purpose: remove ALL ads. It doesn’t matter if they are whitelisted, ethical or even vegan, this extension will wipe them from your web pages.
Similar to Ghostery, the blocking features will speed up your browsing. And since a lot of websites will restrict your access if they sense an AdBlocker, you can easily accept ads on trusted websites to enter.
It’s a free extension, and one of the highest-rated Firefox add-ons, so definitely a good pick. Plus if you preferred this adblocker you can install it on almost every major browser.
3. uBlock Origin
Of all the privacy developer tools, uBlock has by far the most users. It’s described as a wide-spectrum content blocker that’s easy on CPU and memory and NOT an ad blocker.
Out of the box, these list filters are loaded and enforced: EasyList (ads), Peter Lowe’s Ad server list (ads and tracking), EasyPrivacy (tracking), Malware domains.
4. NoScript Security Suite
NoScript Security Suite is a security developer tool. It provides protection on the web, with preemptive actions to prevent the exploitation of security vulnerabilities. So you’ll enjoy an all-around safer browsing experience as you delve into the depths of the internet.
Specifically, it protects your "trust boundaries" against cross-site scripting attacks (XSS), cross-zone DNS rebinding / CSRF attacks (router hacking) and Clickjacking attempts, thanks to its unique ClearClick technology.
I guess you won’t know until you know, right? Hackers seem to be lurking everywhere these days so better safe than sorry. Load this tool up and worry less. Also available for your Tor browser ;)
5. HTTPS Everywhere
This is another security tool for when you’re browsing the web. HTTPS Everywhere makes sure URLs and follow links are encrypted automatically with HTTPS encryption.
Most sites support HTTPS but don’t put it to use. Instead, they may default to unencrypted HTTP or have unencrypted links embedded in the page. So for an extra layer of security, you can install this tool to make sure all web pages are encrypted. This developer tool is also available on Chrome and Opera.
6. DuckDuckGo Privacy Essentials
DuckDuckGo has always been strong on privacy and data protection. You might already be using their search engine (a good alternative to Google). Well, DuckDuckGo Privacy Essentials is more of the same.
With this Firefox tool, you can take control of your personal information wherever you are on the internet. What you get is a handy little tool that blocks tracking, provides encryption and, within the tool dropdown, you can even search using the DuckDuckGo search engine.
You don’t need to configure anything or customise the settings, it’s really user friendly that way. Also once installed, your preferred search engine will become DuckDuckGo. Hope that’s not a problem.
7. Stylus
Want to give your website a facelift? Let me introduce Stylus. It’s an easy way to redesign your favourite websites. You can install custom themes or create and edit your own personalised CSS stylesheets.
You can get this tool for free as it’s open-source. Plus, if you’re not an English speaker, there are options for a few different languages. Stylus doesn’t care about your data and so collects nothing.
8. Clear Browsing Data
We all know how to erase our browsing history but can we do it with a single click? With Clear Browsing Data that dream becomes a reality. You can quickly clear cookies, history and cache with a single click to your toolbar.
Here’s a list of all the data that can be cleared using this developer tool: Cookies, Browsing history, Cached images and files, Autofill form data, Download history, Service Workers, Plugin Data, Saved passwords, IndexedDB data, and Local storage data
The extension supports some customisation, you can clear everything or just selected data types to clear. Clear Browsing Data is also available for Chrome and Edge.
9. Clear Cache
The premise of this developer tool is that you press F9 and your browser cache is cleared. I’m wondering why they didn’t just call it F9?! I guess Clear Cache is a bit more search-friendly.
And that’s it! It clears your cache. You can activate it using the dropdown or press F9...
10. Measure-it
Measure what? Anything on your webpage. There’s nothing more to this developer tool than that. Once it’s activated you can select whatever area you want to measure and the tool will display width and height.
It’s probably not one of those tools you need all the time, but there will be moments when you’ll be glad to have it in your toolbox.
11. Cookie Quick Manager
This is your go-to Cookie manager. With the Cookie Quick Manager you can view, edit, create, delete, backup and restore cookies.
Developers and testers will enjoy Cookie Quick Manager as it further supports contextual identities such as Private Browsing, First-party isolation and SameSite flag.
12. FoxyProxy Standard
FoxyProxy Standard is a proxy management tool that you’ll want to have for advanced proxy capabilities. Basically, with this developer tool, you can automatically switch internet connections across one or more proxy servers.
The Firefox browser has this capability within its Connection Settings dialogue, but it’s a manual process. With FoxyProxy you can automate the whole thing.
FoxyProxy Standard is the most advanced management tool with more advanced configuration options. For a more basic proxy tool try FoxyProxy Basic which is an on/off proxy switcher.
13. Bitwarden - Free Password Manager
Bitwarden is a free password manager tool similar to LastPass. There are two main reasons that Bitwarden is the go-to password manager on the Firefox browser. One, it’s very highly rated. Two, it’s free for personal use.
If you’re unfamiliar with password managers, I’ll run you through it. Basically, whenever you log into a portal using your browser, Bitwarden saves your login details (after asking for your permission). This means all your passwords will be in one secure place.
With a master password, you can log in to Bitwarden from any device and manage your passwords. What’s really handy about this tool is that you can share your credentials with others and give them access to all the login details as well (for teamwork and stuff). Adding others to the tool comes at an extra cost per person, you can check out the fees here.
14. Wappalyzer
I mentioned Wappalyzer in my other article 14 Best Chrome Developer Tools 2021. And I’ll mention it again here, just because it’s a cool developer tool to add to your toolbox.
With Wappalyzer you can quickly see what technologies a website is using. Click the icon and it’ll drop down to show you which JavaScript libraries the site is using as well as the e-commerce platform, the CMS, Analytics, frameworks, PaaS and a bunch of other web info.
This is a free add-on. You don’t have to pass on any login details. That being said, there’s a pro version that is paid but I think it’s only for those who really want to dive into the finer details of each website.
15. Translate Web Pages
This add-on is a blessing if you visit sites in different languages. Translate Web Pages will translate pages in real-time so you can read and understand the content in your prefered language.
The add-on uses Google or Yandex (which is like the Russian Google) to translate page materials without any copy and paste bullshit. You’ll find all major languages available, so you’ll be able to understand what’s going on no matter what corner of the world you find yourself in.
None of your browsing info is collected when using this tool but the content of the web page is sent to either Google or Yandex servers. To be honest this is my first time hearing about Yandex so I don’t really know which is better…
16. Grammarly for Firefox
While this isn’t necessarily a developer tool, it’ll help with your written communication — which is a big part of any digital job. Grammarly helps correct spelling errors and, if you want, the advanced features will help you improve your clarity, tone and sentence structure.
Once installed it’ll provide real-time feedback in all your main apps — I find it super helpful for Gmail and Twitter two places you don’t want to make a spelling mistake. Signup is free for the basic version.
17. Feedbro
If you’re an avid reader like myself, then it’s often time-consuming visiting all your favourite sites to stay updated with the latest posts. Feedbro lets you aggregate various sources into your personalised feed.
There’s a lot of functionality with this tool that you can explore later. What’s important is that you can easily add any new website you visit with the extension and continue browsing.
18. ColorZilla
At some point in your adult life, you’ll need to figure out the exact colour values on a webpage. Of course, you could spend ten seconds examining the code but I know a quicker way. The ColorZilla add-on. It takes about two seconds to identify a colour value and paste it into another program.
You’ll be able to see the RGB values and the hex values and even access your history with the tool which is handy if you can't recall that webpage you were admiring. If you want to learn more about this tool's features click here.
19. Easy Screenshot
See something you like and want to capture it in 4k? Well, this is the tool for you. With Easy Screenshot you’ll be able to quickly capture a screenshot of the whole webpage. (I don’t think it actually saves in 4k… That was just a joke).
Anyway, it’s a great tool for documenting bugs and other fun stuff. This tool serves a singular function, so if you want something that’s a little more flexible I suggest the Lightshot Screenshot app for the desktop. It’s free and works across all applications with handy editing capabilities.
Bonus: Laser Cat
Sometimes we just need a moment to kick back and shoot lasers at things on the internet, right? Feeling tired? Shoot lasers. Feeling frustrated? shoot a laser. Want to relax? That’s right, shoot some cat lasers.
...
I hope you discovered a new developer tool buried in this list. If you’re an avid Firefox user with some alternative suggestions, I’d love to hear them — I’m always on the lookout for new tools to increase productivity and make my life easier. Leave a comment and I’ll check it out.
Thanks for reading! 🙏
