Must Have Chrome Extensions for Web Designers and Front-end Developers

0

Been able to have an arsenal of extensions and tools can help a great deal to increase your productivity and simplify your project as a front-end developer.

We all know that Google Chrome is the best browser and mostly used when it comes to developing websites and web apps. The main reason being that of its speed and growing number of extensions which can be gotten from its web store straight up from the Google browser. Today I would love to share with you most of the useful Google Chrome extensions for both front-end developers, and web designers are not left out on this too. Hopefully, when you apply for these extensions, it will increase your productivity while you are working on that new project of yours.

Dimensions

Dimensions

As the name implied, I am sure you already figured out what this extension does. It is a simple and not too fancy tool used by designers to measure screen dimensions. When enabled, you can quickly figure out the number of pixels that are between two elements.

It can also be used to measure between images, text, input-fields, icons and much more.

Go ahead and implement it in your next project.

WhatFont

WhatFont

This tool on chrome is the easiest way to identify fonts found on a web page.

Some developers think firebug and WebKit inspector are the easiest way to find out about fonts used on a web page even though they are easy to use. Actually, there is a more natural way, this extension which enables you to inspect the web fonts on a web page by merely hovering on them. I say that’s class. it is that elegant and simple.

it can also detect the services that are used to serve the web fonts.

WhatFonts now supports Typekit and Google font API.

Tape for Google Chrome

Tape for Google Chrome

This tool is a more advanced page ruler. It not only lets you get your exact dimensions of any HTML element, but you can also snap rules to HTML object (converts the snaps to HTML object) and overlay custom grid.

When used, each rule also shows the CSS selector of the element you hover. The number after CSS selector is a distance from the left, top or previous rule.

An alternative for Firefox users is the web developer toolbar.

Awesome Screenshot: Capture and Annotate

Awesome Screenshot

Now and then, you would want to take a snapshot of your entire page while working or even selected area of your screen or viewport. That is where this extension comes in and it’s very handy. It allows you to select the desired area and then save it as a local file in your computer, but alternatively, it can also save the screenshots to the extension’s website or your Google Drive account.

The extension gives you a bonus to add annotations, arrows, shapes and custom text. It comes very handily when you are in the mood to provide feedback on other designer and developer’s work.

In case you are working with Firefox browser, this extension is available to you as excellent screenshot plus.

UX checker

UX checker

This tool is so essential for designers because it’s used to run a heuristic evaluation on your website.

Heuristic evaluation is a very lightweight evaluation of a website that allows you to identify usability issues without the involvement of the users. It’s valuable if you intend to have a nice workflow as a designer.

UX checker is designed to help identify possibilities of usability issues on a web page.

CSS-Shack

CSS-Shack

CSS-shack is a desktop and web application that allows the user to create layer styles as you would do in any other image editing software and it allows you to export the end product into a single CSS file. Isn’t that incredible?

Window Resizer

 

This chrome extension helps you to simulate almost any resolution and screen so you can test your web designs to make sure it is responsive.

We all know that responsive web design is a significant player on the web right now so this tool is like a magic trick you can use alongside the default developer tools found in your web browser to make sure you are providing a great user experience on all devices.

Page Ruler

Page Ruler

It helps to measure elements on a page so that you can be sure that everything is pixel perfect. This is done by rendering a ruler on the exact web page, and it lets you accurately inspect elements such as width, height and position.

Every developer and designer should go for this extension.

ColorZilla

ColorZilla

This incredible tool helps you to identify the colour that has been used on a page by using a form of an interactive colour picker. And once it’s active, you can hover your mouse around the pixels and then access the particular code. Nonetheless, this extension also provides various colour tools which can be used to generate gradients and create palettes.

Corporate Ipsum

Corporate Ipsum

Corporate Ipsum tool is used to generate filler “Iorem Ipsum” text with a more corporate feel to it.

Font Face Ninja

Font Face Ninja

Font Face Ninja helps you inspect and identify the fonts used on a webpage. It is straightforward to use because all you have to do to identify a font is by clicking on the extension to enable it and then hover your mouse on the text to get the font info. You can also use it to bookmark your favourite fonts for later use.

Check My Links

Check My Links

This extension is meant for web developers because it helps to validate links on your webpage. It crawls through the page and tests the links to identify which of them is valid and which one is broken.

Remember they are other Chrome extensions out there but these are some of the incredible ones I have come across. Feel free to try them out to improve productivity on your next project and don’t forget to give us your thought.

Don’t forget to share with friends.

LEAVE A REPLY

Please enter your comment!
Please enter your name here