15 Best Browser Extensions for Developers (2018)

Original Source: https://inspiredm.com/15-best-browser-extensions-for-developers-2018/

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. Download links: Chrome/Chromium, Firefox

2. aXe

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. Download links: Chrome/Chromium, Firefox

3. ColorZilla

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

4. WebDeveloper

Adds some useful extras to your browser for control of CSS, forms, images, and information. One of the most popular extensions ever made. Download links: Chrome/Chromium, Firefox

5. Woo 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. Download links: Chrome/Chromium, Firefox

6. Tab2QR

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. Download links: Chrome/Chromium, Firefox

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. Download links: Firefox

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. Download links: Chrome/Chromium, Firefox

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. Download links: Firefox

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. Download links: Firefox

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. Download links: Chrome/Chromium, Firefox

14. Try It Yourself HTML5 Editor

If you prefer to keep things simple and just get all your work done from one place, this extension is for you. Rich in features, this context-aware editor works directly in the browser and supports HTML, CSS, and JavaScript. It’s far from perfect, but for a quick and dirty edit without the bother of opening a separate application, it gets the job done. Download links: Firefox

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. Download links: Chrome/Chromium, Firefox

header image courtesy of Monika Pola

The post 15 Best Browser Extensions for Developers (2018) appeared first on Inspired Magazine.