The biggest change for 2018 has been the major overhaul of FireFox, and with it the way add-ons work in that browser. As a result, many popular add-ons are no longer being maintained or have become unavailable.
Most add-ons for Firefox are also available as extensions for Google Chrome. In this article, we’ll try to give preference to cross-browser add-ons / extensions, which within this context means they’ll work on Firefox, Chrome, and Chromium. We’ll also give preference to free extensions that aren’t known to pass your information to third parties and are not supported by ad revenue. We’ll focus more on extensions that don’t restrict you to a particular development technology.
Few developers would see any advantage in using Microsoft Edge as a development browser, but it is fine for post-development testing. Only a little over 4 in every 100 site visitors can be expected to be using it, although that number can be expected to increase slightly as more users abandon Internet Explorer.
Even though there far more Chrome users than there are Firefox users, those in the IT crowd tend to prefer Firefox, which is why there are more and better extensions aimed at developers in Firefox.
Now let’s take that look at the very best browser extensions for developers and why you might want to add them to your browser.
1. Built With
When you find yourself on a really well made site and you want to know how they made it, this extension will save you a lot of time and effort digging around in source code.
This is an accessibility auditing tool. It’s always best to try and make your pages as accessible as possible, and aXe will help you avoid accidentally excluding a segment of users from your site.
An oldie but still a goody, this extension allows you to sample colors directly from a page, retrieve color codes, generate gradients, and more. Download links: Chrome/Chromium, Firefox
Adds some useful extras to your browser for control of CSS, forms, images, and information. One of the most popular extensions ever made.
5. W00 Rank
Analyze any web page for SEO data. Provides a powerful report showing you all the SEO internals, including an overall SEO score, suggestions for improvement, keyword cloud, and much more.
Generate a QR code of the page you’re on and you can visit the page with your phone just by scanning the QR code. Good for testing responsive sites, even if you did not create them.
7. HTTP Request Maker
This can be very useful for testing PHP form responses where you don’t really want to actually submit the form (which might trigger additional processing you don’t need to test). With this tool you can forge HTTP requests effortlessly. Note that although the Chrome and Firefox extensions have the same name and do the same things, they’re made by different developers and are not exactly the same. Download links: Chrome/Chromium, Firefox
8. Page Performance Test
Quickly obtain a report of how your page performs at different stages of it’s journey to your browser. It’s kind of like a more advanced version of tracert. This one is only available on Firefox for now. There are similar extensions for Chrome and Chromium but they’re not as rich in features as this one.
9. Word Count Tool
This one can actually do more than the name implies, as it will also tell you how many characters and how many sentences are within a selected block of text (or the whole page). Download links: Chrome/Chromium, Firefox
10. Web Developer Checklist
Make sure you’re following best web development practice guidelines with this tool that will show up where your standards may have slipped.
11. Image Map Editor
One of a trio of excellent extensions from German developer Heinz-Jürgen Boms, this one does exactly what the name says it does. You can generate an image map directly in the browser just by tracing over the areas of an image you want to map.
12. Advanced Frame Editor
Another extension from Heinz-Jürgen Boms, this is really a CSS styling tool where you can build a frame directly in the browser by specifying its attributes. It is worth checking out the documentation before starting to use it.
13. Bootstrap Responsive Helper
This is a very simple little extension that helps you see quickly if your breakpoints are working correctly and what bootstrap level the current mode is. Of course you’ll only need this extension if you actually work in Bootstrap. The Chrome version is developed by Jonathan Defraiteur, and the Firefox version is developed by Kevin Bon.
14. Try it YourSelf HTML5 Editor
15. X-RAY Goggles
Technically this one isn’t an extension, it’s actually a bookmarklet. But it works so well, we couldn’t leave it off the list. Even though it’s made by Mozilla, it works equally well in Chrome because both browsers are fully standards compliant. To use it, you’ll need to make your bookmarks bar visible. Then visit the download page, which you can reach via the links below, and drag the X-Ray Goggles button onto the bookmarks bar. Then just visit any site, fire up your X-Ray Goggles bookmark, select an element on the page, and you can edit the code for it.
header image courtesy of Monika Pola