Chrome Extensions for Front-end Devs

I am not sure whether it is just me or a few come in my squad where whenever I mention my friends I work as Front End Developer they come to this particular notion that I just work on HTML, CSS which is so not true. It’s really fun when we go on explaining how front end development works as the technology has improved to such an extent that we not only just work on the website but we have the capability to create an entire Progressive Web Application that gets immense capability with logic involvement through Javascript.

Front-end web development, aka client-side development, is the practice of creating HTML, CSS, and JavaScript for a simple website or Web Application so that the user can see and easily interact with them directly. The common challenge associated with front end development is that the tools and techniques we use to create the front end of a website change constantly thus we need to constantly be aware of how the field is developing. Few UI-frameworks and libraries include AngularJS, React, Node.js, ReactJS, jQuery, and the list continue as there is constant development to make sure that Front-end development provides configuration, optimization, and operation of all interface elements.

Here is the list of a few chrome extension which I have relied on so far to help me in front end development

  1. ColorPick Eyedropper:

A zoomed eyedropper and color chooser tool which allows us to select color values from different webpages and more

2.JSON Viewer:

Front End Devs would be receiving a lot of API response and we need a medium to view JSON in the right way, JSON Viewer comes to rescue here as it makes JSON so easy to read.

3. WhatFont:

The easiest way to identify fonts on the web pages.

4.Wappalyzer:

Wappalyzer is a utility that uncovers the technologies used on websites. It detects content management systems, e-commerce platforms, web frameworks, server software, analytics tools, and many more.

Wappalyzer analysis for Medium

5.LightHouse:

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

When auditing a page, Lighthouse runs a barrage of tests against the page and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.

Well, guys, I found these to be very helpful for me in many tireless nights on coming up with good Web Applications. I will keep adding more extensions in my mind and please do comment and let me know which could come in this category but have been missed, I would be really happy to add the extension.

I believe this would help someone, open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️.Source of images are from google😅

Happy Coding :)