Web Browsers

12 Firefox Add-ons for Developers & Designers

Firefox Add-ons for Developers & Designers
Written by Martins D. Okoi

Just recently, we released a post on the 12 Google Chrome Extensions for Developers & Designers and while some of those extensions are available on Firefox, I wouldn’t repeat any here.

In the same way, some of the extensions listed below are available on Chrome so consider such apps as bonuses for the respective browsers.

1. HTML Validator

HTML Validator runs through your code to make sure it follows the HTML standard convention. It displays the number of errors it sees on the icon in the toolbar.

HTML Validator Firefox Addon

HTML Validator Firefox Addon

2. Octotree

As a developer, I run through several code pages on GitHub every now and then when searching to see how other developers solved certain problems. If you’re like me then you will find Octotree useful.

Octotree displays GitHub code in a tree format. That way, you can browse through code lines without downloading the source files.

Octotree Shows GitHub Code in Tree Format

Octotree Shows GitHub Code in Tree Format

3. HTTPS Everywhere

HTTPS Everywhere encrypts the data you exchange with all major web pages even if they don’t use HTTPS.

So if you get directed to pages that don’t use https you can be sure that your communication online is secure.

4. Page Performance Test

Page Performance Test gives you statistics on your web pages by measuring their speed and loading performance. You can save the results of the chart in order to compare it to subsequent tests.

Page Performance Test

Page Performance Test

5. Usersnap

Usersnap enables you to take websites screenshots and annotate them by adding markup drawings and comments. It also comes with a pixel ruler and can integrate directly with various project management tools including Slac, Trello, and JIRA.

  12 Chrome Extensions for Developers and Designers

This list will not be complete without Usersnap given that it enables an effective feedback process. It is a paid service, though, with a 14-day free trial.

Usersnap

Usersnap

6. Disable JavaScript

Disable JavaScript, as the name suggests, gives you the ability to turn off JavaScript on websites or just specific tabs. You can customize it to have a default JS state of on/off, and a default disable behaviour by domain/tab, etc.

Disable JavaScript

Disable JavaScript

7. Web Developer Checklist

The Web Developer Checklist extension provides you with an overview of how usable your site is according to the best design and development practices.

Clicking the icon will inform you about your site’s SEO, friendly URLs, favicon, etc. with checkmarks next to them to indicate a pass.

Web Developer Checklist

Web Developer Checklist

8. React Developer Tools

With the seemingly unending rise of React’s popularity, React developers are born almost every day and the React team has them covered.

React Developer Tools gives you the ability to inspect a React tree along with its state, props, hierarchy, etc. To activate it, launch Firefox devtools and switch to the React tab.

There is also a version for Vue developers in the form of Vue.js devtools.

React Developer Tools

React Developer Tools

9. ColorZilla

ColorZilla is an excellent tool for developers and graphic designers to pick colours from different web pages.

  How to Customize Firefox Quantum User Interface in Linux

It also contains an eyedropper, a gradient generator, palette browser, and colour history.

ColorZilla

ColorZilla

10. Evernote Web Clipper

Evernote Web Clipper enables you to take screenshots of web pages and automatically saves them to your Evernote account from which you can make annotations and share with team members.

Evernote Web Clipper

Evernote Web Clipper

11. Cookie Manager

Cookie Manager is a security-conscious extension that enables you to view, add, edit, delete, and search for cookies in any domain.

What’s even cooler about Cookie Manager is that you can export and import cookies between domains.

Cookie Manager

Cookie Manager

12. Live Editor for CSS and LESS

Live Editor for CSS and LESS enables you to write CSS/LESS code directly into your browser. Your code takes effect immediately and will be saved at site level in your browser’s local storage.

Its in-page editor features autocomplete, beautify, linter, etc. You should check it out.

Live editor for CSS

Live editor for CSS

Do you fancy any of the listed extensions or have you got a list that we can use? The comments section is below.

Your Unwavering Support Matters a Lot:

The cost of maintenance is skyrocketing as more readers are coming on board and the ad service that we employ in order to generate revenue is unfortunately no longer sufficient and this is especially due to the increased use of ad-blockers.

We humbly request that you consider disabling your ad-blockers to support us financially or by donating as anything from $1. Your donation(s) will go a long way in supporting FossMint and sister site, TecMint, in running efficiently. Thank you.

Make a Contribution via PayPal


Top Deals

About the author

Martins D. Okoi

Martins Divine Okoi is a graduate of Computer Science with a passion for Linux and the Open Source community. He works as a Graphic Designer, Web Developer, and programmer.