Some of the best chrome extensions for web developers in 2021

As developers, we use our browsers every day for all sorts of things, from googling, finding solutions to our problems on stack overflow to wasting time on Reddit (yes, I’m one of those), but also to test run the applications we are developing. It’s here where it’s crucial to have the right tools for the right job.

Around a year ago, I wrote this same post, and I collected a lot of feedback. I have since then tried many other extensions, some of which readers recommended, and I loved them.

Today I’ll be sharing with new my latest and greatest list of chrome extensions for developers.

axe DevTools – Web Accessibility Testing

axe DevTools – Web Accessibility Testing

Accessibility should be one of the topmost priorities for any web developer. While we do have Chrome’s built-in Lighthouse has various parameters to test on a website, if you are someone who deeply cares for a11y issues in your project, Axe Dev Tools is helpful.

This is a fast, lightweight, and powerful testing tool that uses axe-core accessibility engine developed by Deque.

Features:

• Comes with Intelligent Guided Testing: you can do more advanced testing using a simple QnA format. It uses machine learning in the background to quickly identify and fix the issues.
• Component-level testing: if you want to test a specific part of a web page element, this helps.
• Export, Save and Share: you can easily share the test results with your team.
• What’s left to test?: this is a different test report that comes in handy for manual testing.

Download link: https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd

Eye Dropper

Eye Dropper

This is an open-source extension that is useful if, as a frontend developer, you quickly want to know what color or hex code some other website uses in one of their elements.

Not only from a webpage, but it can also pick colors from a color picker for more granular control.

Features:

• Pick a color from a web page: it automatically copies its hex code in your clipboard when you pick a color.
• Pick a color from the color picker: with its integrated color picker, you can manually find the color you need along with different color values.
• Pick a color from history: each color picked will be stored like a color palette so that when you come back later, you have all the colors at your fingertips.
• Open source: all the code it made open-sourced on its Github repository .

Download link: https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka

Grepper

Grepper

Grepper is an essential extension for developers as it combines the power of the Stackoverflow community and Google in one place. As you can see, we searched for the term “linked list in python” in Google and what Grepper does is that it sources the solutions given by its community members right on the search results page!

Features:

• Easily snag and access code answers: you get answers to the common coding problems right on the Google search!
• Save code answers: if you like to revisit a solution you like, you can always save it.
• Contribute to the community: if you know an answer to a search query, you can easily add your code as a contribution.
• Upvote/downvote: in some cases, you will see multiple answers for a question you searched. In that case, if you think that one of the answers is better and the other is wrong, then you can do the upvote/downvote accordingly.

Download link: https://chrome.google.com/webstore/detail/grepper/amaaokahonnfjjemodnpmeenfpnnbkco

Hackertab.dev

Hackertab.dev

Your new tab page can be full of what latest is happening in the developer industry. Hackertab.dev extension defines that. If you are too lazy to open multiple tabs – one for dev events to attend, one for reading articles, or another to check what’s trending on Github, then make this your new friend.

This replaces your new Chrome tab with a great variety of information ranging from all developer profiles to the best tools, news, jobs, and events.

Features:

• Daily updated content: each day new things are happening and Hackertab.dev makes sure you get fresh information each day.
• Personalized by interests: you can easily change what topics you would like to get the information on. Be it about a specific language, cards to display, view in compact mode, etc.
• Reliable data providers: the content is fetched from popular websites like Github, Hackernews, DEV Community, Stackoverflow, etc.
• Open source: the entire code is live on its Github repo where you can also contribute.

Download link: https://chrome.google.com/webstore/detail/hackertabdev/ocoipcahhaedjhnpoanfflhbdcpmalmp

daily.dev

daily.dev

Daily.dev is a Chrome extension that comes with a feed with all the latest and greatest in the tech and dev world. The feed is personalized as per your liking, and devs from around the world save an ample amount of time with this.

You don’t have to hop from one news/blog location to another, and over 100K developers use it from around the world!

BTW, did you know that our publication makes their list, and some of our articles got featured?

Features:

• Hand-picked sources: do you have a preference for a certain website you like? Pick it from a pool of 400+ sources and get content from those only!
• Tags: all the hottest topics in the development world are grouped by tags so if you like to know about #cloud, #aws, and #frontend only, then your feed will be personalized with that.
• Never miss a trend: you get brand-new content as soon as it is published over a website. Daily.dev fetches that and shows you upfront so that you are updated on the latest!
• Community: this is what differentiates daily.dev from its competition. There is a whole community of learners, developers, and others where you can comment on someone else’s article, share it on socials or even bookmark your favorite ones.

Download link: https://chrome.google.com/webstore/detail/dailydev-the-homepage-dev/jlmpjdjjbgclbocgajdjefcidcncaied

OctoLinker

OctoLinker

If you ever wanted to go back and forth between the multiple lines of files imported from one file/folder to another and find it frustrating then OctoLinker comes to the rescue.

