Contents
Software Reviews

The 20 Best Chrome Extensions for Developers in 2022

Last updated:
May 13, 2022
Contents

As a developer, you’re always looking for ways to make your life easier—and more productive.

If you’re on the hunt for new Chrome extensions to add to your collection, we’ve got your back.

The Marker.io dev team put their heads together and compiled their favorite extensions into one neat list.

Then, we asked our friends over at /r/webdev to enhance it with their own suggestions.

What results is a high-quality, curated list of Chrome extensions for web developers.

From small productivity hacks to tools our devs couldn’t live without, here are our top picks for 2022.

The Best Chrome Extensions for Developers: Our List

Extensions for QA Testing

1. Category highlight: Marker.io

The Marker.io Chrome extension allows you to report bugs directly into your PM tool, without leaving your website or web app.

Before Marker.io, whenever we did QA, we would:

  1. Screenshot the issue;
  2. Annotate the screenshot;
  3. Open up Jira;
  4. Finally create a ticket and attach all relevant information.

Now? As soon as we spot a bug, we just open up the extension, and in one click, send the bug report straight to Jira:

And this is what the report looks like on the other end:

Reporter name, URL, console logs, environment info—all this is automatically captured with every bug report.

You can imagine how much time this saves during a project (after all, that’s why we built it).

The cherry on top: you can also use Marker.io to get feedback from your clients. Either with the extension or with a widget embedded on the client’s site.

You get to discuss every issue raised by your client separately, and again—directly in your PM tool.

Want to collect bug reports and feedback directly into your issue tracking tool? Check out what tools we integrate with here.

2. BrowserStack

BrowserStack lets you test websites from any browser and device—desktop and mobile alike.

Pro tip: Today’s browsers follow the same specs and best practices, so browser testing is not exactly our number one priority at Marker.io.

With that said, we still use BrowserStack for high-fidelity mobile testing on different devices.

The reason for this is that Chrome DevTools isn’t enough: it’ll only change your screen’s resolution. It won’t emulate a real mobile browser.

If you like BrowserStack, you’ll love our BrowserStack integration. Whenever you report a bug, Marker.io captures the context of the virtual device and attaches it to your issues.

That’s a lot of time-saving!

3. Fake Filler

Fake Filler fills all input fields on a page with fake/dummy data, eliminating the need for developers to manually enter values.

Pro tip: The most common use case for our team is when testing sign-up flows.

It can get repetitive (and slow) to fill out all fields over and over again. Now, we do it in one click. Plus, our test accounts look a little more real compared to random keyboard presses!

4. Loom

Sometimes, screenshots are not enough.

Loom is a screen recording tool that allows you to create and share a video with your team or clients in mere minutes.

Pro tip: We use Loom in many ways at Marker.io.

  • Visually describe bugs for internal QA;
  • Quick 1-minute video to align with your team for the day;
  • Walk customers through our app with mini-guides.

Our favorite feature: instant upload and shareable link.

We paste the link into Slack or Intercom and move forward with the day!

5. LT Debug

LT Debug is designed to aid in debugging and testing websites/web apps.

It replaces the cumbersome debuggers and developer consoles with a streamlined debugging tool that every developer needs to have.

Pro Tip: LT Debug is our go-to productivity tool while developing or testing a website.

It has 9 productivity tools like:

  • Add/Remove/Modify HTTP(s) header requests
  • Block URL requests
  • ...and many more!

We can save any simulated configuration we like, and re-use it anytime while developing the website.

This saves us lot of time—plus, the extension is free, unlike its alternatives, and does the job well!

Extensions for Web Development

1. Category highlight: Web Developer Checklist

Web Developer Checklist takes its rightful spot as a category highlight.

In one click, this extension analyses your webpage for violations of best practices and helps you discover any problem areas.

Pro tip: Our main use case is making sure we haven’t overlooked any of the “small but important” components when building a website.

  • 404 page;
  • Favicon;
  • Sitemap;
  • etc.

Those things take very little time to build, but that’s exactly our problem: they’re overshadowed by the bigger picture.

Web Developer Checklist helps us not forget about them.

2. Wappalyzer

Wappalyzer shows you what websites are built with: CMS, framework, JavaScript libraries, and many more.

Pro tip: Back when we were a web dev agency, clients would come to us with specific requests and requirements.

They’d show us examples of websites or features they like. We would then check those websites out with Wappalyzer and figure out how they were built so we could do something similar.

...and sometimes, we use it for fun, too. When you come across a cool website, you just want to know how it was built!

3. ModHeader

ModHeader allows you to change HTTP request and response headers.

Pro tip: Although we use Insomnia for API testing, ModHeader is an excellent alternative for those who prefer to test straight in the browser.

The extension helps you ensure your API calls work properly. Another use case is to tweak & test responses on the fly, without having to update the code in the backend.

4. WAVE

WAVE is a web accessibility evaluation tool. In other words, this extension will tell you if your page is hard to read or navigate, or incorrectly structured.

Pro tip: For us, the main use case is SEO. If your website isn’t accessible, you should expect your rankings to tank.

