6 Chrome extension🔧 ⚙that can boost your productivity as a web developer 👩‍💻 🚀🚀
Tags: webdev, tooling, programming, beginners
Published: 2022-09-07 17:03:16

As a beginner or intermediate web developer most times we wish there are somethings we can debug and locate errors for before checking back to our super lengthy code 😩.

Good news though👍🏽, I got you covered ;). There are extensions/tools that can be installed and used on the chrome browser to boost our productivity as a developer

Here are six (6) chrome extensions that can boost your productivity :

1. [Pesticide] (https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi) 
2. [Eye Dropper] (https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka)
3. [Page Ruler] (https://chrome.google.com/webstore/detail/page-ruler/jcbmcnpepaddcedmjdcmhbekjhbfnlff)
4. [Font Finder] (https://chrome.google.com/webstore/detail/font-finder/pkiokiaeahklmefmfpnnofmgfafajpdl) 
5. [GoFullPage] (https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl)
6. [JSON viewer] (https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) 


**Pesticide**

As web developers we sometimes run into situations where the result of our styling isn't what we expected and this can be so frustrating 😫.

Well pesticide helps with this.
It outlines each element and see how your elements are nested in one another and this is really awesome.

There are two types of pesticide chrome extension, one is with hover bar while the other isn't.

![Pesticide on Canva](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekknddv2t0zdc8xlvwsk.png)

The above picture shows the use of pesticide on [Canva] (canva.com)

Pesticide can be gotten from [here] (https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi)


**Eye Dropper**

Most developers are not really friends with our UI designers 😂, this is because of the breath-taking designs and colors we are to code. 

  Getting the right colors can sometimes be a headache,. especially when you wanna clone an app or website and you can seem to get the specific colors, in that case you can use the eye dropper chrome extension.

The eye dropper chrome extension helps you to get colors from Web pages and this is do damn useful.

You can just visit the figma page of the 
UI design, use the eye dropper extension and get the colors used.

![Eye dropper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9a5zlg7pmpgx2dmn6sh.png)

Eye dropper can be gotten from [here] (https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka)


**Page Ruler**

Getting the exact dimensions (width, height) of an object in your Web page can be helpful.

Either when duplicating a website and you need the exact dimensions of an object on a webpage or for any other project you're working on that you need the exact dimensions from a Web page. Then the **page ruler** is here to rescue you 📏👩‍⚕️.

It's when activated this extension goes in a _Ruler mode_ and when you drag your mouse, it create a box and it gives full details of the dimensions.

![Page Ruler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d240lxv62uexa1esw8u8.png)

The above image shows the ruler chrome extension used on my github page and it can be gotten from [here] (https://chrome.google.com/webstore/detail/page-ruler/jcbmcnpepaddcedmjdcmhbekjhbfnlff)


**GoFullPage Chrome extension**

Are you a beginner in web dev?

If so, you may have wondered how others get a full picture of webpages they build and you also want to do this either to see the full result of your hardwork or send it to a client
Gofullpage is the secret solution 🤗

This chrome extension helps you to get the full image of your webpage, and gives you options to either get it in pdf or in jpg.

It also have an editor that you can use to edit your new Web page image.


![In progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0o0ew066h8ntsi5kckuy.png)

![Full page screen cap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a95eione2vk3dt7xb8w0.png)


The link is [here] (https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl)


**Font Finder** 

This is an all-in-one tool as the name implies this chrome extension Is used to get details of a font used on a webpage, but it does so much more than that like the details of the  font selected, the color, line height,  font weight etc.

When using this tool, and then you hover on your webpage this extension gives details on the element and it type then a full description when you click on it.


![Using on my git page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/um7pfhrh3euf2k9uun0t.png)

Get it [here] (https://chrome.google.com/webstore/detail/font-finder/pkiokiaeahklmefmfpnnofmgfafajpdl)



**JSON viewer **

Dealing with json data format can be confusing at times 😕. The format may  not be structured well and you don't understand it that way..

Json viewer helps to structure your json data on your webpage.

It automatically structures it and even had code lines.

Get it [here] (https://t.co/9k2Px5DkMe)


This is the end of this article, I hope you found these extensions useful and if you already use some I hope you found some more here.

**NOTE** : There are over 130,000 extensions on chrome and this is just so small, so you can explore more at the [store] (https://chrome.google.com/webstore/category/extensions)