20 Clever Chrome Extensions for Web Designers

Monday, November 14, 2016

Chrome is a powerful, fast and secure browser and the great thing about it is that there are lots of extensions available for download which can enhance your web browsing experience. These extensions are really helpful and will give you the opportunity to customize your browser even further. They add new features and functionalities to make your experience more pleasant and increase your productivity.

There is a large variety of extensions for you to download. All of them are really easy to install, all you have to do is to download the one you want from the Chrome Web Store and press install. It will automatically add it to your browser so you can enjoy its features.

This time we decided to look for those clever Chrome extensions that can be used by web designers to ease their workflow. So, here are 20 great Chrome extensions for web designers, to help you with your projects.

MagiCSS

MagiCSS is a CSS editor extension that comes with an in-page editor. It is a live preview of CSS changes which is created by Priyank Parashar. All you need to do is run MagiCSS and write your CSS code and it applies instantly.

magicss-live

CSSViewer

CSSViewer is a great extension that is really easy to use. You just need to click the toolbar icon and then hover over any element you want to inspect in your current page.

cssviewer

CSS-Shack

CSS-Shack is a great extension that helps you create layers styles and export them in a separate CSS file. It is similar to image editing programs.

css-shack

CSS Shapes Editor

CSS shapes editor is a chrome extension used for live editing of CSS Shapes values. It is an interactive editor easy to use and great for your designs. Try it out!

css-shapes

Web Developer Checklist

Web developer checklist is an extension you definitely need to add to your browser. It checks any web page for violation of best practices. This extension is very useful to any web designer.

web-developer

Check My Links

Check My Links is an extension that will examine any web page you choose and will highlight valid and broken  links. This can be a real time-saver if you want to verify that all the links from your website are working properly.

check-my-links

Dimensions

Dimensions is a really useful extension that measures the screen’s dimensions. You can measure the widths and heights of different elements on your screen, distances between them, and more

dimensions

Responsive Web Design Tester

Responsive web design tester is a simple chrome extension that checks if your website is fully responsive on the different devices.

responsive

PerfectPixel

PerfectPixel is an extension that allows developers to create a semi-transparent image over the top of your web page and makes a pixel comparison between them.

perfectpixel

Instant Wireframe

This great extension adds a wireframe overlaying any web page.

instant-wireframe

SnappySnippet

SnappySnippet is a chrome extension that will extract CSS & HTML from a selected DOM subtree. It allows you to send the code to CodePen, jsFiddle or JS Bin in just one click

snappysnippet

CSS3 Generator

CSS3 generator will automatically generate the code you need for CSS. It is a handy extension for all web designers.

css3-generator

WordPress Style Editor

WordPress style editor lets you examine your WordPress stylesheets and make adjustments directly to CSS. You can make changes to your theme stylesheet without using FTP programs.

wordpress

Perfmap

Perfmap is a handy extension that will make a heat map of  your website by checking the time needed for your elements to be loaded in the browser.

perfmap

Page Ruler

Page Ruler allows you to draw a ruler on any website you want, giving you the width, height and position of any element.

page-ruler

ColorZilla

ColorZilla is an extension that adds color tools to your browser. It will add an eyedropper, color picker, palette viewer and a gradient generator.

colorzilla-

Fontface Ninja

Fontface ninja is a cool extension that will recognize any font. You can find out the name of any font you like and then use it in your own projects.

fontface

45to75

45to75 counts the number of characters helping you to optimize the line length. It will make sure that the characters are between 45 and 75 and therefore visible on all devices.

45to75-

ZenHub

ZenHub is a great project management extension created for GitHub. It drop-drop task boards and to-do lists, that can be real time-savers.

zenhub

Minimalist Markdown Editor

Minimalist markdown editor is a chrome extension that lets you preview a markdown syntax while you are typing. You may also convert the markdown into an HTML file.

minimalist

The post 20 Clever Chrome Extensions for Web Designers appeared first on Web Design Blog | Magazine for Designers.



via http://ift.tt/2fz4ECi

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading