Best Chrome extensions for web developers we tried and liked

Vue.js DevTools

As you have surely guessed it's exactly what the name suggest - an extension for debugging Vue.js applications. It's also available for Firefox.

We have recently fallen in love with Vue.js, so we find this extension really handy for development and debugging. It allows you to inspect Vue components, Vue routes, and VueX stores, all in one package.

If React / Redux is more your thing, here are the two extensions you need to install instead: React Developer Tools or Redux Developer Tools.

Check out Vue.js DevTools

‍

Refined GitHub

This one is a gem. Have you ever wanted a simpler GitHub interface with some additional features? Your wish has been granted.
Some notable improvements:

• Mark issues and pull requests as unread
• Reaction avatars showing who reacted to a comment
• Clickable references to issues and pull requests
  
• The option to wait for checks when merging a PR
  

In general you can expect less clutter, some UI improvements and more shortcuts. The cool part is that GitHub has implemented many of the features that were originally introduced by this extension.

Check out Refined GitHub

‍

WhatRuns

WhatRuns allows you to see which technologies are behind a given website. These can range from Wordpress plugins to the type of user tracking a particular company is using. It is somewhat similar to Stackshare.

An interesting feature is that you can subscribe to updates and get notifications when a website you follow starts using a new technology or deprecates an old one.

‍Check out WhatRuns

‍

Bird Eats Bug

We had to do some self-promotion. It was irresistible. But we hope you will forgive us and join the Beta anyway :)
Bird Eats Bug continuously captures DOM elements on the pages of your choice, i.e. production and staging of your product. When you encounter a bug, you can rewind back, check what actions led to it and share the replay with your teammates or file a bug report.
You can also recommend Bird to PMs, QA and non-technical people in order to get good bug reports and spend less time fixing issues.

Check out Bird

‍

WhatFont

Technically speaking, there are other ways to check the fonts, but with this extension it's just a tiny bit quicker. You can also recommend it to your friends who are not developers. Designers should find it especially useful.

Check out WhatFont

‍

Lovely Forks

Lovely Forks lets you see notable forks of GitHub projects. It really helps when need to quickly find new forks of the projects abandoned by the original authors, which is sometimes hard as search engines tend to direct you to the old projects.
It also helps you know when someone made a better version of a project.

Check out Lovely Forks

‍

Storage Area Explorer

This extension is a visual editor of Storage Area for Chrome-packaged apps and extensions. Apart from the main proposition It allows a few other things as well:

• inspect HTML5 local&session storage
• export storage contents as JSON into clipboard or file
• import storage contents from clipboard or file

It is specially useful to inspect crome.storage/browser.storage which cannot be inspected in the developer tools yet, as opposed to localStorage/sessionStorage.

Check out Storage Area Explorer

‍

Wrapping up

There are many Chrome extensions for web developers to choose from, but we believe that the ones we mentioned above should be on the top of your list. Each one has something unique and different about them that makes them a must have. Find this article and the Chrome extensions we listed useful? Feel free to share this article.