WAVE ensures:

  • Your images have alt text;
  • Page hierarchy makes sense;
  • Font size isn’t too small or too big;
  • Users with disabilities can navigate your site with ease;
  • ...etc.

These may seem unimportant or obvious. But we see them as low-hanging fruits that turn into quick wins for your SEO.

If your (or your client’s) business is based in the US, WAVE will also ensure your website is compliant with the Online Accessibility Act—to avoid fines down the road.

5. Lighthouse

The Lighthouse Chrome extension runs tests against your page and generates a complete performance profile.

It’s an easy way to get a quick audit of your site and find out what needs to be improved at a glance.

Pro tip: We use Lighthouse every once and a while to make make sure we follow best practices for our Webflow website.

The tool helps us keep an eye on what we do well and not so well: performance, accessibility, and mobile responsiveness.

Added benefit: the extension will give you basic SEO recommendations as well.

6. JSONView

JSONView formats JSON into a readable format, straight in the browser.

Pro tip: Obviously, JSON in plain text is unusable. With the extension:

  • Numbers, booleans, and strings have different colors;
  • Arrays and objects can be collapsed/expanded;
  • All links are clickable.

This is an amazing productivity extension for any developer who needs to interact with a JSON API.

7. Clear Session

Clear Session does exactly what you’d expect: clears cookies, session, and local storage from the website you’re currently on in one click.

Pro tip: The main use case at Marker.io is flow testing.

Let’s imagine we want to test an admin user inviting a new member. And then, what that invite flow looks like for the new user.

We simply use Clear Session to instantly log out and make a clean switch between the two accounts.

It’s also perfect to test edge cases without messing with our pre-existing testing profiles.

Another alternative is Clear Cache. It essentially does the same thing... but the icon isn’t as catchy!

8. VisBug

VisBug turns any web page into an interactive artboard, allowing you to play with and edit elements to your liking.

Pro tip: VisBug is useful in many ways.

  • Brainstorm new UI & design ideas;
  • Create mockups on the fly;
  • Edit text, replace, or adapt images without having to go through DevTools.

9. Grepper

Grepper is a database of queries & answers for developers.

Pro tip: The Grepper extension helps developers find code snippets straight into the Google search results page.

While we see how useful this might be in some cases (forgettable snippets, quick answers, learning, etc.), we’re not big fans.

When we Google for answers, we like to look at the context around that code to see if it makes sense for us to use.

With that said, we still use Grepper as a quality of life tool, as the extension allows you to copy any code snippet into your clipboard in one click.

Quality of Life Extensions

1. Category Highlight: uBlock Origin

uBlock Origin is a content blocker that removes ads, malicious URLs, and tracking scripts from your browsing sessions.

Pro tip: This extension is by far one of our favorites.

As developers, we’re constantly scouring Google, Stack Overflow, and other sites riddled with distracting ads.

uBlock Origin does an amazing job at blocking that unnecessary noise and helps us focus on the day-to-day.

2. Vimium

With Vimium, you can browse the web using just your keyboard.

Pro tip: We already use keyboard shortcuts all the time in our IDE.

So, the natural next step is to bring those shortcuts to our browser.

While Vimium is already pretty intuitive, all shortcuts are customizable if needed.

3. OctoTree

OctoTree improves your GitHub with an IDE-like code tree, bookmarks for repos & issues, and more.

Pro tip: OctoTree makes it a lot easier for us to navigate through repos.

We no longer need to click through dozens of directories or try to remember the file name.

If you like OctoTree and believe GitHub deserves a little makeover, you might also be interested in:

4. Dark Reader

Dark Reader toggles dark mode on for every website, even if they don’t have it available.

Pro tip: Most websites today have a bright white background for accessibility reasons.

But we spend most of our workday in front of our computers, and we like to think we can protect and extend our eyes’ lifetime a little bit.

If your IDE is already in dark mode—why shouldn’t your browser be as well?

5. LanguageTool

LanguageTool is a grammar and spell checker. Basically, an autocorrect that lives in your browser.

Pro tip: While this may not seem useful for pure dev work at first sight, we still use LanguageTool regularly.

The extension allows us to make sure no typo went through to our website or web app copy.

Plus, it’s not uncommon for the dev team to sometime have to write technical support articles.

LanguageTool ensures those are readable and grammatically correct!

6. daily.dev

daily.dev is a curated feed of developer news from 400+ sources.

Pro tip: When it comes to catching up with developer news, this extension is a massive time saver.

We no longer have to look for quality articles by ourselves. We just open up a new tab, and there it is: a complete catalog of news for the day.

The best part is that those are already curated by other users through an upvote system. Plus, they are sorted by category, so we can check out the news that is most relevant to us.

Wrapping up...

The thing about Chrome extensions is that none of them are must-haves.

However, when you do find that one extension that is just right for your use case... productivity goes up tenfold!

We hope these extensions are as useful to you as they are to us.

Did we forget anything? Send me an e-mail and I’ll add your favorite extension to the list!

Continue reading

Try Marker.io for free.

Start free trial
Free 15-day trial  •  No credit card required •  Cancel anytime