Awesome Chrome Extensions for Web Developers

So many extensions, so little time.

Over the course of my time as a Flatiron School Software Engineering and Web Development student, I have learned the importance of helper tools. When we studied Ruby, I poured over interesting gems that helped my backend experience be more pain-free. Then, JavaScript came along and it became all about the libraries, namely React and Redux, which made frontend development that much easier.

Equally important as tools used within your editor are tools to help your browser experience. As developers it can be easy to underestimate the amount of time spent debugging our creations here.

As a result, I wanted to share my favorite Chrome extensions which have made my experience much more easy and enjoyable.

Here they are, in no particular order…

Toggle JavaScript: Easy management in your browser

Toggle JavaScript

  • There are many reasons to disable JavaScript in the browser, whether for accessibility, speed and performance, or security. As the name implies, this tool allows you to quickly turn it off, as well as a number of other settings for a custom experience.

JSON Viewer: It’s there to keep your eyes from giving up.

JSON Viewer

  • My favorite tool for anyone who works with API data or any other nested hashes. It automatically formats your JSON responses in a readable syntax. There is also a lot of customization options for theme and syntax highlighting.

Dark Reader: Come to the Dark Side, Luke…

Dark Reader

  • Before the tech world went crazy for dark mode on everything, Dark Reader was providing us with the ability to change it up. Built with extensive ability for customization regarding which sites should be affected and which ignored, this is easily one of my top favorite extensions.

React Developer Tools: Easily find the bug you created that just broke everything.

React Developer Tools

  • The amount of times I have been developing in React and forgot to pass down a prop or update my state has happened more times than I can count. This tool helps you follow the flow of data in your app for easier debugging.

Redux DevTools: Become one with your store.

Redux DevTools

  • This extension is your command center for applying Redux to your React project. See your store, props, state, and other helpers with ease. It also allows you to track whether or not an action has been fired and your reducer implemented, which is half the battle when developing in Redux.

Learn.co Buddy: Simplify your experience as a Flatiron student.

Learn.co Buddy

  • My classmate, Errol Watson, built this tool specifically for Flatiron students. It allows you to clean up your browser by toggling social elements — pop ups which show you classmates’ progress — on applicable Learn.co pages for users with accounts. Somebody needs to award Errol a Nobel Peace Prize for this one.

Code Blocks: Let me just pop this code into a training document really quick…

Code Blocks

  • Cristina Cristobal introduced this one to me and it is a gamechanger. Sometimes you need to share code outside a beloved editor. This add-on for Google Docs allows you to format it in the language of your choice inside a report, notes document, training manual, memo, and more. Cristina has written about other great tools that can increase your productivity so you should definitely follow her.

PomoDone: Good grief. You need to take a break!

PomoDone

  • If you suffer from burnout this is the tool for you. This browser timer follows the Pomodoro Technique to help you work for short bursts with breaks in between. The extension is part of a larger productivity package which hooks up to most popular list-making tools, like Trello and Asana. At the end of your day, it emails you a copy of every task you worked on and for how long.

Summary

It is impossible to list all of the great extensions out there for developers in one article. Manage yours by typing chrome://extensions/ in your address bar. There, you can search for more and add the ones I linked above.

Happy hunting!