30 Essential Chrome Extensions for Web Designers

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.



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 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.



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.



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



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



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.



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 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 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.

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.



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



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.



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

One Response

  1. mosby josh November 13, 2015

Add Comment