Chrome Extensions to Boost Your Productivity

10 must-have Chrome extensions for developers

Nabil Nalakath
Aug 18, 2020 · 7 min read
Image for post
Image for post
BG Photo by Pierre Châtel-Innocenti on Unsplash

Over the past decade, Google Chrome has become the go-to application when anyone wants to browse the web on desktop and mobile. Many people don't even like to browse on their devices until they install Chrome. That being said, it is also infamous for consuming device memory and even slowing it down. But there is one more reason why it’s still the most popular browser: support for the latest web features and developer tools.

Chrome is the go-to browser for all developers due to its large user base that no developer can ignore and also the tools it provides during the development stage of a website or even mobile application. The Chrome Marketplace also has some of the best apps and extensions to help developers with a lot of add-on features during development and testing. In this article, we will go through a list of extensions that can come in handy during various stages of development.

1. WhatRuns

How many times have you landed on a web app or site and wondered what libraries or frameworks are running behind the scene? There are some websites that can help you with this, but time is always crucial for productivity, so an extension that gives you all this information with just a click is the best option. WhatRuns does exactly this. It gives you a comprehensive list of information that includes widgets, fonts, frameworks, CDN, analytics, web server, and even the operating system it runs on, without you even having to move away from the tab.

Image for post
Image for post
WhatRuns showing a list of libraries used on the website softway.com

2. Page Ruler

A ruler helps with two simple yet important steps in daily life. It helps you measure something that you want to know the size of, and often we use it to check if something is properly aligned as per requirements. The Page Ruler extension helps you perform these actions on any webpage that you open. You can know the dimensions of any portion your select, check the alignment of elements, etc.

Image for post
Image for post
Using Page Ruler extension to measure the Article image’s size.

3. I love adaptive

Responsiveness is not just a good-to-have feature anymore; it’s a must-have for all websites. Chrome already has an inbuilt tool to check how your site looks on specific devices. But what if you want more options while checking and also want to see how your site looks on multiple devices at the same time? I love adaptive is the perfect tool for this, where you have a wide range of devices and screen sizes to choose from while seeing them side by side. After installing this extension, you can simply click on the extension while visiting a page, and it will directly open the page in a new tab where you can check the responsiveness.

Image for post
Image for post
Comparing how apple.com looks on different screen sizes.

4. VisBug

VisBug is a tool built for UI developers and designers. It helps you do wonders that would otherwise take hours of effort to code and test on a website. It lets you inspect styles, spacing, distance, accessibility, etc. Edit text, replace images, nitpick layouts and content, and more on any live website, including your own. If you’re familiar with Adobe Sketch, the possibilities of things you can do with this tool for design could be worth a lot of hours.

Image for post
Image for post
Inspecting CSS, accessibility classes on YouTube.com

5. Web Maker

If you have used Codepen, then you will know how easy it is to quickly test something that you have in mind without having to go through the hassles of creating a web app or running a local server. Well, Web Maker does the exact same thing, but instead of having to open a web tool, you can test everything right in your browser in a standalone Chrome app. It also allows you to create apps with boilerplate code for the popular frameworks or add popular libraries, CDN, etc. This can come in really handy when you don't have internet access to open Codepen, and the best part is that it has an option to open your code in Codepen directly with just one click when you're online.

Image for post
Image for post
Web Maker’s Chrome extension IDE for testing code

6. Full-Stack Assistant

Full-Stack Assistant is one of my favorites on the list and probably the least popular one. The tasks that this extension does for you may sound really silly when you first read them. But they can come in very handy while developing a webpage or even while browsing a site. It has many options to quickly toggle between form auto-fill, show/hide password field, remove max length of the input fields, enable disabled inputs, hide all images that do not have an alt tag, and many more.

Image for post
Image for post
Toggling between hide/show password field text using FSA

7. Cookie Editor

An HTTP cookie is something that most developers use to provide better user experience, maintain sessions, etc. Writing code to create, edit, and delete cookies while developing a webpage may not be easy, especially for beginners. You may want to perform these actions multiple times to test various scenarios, or sometimes you may even want to import cookies from another device or for the user to play around with something that otherwise requires a lot of effort. Cookie Editor lets you explore cookies stored by different websites on Chrome and perform all the above actions on them. It’s ideal for developing and testing webpages or even manual management of cookies for your privacy. All you have to do is click on the cookie icon and you can start managing right away.

Image for post
Image for post
Managing cookies on google.com

8. JSON Viewer Awesome

Testing APIs is something that every developer does on a daily basis, and the quickest way to do this is of course in the browser. But 99% of the time, APIs send back the response in JSON format, which will be displayed as plain text in the browser. There are many JSON viewer extensions for Chrome, but this one is my favorite because of its intuitive features like dark mode, tree and chart view, and the editor option to edit the response or play around with your own JSON. JSON Viewer Awesome also allows you to disable the extension for specific websites where you don't want the JSON to be passed through the viewer.

Image for post
Image for post
Viewing and editing JSON in browser

9. API Tester

API Tester is a tool that lets you play around with your APIs as you would do on Postman ( if you’ve used it before). For those who are unaware, you can test your APIs by checking their responses, modify headers, validate using assertions, run scenarios where you execute a group of APIs based on conditions, extract values from one API and supply them as input to another, and define environment variables. You can also create API collections and share them with other developers, or even import Postman collections.

Image for post
Image for post

10. LocalStorage Manager

Like cookies, local storage of the browser is something that is used extensively by developers, often to store data locally on the browser. This can include something as simple as preload data to make your site faster. Or it can include even whole tables, in cases where we provide the users with a smooth experience even if their internet connection breaks off. Local storage can be accessed and modified using web APIs in code, but it can be a real pain when you want to create, edit, or delete data multiple times during development. LocalStorage Manager is an extension that allows you to play around with all local storage APIs, just like any other kind of storage, and also perform other actions, like download, import, etc. You can also use the tool to manage local storage data on any website you visit.

Image for post
Image for post
Accessing local storage on apple.com

11. Goto Jira (Bonus)

If you’re working for an organization that uses JIRA to manage and track project progress, this is the extension for you. How many times do you open JIRA and navigate to your project page just to open a ticket, even though you know the ticket number but don't know how to open it directly. GOTO ticket for JIRA lets you open any JIRA ticket within seconds by just entering your ticket number. All you have to do is configure your JIRA base URL once, and you’re set to go. You can open any ticket from any tab, and it also shows you the last five tickets you have viewed, for quick access.

Image for post
Image for post
Opening Jira Tickets using the Chrome extension

Well, that’s it. I know that there are a lot of useful and cool extensions out there that have not made it to the list here, but I am going to skip them now for the sake of article length. But please feel free to leave extensions that you have found most useful in the comments section.

Thanks for reading!

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Thanks to Zack Shapiro

Nabil Nalakath

Written by

I Speak Code, love literature, read & binge thrillers, and seek adventures while following food,fashion,sports, and science. bit.ly/nabilnalakath

Better Programming

Advice for programmers.

Nabil Nalakath

Written by

I Speak Code, love literature, read & binge thrillers, and seek adventures while following food,fashion,sports, and science. bit.ly/nabilnalakath

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store