5 Chrome Extensions Every Front-end Developer Needs

Let me start off by saying that if you aren’t already using chrome as a front-end web developer, you should be! Not only is Chrome the most used internet browser, (chrome has over 62% of the market share with safari coming in second at only 20%), there are also a number of applications called extensions that you can use to customize chrome and add some additional tools to your kit. Here are the top 5 extensions that every front-end developer should be using with chrome:

1: JSON Formatter

JSON Formatter allows you to easily toggle between raw and parsed, or pretty printed, JSON.

This raw JSON response is difficult to read, and even harder to work with. However, by toggling the “Parsed” button, JSON Formatter reformats the response into the easily readable parsed equivalent. It also implements collapsable trees and clickable url links if any are included in the response. See the parsed version of the same response below.

You can add the JSON Formatter extension here.

2: ColorZilla

With ColorZilla you can capture the RGB or Hexcode value for any color in your browser. Just hover over the pixel in your browser and then click to select. Ever wanted to match the color of your button to a color from your background image? Perfect time to use ColorZilla! ColorZilla has a number of additional features such as a CSS Gradient Generator and a Pallet Viewer as well.

Grab ColorZilla here.

3: WhatFont

Similar to ColorZilla, WhatFont allows you to hover over any text in your browser and determine the font that is being used. No more scrolling through pages and pages of google fonts to find something that jumps out at you.

With WhatFont you can find the perfect font while you browse the sites that you find inspirational, or were given to you as an example by a client. Allow the screen shot below does not contain my cursor position, you can still see that WhatFont displays Raleway when you hover over the Home button on my nav bar.

Get started with WhatFont here.

4: React Developer Tools

If you use React, and you don’t already have this, then I only have one question for you…why? Just…why? The React Developer Tools extension adds React debugging tolls to the the standard Chrome Developer Tools. Once the extension has been added to chrome you will get two new tabs in your Chrome DevTools called “Components” and “Profiler”. Unlike the other extensions I have mentioned, you don’t need to click the extension icon in your browser in order to activate these features. They are always active! Instead, the icon acts as a notification that the site you are on was built using react by changing color. When using the React Developer Tools, you can inspect the React component hierarchies in the Chrome Developer Tools. The Components tab allows you to view the root React components that were rendered, as well as inspecting and editing its props and state. The Profiler tab allows you to record performance information.

React Developer Tools is available here.

5: Dark Reader

Ok so this one isn’t really a must have, more of just a preference. I love a good dark mode. Not only does it make me feel like like a hacker and thus, I’m convinced, improve the quality of my code, it is also much easier on my eyes. Spending six to eight hours looking at one white computer screen is bad enough. I’m guessing that most of you are like me though and have multiple screens. Being bombarded by bright white from three screens greatly increases the speed at which my eyes become fatigued. Dark Reader implements a dark mode for every website, whether they already have a dark theme available or not. It comes with additional settings that allow you to adjust brightness, contrast, sepia filter, dark mode, font settings, and more. This means that even if you don’t what to join me on the dark side, you can still use dark reader to adjust the standard light theme settings to be more bearable.

No debating, just add the extension here.

That concludes my list of the 5 Chrome Extensions every front-end developer should have. What are your favorite extensions?