My Chrome Extensions as a Web Developer

Chrome Extensions. Super helpful and makes you much more productive, all in your favourite browser. Chrome extensions are tools created by developers to better the experience using chrome. After researching and learning from other developers, I have found my list of the must-have chrome extensions if you are a web developer. These will be listed in no particular order.

Daily.dev

Source

This extension is one of my favourites. The latest and most important dev news replaces your bland chrome tab. This extension keeps you up to date with the latest trends in the developer world. You could even see your articles on dev.to featured on daily.dev! If you aren't convinced already, they also have a really really cool video: here.

File Icons for GitHub and GitLab

Source

Tired of the bland icons GitHub (I've never used GitLab, so I can't speak for it) gives us. Use File Icons for GitHub and GitLab to have these improved and eyecatching logos for each file on GitHub and GitLab.

React Developer Tools

Source

This chrome extension is a must-have for a React developer. React Developer Tools adds React debugging tools (Components and Profiler) to the Chrome Developer tools. Also, this extension tells you whether or not the page you are on is made with React or not. This is extremely accurate, which shouldn't be surprising because this extension was made by Facebook, the creators of React.

JSON View

Source

This is the perfect Chrome Extension if you ever use JSON. JSON View allows you to validate and view JSON documents. JSON View also allows you to read JSON documents with ease, exactly like your favourite IDE.

Momentum

Source: my Chrome tab

This extension is one of the most popular on this list. Momentum replaces the bland white Chrome tab with an aesthetically pleasing photo, a quote, and a greeting. There are even more features: a todo list, the weather, bookmarks, and even more with the paid version. This makes me much more relaxed each time I search in Chrome.

Wappalyzer

Source

Wappalyzer detects and tells you what technologies are on a page. For a tech nerd, like me, it is very interesting to know which technologies are used for each website. To let you know, Wappalyzer is mostly correct but for around 5% of the time, it is slightly off.

Octotree - GitHub code tree

Source

Octotree adds a tab which displays the current repo you are on in an IDE-like code tree. This is a lifesaver when switching through files in a GitHub repo effectively. I think this is a feature we need to be added into GitHub. This extension also has a pro version which supports dark mode, code fonts, sidebar docking positions, and more. This is a must-have if you do code reviews or just want to look through GitHub repos efficiently.

OctoLinker

Source

OctoLinker is the perfect match with the previous extension on this list, Octotree - GitHub code tree. Where there is a require or import in any code on GitHub, this extension will make that a link to what it requires or imports. Like the previous extension, a lifesaver when it comes to browsing through GitHub code.

Moesif Origin & CORS Changer

Source

To prevent Cross-origin errors, use Moesif Origin & CORS Changer. This extension allows you to send cross-domain requests directly from the browser without receiving Cross-Origin Errors. This is the best extension I have found to send cross-domain requests from the browser.

Apollo Client Developer Tools

Source

This extension is similar to the React Dev Tools but for Apollo Client. Apollo Client Developer Tools adds a tab to Chrome's dev tools. This tab enhances the Apollo Client debugging experience. You can make GraphQL queries right from chrome dev tools, have and use a "query watcher", have and use a "mutation inspector", and inspect caches, all from this new tab. This is a must-have if you use Apollo Client.

Loom for Chrome

Source

Working on a project with a team and need a way to explain and give feedback to your/others code? Use Loom for Chrome (not sponsored). Loom for Chrome is the easiest way to way to record your Chrome screen and speak at the same time. The video showcases your screen and has a little circle in the bottom, showing your face. Loom also has many video options, for example: disabling showing your face. This is one of the most popular on the list with 4 million downloads.

Windscribe - Free Proxy and Ad Blocker

Source

Free VPN, where can I find one? The answer is Windscribe (once again, not sponsored). This extension allows you to connect to other places in the world for $0. It also blocks ads, stops trackers, evades malware, and has dark mode. All for free. Windscribe also has a paid version which has more features and allows you to connect to even more countries than the free version gives. I have been using Windscribe to watch the International Swimming League (ISL) on CBC -if you are bored in the pandemic watch the ISL, it's really fun to watch. And yes, I am a swimmer-.

Window Resizer

(excuse the DuckDuckGo screen)
Source

Are you a web designer or frontend web developer and need to check if your site is responsive? Window Resizer is the best option. This extension allows you to change the Chrome size to many different dimensions: phone, PC, iPad, Desktop, and much more.

ColorPick Eyedropper

Source

The last extension on this list: ColorPick Eyedropper. Once again, this is especially useful for web designers or frontend web developers. This extension allows you to select a pixel in a web page and receive the RGB and hex code instantaneously in pinpoint accuracy.

Conculsion

Hopefully, you have some new Chrome extensions to download. If you have any more which you use or you are going to try out which are not on this list, please leave them in the comments below.

Henry