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
Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.
A tool for designers to measure screen dimensions
This extension helps develop your websites with per pixel accuracy!
[NEW] Visual Inspector — Inspect
A delightful way to inspect design properties in live web page without losing comfort of design tools.
Edit web pages visually
Code Cola is a chrome extension for editing online pages’ css style visually.
Build layer styles in the browser
[NEW] Visual Inspector — Measure
Delightful way to make changes in live website without losing comfort of design tools
Get colors from website
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodie
[NEW] Visual Inspector — Colors
Extract and change colors, gradients, theme in live website
Get font from website
Identify fonts on web pages
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.
Explore fonts within a website, try, bookmark and buy them !
This extension helps you to test web fonts on active chrome tab via typewonder.com
Instantly swap the fonts on any web page to a Google Font
[NEW] Visual Inspector — Fonts
Check and experiment with fonts in live website
The freshest links about design and interactive, from around the web. A designer’s must!
Find the best content. Be informed. Stay inspired.
Simple and convenient screenshot tool. Select an area, edit your screenshot and upload it to the server.
Full page screen capture
Capture a screenshot of your current page in entirety and reliably — without requesting any extra permissions!
Browse and download images on a web page.
[NEW] Visual Inspector — Assets
Export all banners, icons, assets and everything else from “any” webpage
Check responsive web-page
Responsive Web Design Tester
Quick and easy way to test your responsive website.
Resize the browser window to emulate various screen resolutions.
*** BONUS ***
Generate random corporate double-speak for use as filler text
Web developer tools for Chrome.
Daltonize (Color blindness Checker)
Daltonization is a technique of exposing details to color-blind users, allowing them see what they otherwise would have missed.
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 ❤