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