10 Chrome Extensions for Front-end Developers Improve Productivity

In this post, I selected the must-have Chrome extensions about accessibility, JS frameworks, style, and more, that every front-end developer should use to increase their productivity and deliver a quality product with a focus on all users.

Wave

WAVE is a web accessibility evaluation tool developed by WebAIM.org. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page and helps you to make the web content more accessible to individuals with disabilities. WAVE can identify many accessibilities and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.

React Developer Tools

React Developer Tools is a Chrome DevTools extension for Reactjs. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.

WCAG Color contrast checker

WCAG Color contrast checker is a Chrome extension to test the color contrast according to WCAG accessibility requirements. It checks evaluates the contrast on all elements of the page considering their computed style for the color and background-color CSS properties. In case these colors are defined with RGBA values, it also considers the opacity to deduce the real color that finally is show. It can also simulate color blindness and evaluate the contrast for the simulations. In this way, you can see how the pages look for colorblind users.

JSONView

JSONView is a Chrome extension to validate and view JSON documents. It is validated using a client-side javascript implementation of JSONLint and displays JSON text compliant with RFC 4627. JSONP is also supported in this extension.

WhatFont

WhatFont is a Chrome extension to identify fonts on web pages. You can inspect web fonts by just hovering on them. It also detects the services used for serving web fonts. Supports Typekit and Google Font API.

Perfect Pixel

Perfect Pixel is a Chrome extension to develop websites with pixel-perfect accuracy. It allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform a pixel-perfect comparison between them.

CSSViewer

CSSViewer is a Chrome extension to visualize CSS property easily. You just need to hover any element you want to inspect in the current page. it is perfect for quickly visualizing the style of an element that attracts your attention to see how it was made.

ChromeVox Classic Extension

The ChromeVox screen reader is an extension to Chrome that brings the speed, versatility, and security of Chrome to visually impaired users. ChromeVox was designed from the start to enable unprecedented access to modern web apps, including those that utilize W3C ARIA (Access to Rich Internet Applications) to provide a rich, desktop-like experience. It gives to you a way to verify the accessibility of your web applications.

ColorZilla

ColorZilla is a Chrome extension to get the color of any pixel on the page. It has an advanced color picker (similar to Photoshop's), CSS gradient generator, webpage color analyzer, and palette viewer with 7 pre-installed palettes.

The Great Suspender

The Great Suspender is a lightweight extension to reduce chrome's memory footprint. Perfect if you have a lot of tabs open at the same time. Tabs that have not been viewed after a configurable length of time will be automagically suspended in the background, freeing up the memory and CPU being consumed by that tab. You can define a list of specific URLs or domains that you don't want to suspend and optionally show the screenshot of the tab before it is suspended.

I'm sure that these extensions will significantly improve your productivity and also the quality of your webpages.

Do you know of any other extensions that should be on this list? Write in the comments!

Happy coding!

Cheers,

Tati