30 Essential Chrome Extensions for Web Designers

Prev Article Next Article

No doubt, designing a websites takes huge time and this procedure takes in numerous steps: beginning from the search of idea & info gathering to sampling, testing, and even content filling. Consequently, getting hold of the accurate tools simplifying a few of these steps can make your effort more competent and pleasing.

Coming to Google Chrome that features a stout extension platform with scores of handy tools, you as a web designer can significantly take advantage of it. At present, Chrome is 2nd most famous browser, having already surpassed IE (Internet Explorer) and with a great possibility of surpassing Firefox. However, Firefox because of its reputation is more dynamic, but Chrome is also getting popularity fast and with new-flanged extensions added every day is turning out to be an electrifying choice for the stern web designers.

Don’t Miss: 15 UX and UI Tools for Designers

Today, there are a lot of Chrome Extensions accessible for the web designers. Each of them will provide you with time-saving solutions, when it comes to deal with design & development issues that frequently arise. Therefore, with all such Extensions accessible to you, important is to pick the one that will assist you the most. Here’re the best Google Chrome Extensions for web designers. Take a look:

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

ModHeader

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

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.

PageEdit

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

PHP Console

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

Chrome Logger

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

jQuery Audit

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

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.

Octotree

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

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.

Corporate Ipsum

Yes, there are a multitude of lorem ipsum generators available, but what makesCorporate 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.