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 :
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.
The above picture shows the use of pesticide on Canva
Pesticide can be gotten from here
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 can be gotten from here
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.
The above image shows the ruler chrome extension used on my github page and it can be gotten from here
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.
The link is here
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.
Get it here
*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
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
Top comments (0)