10 must-have Chrome extensions for developers
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!