Tools of the Trade : Chrome Extensions for Web Developers

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.

Productivity

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

by jasonsavard.com

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.

LastPass

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

by nimbusweb.me

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.

Design

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

by 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

by vidsbee.com

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.

Development

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

by https://vuejs.org

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

by sublimetrix.com

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.

SEO META in 1 CLICK

by www.seo-extension.com

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

by https://www.woorank.com

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.

Lighthouse

by https://developers.google.com/web

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.