OctoLinker is a browser extension for GitHub, that turns language-specific statements like include, require or import into links.

So whenever you open a file where there are multiple import statements and you quickly want to open it, then simply hover over the linked file and click to open. It’s quite similar to how things work in VSCode!

Features:

• Relative files: it uses GitHub API to fetch a tree structure of the linked files repository.
• API Docs: it links to API docs of popular tools like NodeJS, Python, Oracle, or Ruby!
• Dependency Discovery: the dependencies defined in files like package.json can easily be tracked down with their source code.
• Pull Requests: inside the code review, OctoLinker links dependencies and files on a Pull Request.

Download link: https://chrome.google.com/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp

Octotree

OctoTree

Another handy VSCode-like Github extension is Octotree. This literally builds up the tree of the entire project structure of a Github repository.

Whenever you navigate to a repo, it shows up as a sidebar that you can open to view the entire content or files inside the repo without even navigating to different folders. Not only this, but it can also work on your private repos, just give it the token and you are good to go!

Features:

• Code review: you can easily jump among files and comments in any pull request or commit.
• Multiple themes: Octotree doesn’t stop on just a regular dark and light theme. It comes with around 20+ themes along with icons themes, code font selection, etc.
• Multiple tabs: just double-click on the sidebar to open a new file on a new tab. So now you can have multiple tabs of files open inside a Github repo!
• Tree-based search: you can search for deeply nested files and bookmark any of them to visit later.

Download link: https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc

---

React Developer Tools

React Developer Tools

You may already have heard about it if you are actively working on a React-based project. When it comes to debugging something, nothing comes close to this extension.

It allows you to inspect the React component hierarchies right inside the Chrome Developer Tools. By default, when you open the dev tools, this extension comes with two tabs: “⚛️ Components” and “⚛️ Profiler”.

Features:

• Components tab: it shows you all of the React components that were rendered on the page. With this, you can also see their sub-components along with their properties and values passed to each prop.
• Debugging the components: when you select one of the tree components, you can directly inspect and edit the props it may have. You can debug the component, its parent, its children and so on.
• Profiler tab: this is a separate tab dedicated to measure the performance of a React app. Here you can record, edit and see in a graph-like format of a React feature.
• Open-source: all of its code lives in the Github repo.

Download link: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

---

Refined GitHub

Refined GitHub

This is like an all-in-one tool to extend the capabilities of GitHub. It does two things; simplifies the overall GitHub interface and then adds useful features on top of it.

Features:

• Makes whitespace characters visible: all the whitespace characters used are now visible when you open a specific file.
• Merge conflict fixing: if you are someone who always struggles to keep track of what all needs to be changed when there is a merge conflict then this will add a series of arrows to accept the changes.
• Adds avatars to reactions: all those who added any emoji reactions to a GitHub comment will now get their avatar.
• Option to wait for checks: when working on a Pull Request (PR), it adds an option to wait for checks before confirming the PR.
• Reverting changes: if you added something wrong in a PR by mistake, you no longer need to open your Terminal and write commands to revert it, Refined GitHub adds a simple option to revert the changes easily.

Download link: https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf

---

SVG Gobbler

SVG Gobbler

Ever thought of getting those icons, images, or other assets like illustrations used on your favorite website? What if there was a simple tool where we could easily extract all of them at once?

Well, the SVG Gobbler extension lets you do all of this with ease. You can download, optimize, and transform the code of icons, logos, and vector SVGs.

Features:

• Optimize SVG content: using SVGO it can optimize the SVG you select from websites or uploaded content.
• Transform to React code: it can quickly convert the SVG into a React component code.
• Export options: you can export all the SVGs and PNGs as multiple sizes.
• Quick design tool integration: when you select your favorite SVG element, you can simply copy it and paste it as a vector inside any of your favorite design tools like Figma, Sketch or Framer.

Download link: https://chrome.google.com/webstore/detail/svg-gobbler/mpbmflcodadhgafbbakjeahpandgcbch

Vue.js devtools

Vue.js devtools

This is the Vue counterpart of the React dev tools. If you are into the Vue ecosystem, then you need to use the Vue.js devtools extensions right now.

This lets you inspect your Vue app for better debugging and understanding of how your app is working.

Features:

• Standalone app: the dev tool isn’t just available as a Chrome extension but you can also download a standalone app by running npm install -g @vue/devtools and then firing it up as vue-devtools.
• Components tab: this tab shows you all the component instances running on the current page.
• Vuex tab: here you can inspect how the overall app state is managed through Vuex.
• Events and Refresh tab: all the events emitted in your Vue app will be available in a separate Events tab while if you simply need to reload the dev tool then the Refresh tab helps.

Download link: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Conclusion

Extensions can make our lives easier, as is the case with the ones I listed today. If you know any other tools that can help developers boost their productivity, please leave a comment to incorporate them in the article. Thanks for reading!

Source: livecodestream