DEV Community

loading...
Cover image for Must-have Chrome Extensions for Web Development!

Must-have Chrome Extensions for Web Development!

geobrodas profile image Georgey Originally published at geobrodas.hashnode.dev Updated on ・3 min read

Extensions add additional functionality to the user experience by aiding the user, without causing any extra overhead. Such extensions are usually built using basic HTML, and Javascript. As a web developer, there are many instances, where you need to know a particular font family or specific color to add to your existing project, which you had seen earlier while browsing. Enough talking, let's just get straight into it: -

ColorZilla

1.JPG

ColorZilla is an Advanced Eyedropper, Color Picker, Gradient Generator. Click on the extension and place it on any pixel of the page, it will be able to tell you the exact hexadecimal code of the color and automatically copying it to your clipboard, to paste it in your CSS file. It was earlier on available on Firefox but came to Chrome soon enough. Another feature of ColorZilla is that it's an Ultimate Gradient generator built in just, to your chrome browser!

Install☁

Pesticide

2.JPG

When people ask about the best debugger for CSS, I see comments saying border: 5px solid red is the best, as it will then show a grid overlay over the element. You don't need to do that when you have Pesticide. Pesticide does the same thing but without having you add any additional CSS property to your main file. Another feature of this extension is that it stays in the overlay mode on updating, so you can vary the CSS values using the trial and error method.

Install☁

Grammarly for Chrome

3.JPG

As a developer, it is very much probable that you will be typing out a lot, maybe for a blog, or even the project your making for your client. Grammarly auto-corrects any incoming mistakes you are probably going to make and provides you with how the text sounds to your readers. It also shows you an overall score of how you have written. The free version pretty much comes with the basic requirements, but I guess there's no harm getting the premium version if you are a working professional blogger.

Install☁

Web Vitals

4.JPG

Your project may take time to load or maybe you want to know how fast is your site. Google SEO ranking takes many of such factors into consideration like First Contentful paint is when your HTML just starts to render elements into the DOM. Web Vitals helps to track such changes on your site, and show results upon which you can remove unnecessary code from your site, to then improve the loading time.

Install☁

Font Finder

5.JPG

There are at times, you come across a site, and see an attractive font that you want to use in your site too. Font Finder helps you to find the exact CSS font property being used in that element and the primary font family being rendered over to the DOM. All you need to do now is search up the font family on Google Fonts or any other site.

Install☁


That's all for this blog! If you did like the blog, do give a ❤

Also if there's any other extension you would like me to add, do let me know!

If you do Retweet this blog tag me @BrodasGeo

Meet you'll in another Blog, till then Adios🙌☘

Support me 🙌

My blogs are fueled by coffee, buy me one if you feel I deserve one
Buy Me A Coffee

Discussion (4)

pic
Editor guide
Collapse
eliseogarcia1024 profile image
EliseoGarcia1024

Nice information, and thanks.

Collapse
geobrodas profile image
Georgey Author

No problem ✌🏼

Collapse
said_mounaim profile image
Said Mounaim

Thank you

Collapse
geobrodas profile image
Georgey Author

No problem mate 👍