back to blog

Tools of the Trade : Chrome Extensions for Web Developers

6 min read • February 24, 2020

Spending a good chunk of my day in a browser I end up trying out and collecting quite a many extensions. Some were useless, some just bad user experience, and others I have kept around (maybe too many). After several years I’ve adopted a collection of add-ons that I always keep at my disposal to aid me in my day to day. 


I am sure everyone who works from a computer has productivity tools they favor added to their browser. These are the extensions I use to keep me on track and help out where company/client interaction is involved.

Checker Plus for Google Calendar/Gmail


Meetings and email are what make a remote company go ‘round (did you know I work remotely?). Checker Plus is a hundred times nicer looking than the Google created extensions and with more features. It’s also updated more regularly. My favorite thing about these two tools is the notifications that you can choose different sounds for. I have Checker Plus set up on both my work and personal browser. Having a different notification sound makes it easier to know what sort of email I get to look forward to reading.


by LastPass

A secure password management system. My company just recently switched to this as opposed to us searching through a multitude of client specific google sheets to find logins. I was using this extension way before that though cause I am terrible at keeping my logins straight. This helps tremendously.

Nimbus Screenshot and Screen Video Recorder


I often have to give clients visual explanations for them to really understand something. Nimbus let’s me do that right from my browser and edit it in my browser. With screenshots I can add arrows, highlights, etc to ensure the client can see exactly which button I am telling them to press.


I am a web developer but that doesn’t mean I don’t need design-based tools. Fonts, colors, and spacing; These tools come in handy when building websites to help me reproduce mockups to near pixel perfection on the web.

Fonts Ninja


Ever wanted to know what font, font size, font weight, what-have-you is being used in a website? Too lazy (like me) to open the developer tools and suss it out yourself? Fonts Ninja is the app for you! It really is a great tool, I use it frequently just to check that the right fonts are being applied to my work.

ColorPick Eyedropper


Quite a simple tool, yet one of my most used. ColorPick is, well, an eyedropper for your browser. It will tell you the color of any pixel of a page that you put it on.

Page Ruler

By Petar Ivanov

For the pixel perfect developer. I use this on XD files in my browser to determine the spacing between elements so I can more accurately reproduce it in my code.


Surprisingly this is the one category I have the least extensions for. Yet, maybe not that surprising considering all the coding is done out of the browser. I’ll have to show ya’ll a list of my Visual Studio Code extensions some time.

Hubspot Developer Extension

by the Hubspot community

I use this one daily, but only one piece of it: the cache buster. Hubspot can be frustrating sometimes with its caching policies and the cache buster is a great tool while in the middle of developing. It beats refreshing for several minutes waiting for the cache to catch up.

Vue.js Dev Tools


I’ve only recently begun learning Vue.js so I have not used this extension as much as others. It’s clean with a great UX though and has been helpful in my learning.

Analytics & Search Engine Optimization

The bulk of my chrome extensions and understandably so. SEO is all about what’s on your page and behind your page so having tools to analyze it all is a necessity.

Tag Assistant

by Google

A quick way to check that google tags (Ad Conversions, Analytics, Tag Manager) on your website are running correctly. If they’re not it’ll try and give you an idea as to why.

DataLayer Checker


I installed this extension when I had some custom GTM tags to write and found to be especially useful for debugging events. It lets you turn on a toolbar at the bottom of your screen that will show you data layer activity as it’s happening. You can also have the info sent into your browser console and inject GTM containers into your browser.



I often use this tool during the content entry phase of a new site build. The extension shows you a summary of your meta information, the hierarchy of your headers, and lists out your images and their alt tags. It’s perfect for checking that everything is filled out and organized correctly.

SEO Analysis and Website Review


This extension has a ton of information in it for your optimization needs. It gives you an analysis of and tips for your content, search indexing, mobile friendliness, structured data, and more. Then it pulls it all together to give you an overall ranking from 0 - 100.



Another page auditing tool that installs into your dev tools console. It is an open source extension by Google that focuses on performance and accessibility.

There you have it, my extension arsenal. Some of them aren’t used as often as others, but they all play a part in my work.