As a web developer, I spend most of my time on the browser, and the browser must help me stay focused, save my time, and most importantly provide the tools I need to become successful at my work.
Google Chrome has many such extensions that I use every day and I recommend them to my peers. Let’s take a look at each of them.
Before we get to the list, I would recommend you turn on sync in your chrome browser, this will make sure if you use a new computer, your chrome settings, plugins, bookmarks, and history will sync with your new computer and save you time doing the setup all over again.
Utility Extensions
These extensions save you time and help you stay organized.
Ghostery — Privacy Ad Blocker
Ghostery will block all the ads from the web pages you visit, Youtube ads in some cases as well as most of the annoying popups you get when you visit websites with a lot of hidden links.
This one extension will save your internet bandwidth, and hours of time and block unnecessary trackers that are being used by webpages to serve ads, personalise pages or your browsing behaviour.
Note: In case you are testing traffic on your website, you should whitelist your website as Ghostery will block analytics when you visit your website.
Tip 1: I recommend enabling this extension even in incognito mode.
Tip 2: You can also use Brave Browser which is also based on chromium and blocks ads, trackers and popups without needing any extensions.
Tip 3: If you only want to block popups and ads, you can use the popular AdBlock extension for chrome.
Grammarly
Writing well is one of the most important qualities that a software engineer should have. If you cannot write well, your code will be difficult to read and hard to iterate on.
Grammarly helps you eliminate writing errors and suggests you the fixes you should make to your document, GitHub issue, or anything that you are writing on the web.
Grammarly is a big time saver because it visually indicates all the errors in your document and gives you the option to fix your mistake with a single click.
Note: Grammarly only supports English.
Tip 1: Make sure you select the correct English language in the Grammarly settings
Tip 2: You can also use ProWritingAid which is a nice alternative to Grammarly.
Bitwarden
Password managers are now essential parts of our daily life. With the increasing number of cyberattacks, your email and password have likely been exposed in one of those attacks. If you are somebody who uses the same password across multiple accounts, You will soon get hacked. It is inevitable.
Please please please use a password manager and force yourself to generate a new password if you sign up for an account on any website. I recommend Bitwarden, it is open-source and free, unlike other password managers.
Tip 1: Create an account at Bitwarden and also install the desktop and mobile applications so that you have access to your password even if you don’t have access to your browser.
Tip 2: Please enable 2FA (two-factor authentication) if the website where you have your account supports it and download an authentication app like Google Authenticator to generate TOTP (time-based one-time password)
Volume Booster
Watching a video online and even 100% volume isn’t loud enough? or watching a video that a coworker created and they are almost inaudible?
I use volume booster all the time when I get into such situations. It increases and amplifies the maximum volume of the chrome browser.
Note Anywhere
I read many blogs, and sometimes, I want to make a note related to a paragraph I am reading so that the next time I visit the webpage, I remember my note. Wouldn’t it be amazing if your notes stayed on the page instead of flipping pages in your notebook?
Download Note Anywhere which lets you pin sticky notes on the webpage and it will remember the position and content of your notes.
Tip: You can personalise the look and feel of the stick notes from the Note Anywhere options. (Right-click the extension > Options > Settings)
Super Simple Highlighter
Similar to Note Anywhere, Super Simple Highlighter allows you to highlight text on web pages. It comes with 10 different options which you can customise from the Extension options (Right-click the extension > Options > Settings)
Tip: You can configure the shortcuts to highlight using the gif below.
Loom
Loom is a video recorder for your computer, it can record both your browser as well as anything outside of the browser. Once you are finished recording, it will automatically upload the video to the cloud and copy the link to the video in your clipboard. Such a time saver.
The gif you saw above was shot using Loom and then converted to a gif.
The only drawback of Loom is that it creates mp4 videos and does not have the option to record to gif which can be used as an image.
Developer Extensions
Now it’s time to look at the different developer tools you can use if you are developing a web application.
Refined GitHub
Refined GitHub comes with 100+ features that enhance your GitHub which will save you a lot of time. You can find all the details on the chrome extension page or the GitHub repository of the extension. This is one extension I cannot live without.
The extension is regularly updated and new features are added almost every week.
Note: Once you enable the extension, you might see a lot of things automatically and might not be something you intended to do, I would recommend you look at the extension options page and disable the feature you do not want. For example, I do not want my PR to auto-delete when merged. So I have disabled it.
User-Agent Switcher
Extremely useful when you want to test your web server and its behaviour against a specific user-agent; for example, mobile safari.
It is also useful when you want to see how your website will look for a web crawler like Googlebot.
JSON View
If you are developing REST APIs, you might want to see your APIs’ response in the browser. In a world where everyone uses Postman, JSON View might be irrelevant, but it is still handy when you do not want to start postman to test an API.
Devtools
React Developer tools — Incredibly useful if you are developing react applications. This tool creates two new tabs in your web inspector; Components and Profiler. You can read more about React developer tools on their blog.
Redux DevTools — If your React project includes redux, Redux DevTools is a big-time saver. You can learn more about it on their GitHub page, and some tips and tricks for Redux DevTools.
Meteor DevTools Evolved — If your application is built with Meteor, you cannot live without Meteor DevTools Evolved. This extension gives you complete visibility of all the DDP messages, minimongo and much more. It is a must-have.
Apollo Client Devtools — If you use GraphQL and use Apollo client to connect with your GraphQL server, I would recommend you install this extension as it gives you in-depth information on your API calls, cache and much more.
So there you have it. I would love to know which extensions you use. Write down in the comments. Or you can tweet me at @harsh_maur
See you in the next blog post.