20 Essential Chrome Extensions for Web Designers & Developers


By

While Chrome’s Dev Tools gives you more than enough utilities to cover most of your design and development requirements, by adding extensions, you can extend the browser’s functionality even further with free-to-use extensions.

Depending on your needs, and by selecting the perfect extension, you can easily create a personalized working environment that will greatly improve your productivity.

Useful Frontend Chrome Extensions

MagiCSS

MagiCSS is a live CSS editor extension, with an inbuilt editor, that will also beautify and minify your CSS. It can also create GitHub Gist.

MagiCSS chrome extension web designer

CSS Dig

CSS Dig finds and groups stylesheets and style blocks on most websites, giving you an easy way to analyze the code and plan refactors.

CSS Dig web developer extension chrome

CSSViewer

There are many other tools and extensions that will perform the simple task that CSSViewer does. They’ll probably do it better as well. But no Chrome extension collection would be complete without its inclusion. So easy to use, all you have to do is click the toolbar icon and hover over any element on you want to inspect.

CSSViewer chrome extension web designer

CSS3 Generator

CSS3 Generator, as the name suugests, will generate all the code you need for your CSS.

CSS3 Generator chrome extension web designer

CSS Shapes Editor

CSS Shapes Editor is a Chrome DevTools extension for live editing of CSS Shapes property values.

CSS Shapes Editor web developer extension chrome

Live Editor Extensions

WordPress Style Editor

With WordPress Style Editor you can inspect your WordPress stylesheets and make direct edits to the CSS of your theme.

Wordpress Style Editor chrome extension web designer

Validators & Performance Extensions

Perfmap

Perfmap is an extension that will create a performance heatmap of the frontend of your site checking the timing of the resources that are loaded in the browser using the Resource Timing API.

Perfmap chrome extension web designer

Validity

Validity is an extension that will help you validate any web page. The extension will display the number of errors in the tool tip and the details can be viewed in the console tab.

Validity web developer extension chrome

Web Developer Checklist

Web Developer Checklist is must-have extension that checks any web page for errors and violations of common best practices.

Web Developer Checklist chrome extension web designer

Bootlint This Page

This extension will add a Bootlint This Page button to Chrome that will check any Bootstrap page/site for common errors. The errors are shown in the JavaScript Console window.

Bootlint This Page web developer extension chrome

Check My Links

Check My Links will scan any given web page and will highlight both valid (in green) and broken (red) links. Nobody likes broken links!

Check My Links chrome extension web designer

Measuring Extensions

Dimensions

Dimensions is a simple, yet super-useful tool that will measure screen widths and heights for you.

Dimensions chrome extension web designer

Color Tools

ColorZilla

Originally developed for Firefox, ColorZilla adds a multitude of color tools, like an eyedropper, color picker, pallette viewer and a gradient generator, to Chrome.

ColorZilla web developer extension chrome

Type Playgrounds & Font Testers

Fontface Ninja

Fontface Ninja is a handy extension that will identify any font, also giving you the size and line-spacing, from any web page. You can then test the discovered fonts out.

Fontface Ninja web developer extension chrome

Useful Utility Extensions

45to75

To ensure that your text remains readable across all device sizes, 45to75 will count the number of characters, ensuring they’re between 45 and 75 characters, to help you optimize line length.

45to75 web developer extension chrome

PerfectPixel

PerfectPixel is an extension that will let you to place a semi-transparent image overlay over the top of the developed HTML, allowing you to perform a per pixel comparison between them.

PerfectPixel chrome extension web designer

ZenHub

ZenHub is a project management extension for GitHub. It will add time-saving features, like drap-drop task boards and to-do lists, to help improve your GitHub productivity.

ZenHub web developer extension chrome

Minimalist Markdown Editor

The Minimalist Markdown Editor Chrome Extension allows you to preview Markdown syntax as you type. You can also quickly convert the Markdown into HTML.

Minimalist Markdown Editor web developer extension chrome

fb-flo

Developed by Facebook, fb-flo is a Chrome extension that will allow you to edit running apps without having to reload. You can live edit JS, CSS, images, or any static resource.

Web Developer

If you’re not currently using Web Developer, then why not? It’s by far and away the most popular developer extension on both Chrome and Firefox. It adds a wide array of super-useful tools to the browser that every web designer and developer needs, and a bunch that you probably didn’t even know you needed.

MySQL Admin

MySQL Admin is a powerful Chrome extension to make managing MySQL databases much easier for you.

MySQL Admin chrome extension web designer

Finished!

To get more out of Chrome, you might like to take a look at DevTools Tips, it’s a curated collection of essential Chrome Developer Tools tips and tricks.

Related Topics


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.