5 Guaranteed No Stress Chrome Extensions for Frontend Developers
Best Chrome extensions for productivity
When it comes to building, debugging, and determining whether or not a web application works properly, most developers choose Chrome as their preferred web browser.
And that's largely because of the web features and built-in developer tools that Chrome provides.
Because of the array of choice that chrome allows, it thus makes sense for there to be extensions that boost developers productivity and make programming work easier for us.
That is why In this article, you'll discover some of the top extensions that you may or may not have utilized while using Chrome.
1. Fake filler
If you work on forms, you'll agree with me that manually filling the forms can be a chore especially when you're fixing a bug, or testing a validation.
And when you have up to 10 input fields, it's more or less a herculean task.
That's why you need a better method than manually filling in your forms.
And that's what fake filler extension does.
You can save hours of repetitive work by using this extension to automatically fill in dummy data. With a simple click, Fake Filler can automatically fill out all your fields.
See it in action 👇
2. Awesome screenshot and screen recording
This is an amazing video recorder extension. Best part, you can download the video to your local device and share the link.
And you can choose whether you want to record a particular tab, the entire web screen, or your full laptop screen.
You can also mute the sounds while recording.
See how it works 👇
3. ColorPick Eyedropper
Imagine scrolling websites and discovering the perfect color - the exact shade you want to use for your next project and you don't know the particular hex code used.
Previously, you'd have to open the Dev tools and look for the hex code in the element tab.
Colorpicker eye dropper extension, on the other hand, allows you to find any color used on any website.
Simply activate the colorpicker extension and hover your mouse pointer over the desired element on the website. Best part, it gives you both the hex code and RGB colors
Watch it in action 👇
4. Whatfont
If you've ever been absolutely impressed with a font you saw on a website and want to include it into your next project, this chrome extension is for you.
You can utilize the whatFont extension instead of manually opening the dev tools, identifying the element you require, and determining the font used.
Simply hovering over an element will reveal the typeface used on it.
Not only does it show you the font used on the website, it displays the font family, the font style, weight and even font size of the font you hover on.
It even shows the line height of the text, and the color of the text.
Watch it in action
5. Go full page
Want to take a complete screenshot of a current webpage without having to adjust the screen orientation to accommodate or manually scrolling, then you have to use Go full page extension.
It automatically generates a screenshot of your current webpage. Then you can save it as either an image or pdf file.
See it in action 👇
6. CSS Viewer
CSS viewer extension helps you to detect CSS attributes wherever you point your mouse.
It allows us to instantly examine the CSS code that was used when you hover on any picture, button, text, or other element on a web page.
It quickly filters out the CSS code for a specific webpage element.
So if you've wondered why a particular website has some complicated CSS positions, CSS Viewer definitely helps you detect the tricks used for the elements on the page.
See how it works 👇
Conclusion
Chrome extensions are great and each developer will have their own unique set of favorites.
The ones listed here are the ones that I frequently use and they save me a lot of time on a daily basis.
These extensions will help you improve your work flow and dramatically cut down on the amount of time it takes to complete your tasks.
Let me know your favourites in the comment section