Chrome extensions you can use to raise your productivity as a Web Designer and Developer

WhatFont

With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant. It also detects the services used for serving web fonts. It also supports Typekit and Google Font API.

CSS Viewer

This extension is a simple CSS property viewer. To enable CSSViewer, simply click the toolbar icon and then hover any element on what you want to inspect in the current page.

Site Palette

Free browser extension that generates colour palettes. A must-have tool for designers and front-end developers.

WCAG Color contrast checker

It checks the color contrast between the foreground and background of the elements that are on the web page. It evaluates the contrast on all elements of the page considering their computed style for the color and background-color CSS properties. It can simulate color blindness and evaluate the contrast for the simulations. In this way, developers can see how the pages look for colorblind users.

Eye Dropper

Eye Dropper is an open-source extension which allows you to pick colors from web pages, color picker, and your personal color history. It allows you to pick a color from any web page or from an advanced color picker.

Window Resizer

This extension re-sizes the browser’s window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions. You can set the window’s width/height, window’s position, preset icon (phone, tablet, laptop, desktop), and even the option to apply the new dimensions to the entire window or just to the viewport.

Lorem Ipsum Generator

The Lorem Ipsum Generator quickly delivers default text to complement your amazing design. The default settings are optimized to be used right after installation, but you can easily customize a few settings to get the perfect text for your taste. Each sentence is randomly generated to simulate real text.

WAVE Evaluation Tool

This extension provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. No automated tool can tell you if your page is accessible, but WAVE facilitates human evaluation and educates about accessibility issues.

Joel N. L.

Joel N. L.

I'm a freelance Web Designer and Developer based in the Philippines who work remotely on projects for clients around the globe.

Related article

Share this article!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

Download my pricing guide

Enter your email below to get a download of my 2020 Price Guide

Subscribe to my newsletter

Join my subscribers list to get the latest news, updates and special offers delivered directly to your inbox.