5 Chrome Extensions to Boost Development Productivity

Subscribe to my newsletter and never miss my upcoming articles

As a productivity nerd, I'm always looking for tools to help improve my workflow, so here are the five frequently used extensions I use as a full-time Front-End Developer.

1) JSON Formatter

TLDR: Pretty-prints JSON

By default, Firefox nicely formats JSON for you. Unfortunately, Chrome does not have this feature, so until then, use this tool to help turn that raw JSON data into something that is easily legible. You also have the ability to expand and collapse objects so you can reduce some of the noise for larger sets of JSON data.

πŸ”¨ Install from Chrome Web Store

Screen Shot 2020-08-05 at 10.03.55 PM.png

2) Momentum

TLDR: Adds flare ✨to your tabs

Every time you open a new tab you are greeted with a beautiful background image and encouraging quote and mantra to get you through the day. Momentum has a paid and free version of their extension, but I personally use the free version so that will be the one I discuss.

Here are some additional features:

  • Built-in TODO list
  • Local Weather
  • Set a daily focus
  • Favorite photos and quotes for future reference

πŸ”¨ Install from Chrome Web Store

Screen Shot 2020-08-05 at 10.10.50 PM.png

3) CSSViewer

TLDR: Simple tool that allows you to view basic CSS properties

I use this when I want to quickly inspect the dimensions of HTML elements. I find this comes in especially handy when I am scaffolding a page for a site at work and I want to ensure that my CSS aligns with the style guide provided by the designers. It's not a perfect tool, but it's a quick way to inspect basic properties, like font-size and width, without having to bust open the DevTools window.

πŸ”¨ Install from Chrome Web Store

Screen Shot 2020-08-05 at 10.15.05 PM.png

4) Material DevTools Theme Collection

TLDR: Provides Material Design themes for your DevTools

This extension is for those who want to have more options when it comes to their Chrome DevTools. Currently, Chrome only provides a light and dark theme, so for those who are fans of Material Design I think you'll like this added aesthetic touch.

This extension does require some configuring, so I would recommend watching this short tutorial that shows you how to get things up and running. Once configured, you will have access to a theme switcher allowing you to change themes to your heart's content.

πŸ”¨ Install from Chrome Web Store

Screen Shot 2020-08-05 at 10.29.12 PM.png

5) Mindful Browsing

TLDR: Forces you to double think when trying to access distracting websites

If you're like me and occasionally (or frequently) get distracted when you should be...working 😣, here's an extension that can help thwart some of the distraction impulses. Having that extra step of confirming whether or not I want to indulge in distracting behavior is a nice pause to point me back in the right direction.

How it works: When you try to access a site that you have set up as one you want to block, you will be greeted with a background image asking you to confirm from one of two options:

  1. Indulge on distracting site for 10 minutes
  2. Leave the site and it closes the browser window

Gotchas: I found that the extension didn't work until I explicitly added something in the "Usually, I'd rather:" section so be wary of that when you first install this.

πŸ”¨ Install from Chrome Web Store

For those of you wanting more customized ways to stay focused, check out this article for alternative options.

Screen Shot 2020-08-05 at 10.46.51 PM.png

El Fin πŸ‘‹πŸ½

Thanks for reading, and I hope you will find at least one of these extensions to be a helpful addition to your workflow.

Bolaji Ayodeji's photo

Thanks for sharing this list, bookmarked it.

Alyssa Holland's photo

Thanks for reading!

Sandeep Panda's photo

Loved it and bookmarked for future reference. I suggest you tag this post with β€œGeneral Programming” so that it gets more visibility.

Alyssa Holland's photo

Thanks for the tip Sandeep Panda! This is my first ever post on Hashnode so I'm still learning the ropes 😁 I'll add that tag and keep that in mind for future posts.

NELSON MICHAEL's photo

Awesome list bookmarked it. Can I add these resources to my article? I have an article where I created a list of really useful resources

Alyssa Holland's photo

Glad you liked it! Feel free to add them to your list. Thanks for asking!

Sabin Adams's photo

These all look great! I’ve been using the JSON formatter extension for a while, super helpful. Definitely going to check out the others πŸ‘Œ

Alyssa Holland's photo

Awesome! The JSON Formatter is one of my faves from the list. Thanks for reading and I hope you find one of the other extensions to be useful πŸ˜ƒ

Sabin Adams's photo

Alyssa Holland Just got through checking all of those out. All are great, but man that material theme dev tools is a game-changer! Surprised I hadn't thought to look up themed dev tools before 🀦