DEV Community

Cover image for Best Chrome Extensions for Frontend-Developers and Designers
Cess
Cess

Posted on • Updated on • Originally published at cesscode.hashnode.dev

Best Chrome Extensions for Frontend-Developers and Designers

Hello everyone! πŸ’™

In this article, I will write about my top 10 Best chrome extensions that I find super useful as a web designer and you guys will find them interesting and useful as well.

let's get started πŸ’ƒ

What is Goggle Chrome Extension ?

Google Chrome extensions are programs that can be installed into Chrome in order to change the browser's functionality.

This includes adding new features to Chrome or modifying the existing behavior of the program itself to make it more convenient for the user.

How can I Install Goggle Chrome Extensions?

  • Open the Goggle chrome webstore

  • Find and select the extensions you want

  • Click Add to chrome

  • Some extensions will let you know if they need certain permissions or data. To approve, click Add extension. Important: Make sure you only approve extensions that you trust.

Here’s a list of some of the Chrome extensions that would make your life a lot easier as a front-end developer and a designer:

  1. Colorpick eyedropper

This chrome extension is a zoomed-eyedropper & color chooser tool that allows you to select color values from web pages and more.

screenbud-6b0727ea-0f55-4e63-a22e-9701edb388be.png

Click on this link to download Colorpick eyedropper

2.
WhatFont

This is my favorite chrome extension, this chrome extension allows you to identify any font on a webpage

screenbud-d5736938-3e7c-4c1c-8603-f1df4fb1d22b.png

Click on this link to download whatfont

3.
CSS Peeper

This Goggle Chrome extension allows you to get access to the useful styles in a website, the line height, font, button size, download images, icons on a website

screenbud-0005711c-0ff2-4fdb-b207-8a9387c0c142.png

Click on this link to download CSS Peeper

4.
site palette

The site palette google chrome extension is a must-have tool for designers and front-end developers, it's a Free browser extension that generates color palettes. It grabs colors from any website.

screenbud-5b6ff471-4098-4c47-b38c-172e79bf26ce.png

Click on this link to download site palette

5.
Page Ruler Redux

If you are wondering how big certain elements are on a web page like a button, you use the ruler extension, to get the dimensions, it shows you the width, height, etc. It allows you to get pixel-perfect measurements of any web element on a website

screenbud-5bd0007f-7ca5-41c1-b24a-1dab9f58a022.png

Click on this link to download page ruler redux extension

6.
Fake Filler

Fake Filler chrome extension helps to fill all input fields on a form in a page with randomly generated fake data. This productivity-boosting extension is a must for developers and testers who work with forms as it eliminates the need for manually entering values in fields.

The Fake Filler chrome extension Fill all inputs with randomly generated names, emails, phone numbers, etc.

screenbud-9b87a1b4-4eb9-43b0-9cbb-31d5b14876d7.png

Click on this link to download fake filler extension

7.
Image Downloader

Image downloader chrome extension helps you download many images at once from a website

screenbud-6d66d2ef-06a6-491d-9b71-a107b5933bbe.png

Click on this link to download image downloader extension

8.
Grammarly.

Grammarly Chrome extension helps you eliminate writing errors and find the perfect words to express yourself. It can be used on Gmail, Google Docs, Twitter, LinkedIn, hashnode, and nearly everywhere else you find yourself writing. It serves as a writing assistant that offers you writing suggestions to help improve your writing. You can be confident that your writing is not only correct but clear and concise, too.

Be sure to register your account to receive a personalized writing report each week to help you track your progress and identify improvement areas.

screenbud-a8c994ed-1562-4eba-a48b-2424e21055ea.png

Click on this link to download Grammarly extension

9.
Responsive Viewer

A Chrome extension to show multiple screens in one view. the extension will help front-end developers to test multiple screens while developing responsive websites/applications.

screenbud-ce4371aa-7f97-4caa-9bea-9362c561c660.png

Click on this link to download Grammarly chrome extension

A similar chrome extension to Responsive viewer is the Mobile simulator, I make use of the chrome developer tools, responsive Viewer chrome extension and the mobile simulator extension to make sure my work is 100% responsive.

screenbud-5143b1aa-a85b-422f-8182-c090efa931a0.png

Click on this link to download mobile simulator extension

10.
screencastify - Screen video recorder

This Goggle chrome extension helps you record web pages on chrome, Capture, edit, and share videos in seconds.

screenbud-d17fab91-bffb-4ff8-be5e-9853de6bcfb3.png

Click on this link to download screencastify screen video recorder

11.
uBlock Origin

This Goggle chrome extension helps you to disable ads and pop up.

screenbud-4288081f-0f1b-4256-ac51-cb426d1a0d61.png

Click on this link to download uBlock Origin

12.
Extension Manager

Extension Manager helps you to manage and quickly enable/disable extensions.

frame_chrome_mac_dark.png

Click on this link to download Extension manager

Conclusion

The above-mentioned Goggle chrome extensions will make your life easier as a front-end developer. If you have any questions or there are any other extensions that help you a lot more than this, Post about it in the comment section below and I'll be happy to answer every single one.

If you found this article helpful, please like and share it ❀️.

That's all for today! 😁 You reached the end of the article 😍

Discussion (0)