Ultimate collection of chrome extensions for designers

Speed up your workflow and save time for things that matter more

Ever since, tech giant Google launched Chrome browser, it has become the first choice for designers and developer for smooth experience capturing about 70% of the browser market.

With native dev tools available in Chrome, making changes or inspecting design properties a breeze but the best has come in form of Chrome extension to enable designers/developer to do more in lesser efforts.

Let’s have a peek at latest chrome plugins curated for you by the category of their respective use/case after surveying some of the very popular design/dev teams in the world.


Inspect design properties in page

Page Ruler

Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.

Download link — https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

Dimensions

A tool for designers to measure screen dimensions

Download link — https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj

Perfect Pixel

This extension helps develop your websites with per pixel accuracy!

Download here — https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en

[NEW] Visual Inspector — Inspect

A delightful way to inspect design properties in live web page without losing comfort of design tools.

Download Here— https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en


Edit web pages visually

Code Cola

Code Cola is a chrome extension for editing online pages’ css style visually.

Donwload here- https://chrome.google.com/webstore/detail/code-cola/lomkpheldlbkkfiifcbfifipaofnmnkn

Css Shack

Build layer styles in the browser

Downlaod here— https://chrome.google.com/webstore/detail/css-shack/geiccgjkigajaicecnhdokggninehdlp

[NEW] Visual Inspector — Measure

Delightful way to make changes in live website without losing comfort of design tools

Downlaod here — https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en


Get colors from website

Colorzilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodie

Downlaod here- https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

[NEW] Visual Inspector — Colors
Extract and change colors, gradients, theme in live website

Downlaod here — https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en


Get font from website

What font

Identify fonts on web pages

Donwload here — https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en

Google Font previewer

Lets you choose a font from the Google Font directory with a few text styling options, and preview them on the current tab.

Donwload here — https://chrome.google.com/webstore/detail/google-font-previewer-for/engndlnldodigdjamndkplafgmkkencc

Fontface Ninja

Explore fonts within a website, try, bookmark and buy them !

Donwload here — https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh

Type wonder

This extension helps you to test web fonts on active chrome tab via typewonder.com

Downlaod here- https://chrome.google.com/webstore/detail/typewonder/ohgmapelghofmbacalgamfbejaghdilh

Font swap

Instantly swap the fonts on any web page to a Google Font

Download here— https://chrome.google.com/webstore/detail/font-swap-for-google-font/onhgmcpflfncjkdbclmhnfondmindgbg

[NEW] Visual Inspector — Fonts

Check and experiment with fonts in live website

Did he not?

Download here — https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en


Design Inspiration

Muzli

The freshest links about design and interactive, from around the web. A designer’s must!

Donwload here — https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg

Panda

Find the best content. Be informed. Stay inspired.

Donwload here — https://chrome.google.com/webstore/detail/panda-5-news-inspiration/haafibkemckmbknhfkiiniobjpgkebko/related?hl=en


Capture screenshot

Light shot

Simple and convenient screenshot tool. Select an area, edit your screenshot and upload it to the server.

Donwload here — https://chrome.google.com/webstore/detail/lightshot-screenshot-tool/mbniclmhobmnbdlbpiphghaielnnpgdp

Full page screen capture

Capture a screenshot of your current page in entirety and reliably — without requesting any extra permissions!

Donwload here — https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl

Image downloader

Browse and download images on a web page.

Donwload here — https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj

[NEW] Visual Inspector — Assets

Export all banners, icons, assets and everything else from “any” webpage

Download here — https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en


Check responsive web-page

Responsive Web Design Tester

Quick and easy way to test your responsive website.

Donwload here — https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg

Window Resizer

Resize the browser window to emulate various screen resolutions.

Donwload here — https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en


*** BONUS ***

Corporate Ipsum

Generate random corporate double-speak for use as filler text

Donwload here — https://chrome.google.com/webstore/detail/corporate-ipsum/lfmadckmfehehmdnmhaebniooenedcbb

Pendule

Web developer tools for Chrome.

Donwload here- https://chrome.google.com/webstore/detail/pendule/gbkffbkamcejhkcaocmkdeiiccpmjfdi

Daltonize (Color blindness Checker)

Daltonization is a technique of exposing details to color-blind users, allowing them see what they otherwise would have missed.

Donwload here — https://chrome.google.com/webstore/detail/chrome-daltonize/efeladnkafmoofnbagdbfaieabmejfcf


Conclusion

You may be familiar with some of these plugins and may have come across some of the new ones. All of these offers their own usability benefits and it’s difficult to say which is best unless you have tried them by yourself.

While most of the plugins work for a specific requirement — now there are few new ones which bundle most of these functionalities under one. One of these extension is Visual Inspector : an all-in-one extension for everything you need to inspect/edit in a live web page.

That being said, if we missed your favorite Chrome extension, feel free to add to the comment and we’ll update it to the list.

We’ll updating the list in every few days so, Stay tuned and keep spreading the love


Fix design bugs in Live website without coding