7 Useful Extensions for Developers & Designers
Tags: webdev, devlive, design, tutorial
Published: 2021-10-21 07:01:49

There is no need to mention that majority of us are working in Development or Design sectors. It is also a fact that most of us use Google Chrome as our preferred browser. 
Therefore, I thought of looking up to some available extensions that I can use to make my work easier. I was amazed by the number of options that were there. Almost 30-40 extensions that we can use for our web development and design work.

In this article, I'm going to mention 7 of them. The seven that I found very useful and appropriate given our title. Let's hop right into it- 

##1. Web Developer

![web dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q16vkj2wux2s3dso54fh.PNG)
No, it is not the title that I mentioned. Web Developer is a chrome extension which has more than 1 million active users. Upon installation, this extension adds a toolbar to your browser. 
It gives you the functionality to enable/disable multiple dev aspects, adding more image borders, missing units from CSS, JS, etc.

In short, it can provide you a huge variety of functions which you can operate without opening editor or console.

Get it here - [https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm]

##2. Site Palette
![site palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/io9ymxpn53vcm3g0x3ck.PNG)
Be a web developer or be a designer, you can't run away from the colors. You'll always need to play and experiment with color palettes. Site Palette extension helps you do that easily. You can easily create, share, and extract amazing color palettes using this extension. 

Saves you time, efforts and is also integrated with Google Palette along with coolers.co. Isn't it great?

Get it here - [https://chrome.google.com/webstore/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh]

##3. Light House
![Image house](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0k4acrdewifztc835tia.PNG)
This extension is more inclined towards accessibility and analytics of a web page rather than design but is as much important. It is an open source tool.

You can use to audit the SEO metrics, performance, etc. As we all know, these metrics are needed to improve the quality of a web page. Indeed the Lighthouse!

Get it here - [https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk]

##4. React
![Image react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hv5xhtnsej3nr53wox74.PNG)
Not the Js framework but the Chrome extension. However, the work is same as the framework React. This developer tool extension with the purpose of providing open-source React library has proven to be useful. Highly useful for pro developers.

It makes the work of checking hierarchy and react tree easy. 

Get it here - [https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi]

##5. Marmoset
![Image Marmoset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbxtx9y7mug3oo1llv71.PNG)
Do you love sharing code snippets? Are you active in tech communities where people keep sharing their codes? Do you want your snippets to be aesthetic and pleasing?

Get your hands on this extension and it will give you aesthetically pleasing code snippets for you to share across various platforms. Portray yourself as the developer you always wanted!

Get it here - [https://chrome.google.com/webstore/detail/marmoset/npkfpddkpefnmkflhhligbkofhnafieb?hl=en]

##6. JSONView
![Image Json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltnr53sfu6bynp3dha7u.PNG)
This extension works as a JSON beautifier. This one may not be very relevant to beginners, but for developers working on certain platforms and frameworks it is a bliss. JSON beautifier has the potential to increase the efficiency of programs manifold.

If you are someone who encounters JSON every now & then, this extension is a must have then.

Get it here - [https://chrome.google.com/webstore/detail/json-viewer/aimiinbnnkboelefkjlenlgimcabobli?hl=en]

##7. Code Cola
![Image CodeCola](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uc0q4fbto4ust97z9yku.PNG)
Say you are working on a web project and you need to view, edit, update source code in the run time. Code Cola does that for you. That too in a much classy, attractive and efficient manner. It is far better than inspect element and simple view source functions. 

It allows you to share and edit CSS properties flawlessly and multiple sharing/visual features for designers too.

Get if here - [https://chrome.google.com/webstore/detail/code-cola/lomkpheldlbkkfiifcbfifipaofnmnkn?hl=en]

Now, do you know any other chrome extensions that might prove beneficial for Developers and Designers? Don't hesitate from commenting down below.