22 C
Lagos
Saturday, August 8, 2020

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

- Advertisement - data-full-width-responsive="false">

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.

- Advertisement -

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.

Advertisement
data-full-width-responsive="true">

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.

Advertisement
data-full-width-responsive="true">

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

Advertisement
data-full-width-responsive="true">

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.

- Advertisement -
- Advertisement -

Trending Now

Jay Kordich JDJB21001 2-in-1 Deluxe Juicer/Blender

Jay Kordich was a star athlete in his youth, even playing college football for the University of Southern California. When he was 25 years...
- Advertisement -

Startimes Subscription Prices, Packages and Channels List in 2020

StarTimes Nigeria is one of the popular cable TV providers in Nigeria. This service is a subsidiary of a Chinese based company called Startimes...

10 Best Places to Download Bollywood Movies

Do you spend hours watching Bollywood movies as I do? Have you been in search of the perfect sites to download the...

GB WhatsApp Pro, OG WhatsApp Pro V8.10 (GB OG Replacements) Latest Version

Good day peeps, the latest GBWhatsApp is here... and it is called the GB WhatsApp ProRemember earlier, GB Mods the maker of GB WhatsApp...

GB WhatsApp, WhatsApp Plus and OG WhatsApp Tips and Tricks

Checkout the new GB WhatsApp Tutorial.Hello, welcome to WhatsApp Plus, OG WhatsApp and GB WhatsApp tips and tricks. For the sake of this article,...

Best Low Size PC Action Games For Your Old PC/Laptop With Low Specs

Gaming time is one our favorite time and nothing beats the ability to play high-quality games on our PCs but like some of our...

DStv Channels List, Packages and Prices in 2020

Thousands of people in Nigeria have put their trust in DStv to provide them with the very best of television shows and programs.DStv (Digital...

Screen to Body Ratio: 22 Smartphones With the Highest Screen to Body Ratio in 2020

Screen to body ratio on a smartphone screen recently turned into an important thing to consider when comparing smartphones. It became more important after...

Big Brother Naija 2019: How to Vote Using MyDStv, MyGOtv?

Big Brother Naija pepper dem has been everything hot and spicy since it started, and Big brother keeps serving us the viewers with the...

7 Best Offline Racing Games for Android Users in 2020

Are you a real gamer? If you are one, then you will know how exciting it can be to experience the adrenaline rush that...

How to Make Payment for Your StarTimes Subscription

StarTimes users must be super excited about how easy it has become to get their cables subscription done. All you need in 2019 is...
- Advertisement -

Related Posts

Artificial Intelligence (AI) – An Introduction and How It Works

Many people have heard the term artificial intelligence. While this term is commonly used many people are still unsure of exactly what this term...

Africa Needs Virtual Reality in Its Educational System

Words are powerful and speak volume, a picture is worth a thousand words, a video is worth about a million, and virtual reality is...

Mixed Reality (MR) – An Introduction and How It Works

People are usually confused when they hear the term mixed reality (MR). This is no surprise because about half a decade ago, we didn't...

A Look Into Cheap VPS Hosting

With just $10 a month, you can get yourself a VPS hosting for your website. It is very affordable in today’s web hosting but...

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.