Trends

30 Essential Chrome Extensions for Web Designers

With the hundreds upon hundreds of Chrome extensions available for web designers, how do you choose the one, or the collection, which will help you the most?

There are quite literally hundreds of Chrome extensions available for web designers. All of them offering time-saving solutions to many of the design and development issues that will often crop up. So with all these extensions available, how do you choose the one, or the collection, which will help you the most?

To help narrow things down for you, I’ve selected some of the extensions that I regularly use and to varying degrees deem essential. There are also a few that that perhaps I should start to use, like Dimensions and jQuery Audit.


DomFlags

DomFlags is a DevTools extension that allows you to create keyboard shortcuts/bookmarks to DOM elements so that inspecting can be achieved much quicker.

DomFlags is a DevTools extension that allows you create keyboard shortcuts/bookmarks to DOM elements


Dimensions

Dimensions is an open-source extension for measuring screen dimensions. It’s a handy tool for when you’ve been given a new graphical UI mockup; just open it in Chrome, activate Dimensions and start measuring.

Dimensions is an open-source extension for measuring screen dimensions


45to75

45to75 is a simple character counter for optimizing line-length between 45 and 75 characters, thus ensuring that text line lengths meet standards.

45to75 is a simple character counter for optimizing line-length


Minimalist Markdown Editor

The Minimalist Markdown Editor app is perhaps the ‘simplest and slickest’ Markdown editor currently available for Chrome. It allows you to view the markup as you type and also features a one-click HTML conversion tool.

Minimalist Markdown Editor extension is perhaps the 'simplest and slickest' Markdown editor


Corporate Ipsum

Yes, there are a multitude of lorem ipsum generators available, but what makes Corporate Ipsum different is that it generates random corporate-jargon as filler text. Here’s an example: ‘holisticly aggregate goal-oriented networks and future-proof applications’. Can’t get more corporatey than that.

Corporate Ipsum different is that it generates random corporate-jargon as filler text


Window Resizer

Yes, there are many Chrome extensions available that allow you to test your responsive designs at different resolutions, this one just happens to be my favorite. Window Resizer does exactly what you would expect, it re-sizes the browser’s window in order to emulate various resolutions.

 Window Resizer re-sizes the browser's window in order to emulate various resolutions


Octotree

Octotree is an extension that allows you to display GitHub code in ‘easy-to-navigate’ tree format, just like IDEs.


Sourcegraph

Sourcegraph allows you to browse Github code just as though you where using an IDE. It adds instant documentation and type tooltips to the code view on GitHub.


jQuery Audit

jQuery Audit is a Developer Tools extension for easily auditing jQuery.

jQuery Audit is a Developer Tools extension for easily auditing jQuery


Chrome Logger

Formerly known as ChromePHP, Chrome Logger is an extension for debugging server side applications in Chrome.

Chrome Logger is an extension for debugging server side applications


PHP Console

PHP Console is an extension that allows you to handle PHP errors & exceptions, dump variables and also remotely execute PHP code.


PageEdit

The PageEdit extension allows you to quickly edit the markup of any page by transforming Chrome into a function-rich WYSIWYG HTML editor.


LivePage

The LivePage extension reloads your webpage’s resources as they are changed on the server, so that you are always viewing the latest version of a web page.


ModHeader

ModHeader is an extension that can add and modify the HTTP request headers sent to web servers.

ModHeader is an extension that can add and modify the HTTP request headers sent to web servers


fb-flo

Created by the developers of Facebook, fb-flo allows you edit or test running web apps without ever having to reload the page.

fb-flo allows you edit or test running web apps


EnjoyCSS

The EnjoyCSS extension allows you to access all of the handy CSS3 tools from the EnjoyCSS website all within the comfort of an extension. You can create ‪2D‬ & ‪3D‬ transforms, multiple complex ‪transitions‬, multiple linear and radial ‪‎gradients‬, text shadows and everything else you can think of.

EnjoyCSS extension allows you to access all of the handy CSS3 tools from the EnjoyCSS website


CSS Shapes Editor

CSS Shapes Editor is an extension that offers controls for creating and editing CSS Shape values via an interactive editor that overlaps the selected element.


Live CSS Editor

Live CSS Editor is an extension that allows you to freely write CSS rules on any site and instantly see the results. There are many extensions that offer this kind of functionality, but what makes Live CSS Editor different is that it saves your CSS edits whenever you reload the page.

Live CSS Editor is an extension that allows you to freely write CSS rules


SnappySnippet

SnappySnippet is a fantastic DevTools extension that will grab the CSS & HTML from a selected element and with just one click will send the code to either CodePen, jsFiddle or JS Bin for further editing/testing.

SnappySnippet is a fantastic DevTools extension that will grab the CSS HTML from any selected element and with just one click will send the code to either CodePen


Gradient Inspector

Gradient Inspector is a new extension from Rafael Carício that adds a sidebar to Chrome’s Developer Tools that will show information about the gradients that are applied to the inspected element.

gradients that are applied to the inspected element


Fontface Ninja

Fontface Ninja is an interesting extension that not only allows you to discover what fonts are actually being used on a website, but also allows you to download them as well. The developers of this extension implore you to not abuse it’s functionality.

Fontface Ninja download font


Type Sample

Type Sample is a tool for identifying and testing the webfonts from any page. You can edit the size, create your own text and also save your work. There’s also a bookmarlet available.

Type Sample is a tool for identifying and testing the webfonts from any page


WhatFont

There are many ways for discovering what particular font is being used on a website, but this extension is perhaps the simplest method. With What Font all you have to do is hover over any HTML text and the extension will let you know the fonts name.

What Font all you have to do is hover over text and the extension will let you know the fonts nam


Google Font Previewer

Google Font Previewer is a handy extension that allows you to access the Google Font API directory and choose a font, and then either apply it to the entire page or a specified CSS selector.

Google Font Previewer is a handy extension that allows you to access the Google Font API directory and choose a font


PageSpeed Insights

This is the official extension for Google’s PageSpeed Insights app. It allows you to evaluate the performance of your web pages and offers suggestions on how to improve them. If you would like to learn more about PageSpeed Insights you should have a look at this post.

This is the official extension for Google's PageSpeed Insights app


Also Worth Mentioning

  • Validity – Quickly validate your HTML docs.
  • Flat Colors Guide – An extension for quick access to flat color schemes.
  • Web Developer Checklist – An essential checklist for launching a new site.
  • IE Tab – A handy emulator for testing pages in IE drectly within Chrome.
  • Instant Wireframe – An extension that allows you to view any web page as a wireframe.

And finally… Website Destroyer

We all have bad days. And when those bad days come along sometimes you might need something that will help release the frustration and anger that’s built up. You need the Website Destroyer extension. It allows you to pulverize any website using a huge arsenal of weapons with unlimited ammunition. Unlimited ammunition! I found the atom bomb extremely satisfying.

mb_rpg


Concluding

As mentioned previously, there are hundreds upon hundreds of Chrome extensions available that will help your web design and development workflow, and I’m pretty confident that I have missed a few that you guys will probably deem essential. I would love to hear about them in the comments below.


Paul Andrew

About the Author Paul Andrew

Paul is the founder of Speckyboy Design Magazine and writes web stuff for Envato. You can follow him on Twitter.