Every developer has a collection of a Chrome extension that uses during their daily routine due to the different benefits in saving our time and do the work easier. During this post, we will see some awesome Chrome extensions for developers.
Colorzilla
Colorzila is an extension that provides us an advanced eyedropper, color picker, gradient generator, and other colorful goodies. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. Some features that Colorzilla has
- Eyedropper get the color of any pixel on the page
- An advanced Color Picker similar to ones that can be found in Photoshop and Paint Shop Pro
- Webpage Color Analyzer - analyze DOM element colors on any Web page, locate corresponding elements
- Ultimate CSS Gradient Generator
- Color History of recently picked colors
- Get the color of dynamic elements (hovered links etc.) by resampling the last sampled pixel
Chrome Extension: Colorzilla
Google Translate
When are working on the developer work when you need to find information about something in some cases requires the help of the translator. Google Translate extension will allow us to translate the page we are visiting. The extension also automatically detects if the language of a page you're on is different from the language you're using for your Google Chrome interface. If it is, a banner appears at the top of the page. Click the Translate button in the banner to have all the text on the page appear in the new language.
Chrome Extension: Google Translate
Grammarly
When we are having conversations with people, one of the common mistakes is neglecting the grammar of what we write. To improve that Grammarly could be the best option to improve our conversations.
Grammarly is a writing assistant that improves your writing at its best. Grammarly scans what you had written for common grammatical mistakes and complex ones.
Chrome Extension: Grammarly
JSON Formatter
When are working on a test of a backend endpoint or something like that when you check in the Chrome Browser could be complicated to understand. JSON Formatter will allow us to make JSON easy to read.
Chrome Extension: JSON Formatter
Locale Switcher
When are working on several projects and countries the language is one of the most important facts that we need to keep in mind, especially if our application was developed with the goal of having an international market. Based on that in some cases, we need to check the translation of our sites in different languages, for that, we can use Locale Switcher that allow us quickly switch the browser locale to test the localization on your website.
Chrome Extension: Locale Switcher
Page Ruler Redux
This extension allows us to have a ruler to get pixel dimensions and positioning to measure elements on any web page. Page Ruler lets your draw out a ruler to any page and displays the width, height, and position of it. Some features of Page Ruler are
- Draw a ruler to any page and view the width, height, and top, bottom, left, and right position
- Drag the edges of the ruler to resize it
- Show guides extending from the ruler edges
- Manually update the size and position of the ruler from the toolbar to make precision changes
- Navigate through parents, children, and sibling elements of any measured element
Chrome Extension: Page Ruler Redux
Screencastify
Screencastify is an awesome Chrome extension that allows us to capture desktop, browser tab, or webcam capture, edit and share videos on our computer in seconds. Also, all our videos can be saved in our Google Drive account. With the free plan, we can record videos for up 5 minutes.
Chrome Extension: Screencastify
Wappalyzer
Wappalyzer is a browser extension that uncovers the technologies used on websites. It detects content management systems, webshops, web servers, JavaScript frameworks, analytics tools, and many more.
Chrome Extension: Wappalyzer
Loom
Loom is a video recording tool that lets you simultaneously record your desktop, camera, and microphone. It’s perfect for creating instructional videos about a particular procedure or when you are working creating a Pull request result about a feature that you had worked on.
Loom’s basic plan is free and allows you to record videos for up to 5 mins. The Other plans give you drawing tools, custom branding, and more.
Chrome Extension: Loom
Daily Dev
daily.dev is the fastest growing online community for developers to stay updated on the best developer news. Get all the content you love in one place -- CSS-Tricks, Smashing Magazine, web.dev, and +400 sources.
Chrome Extension: Daily Dev
CSS Viewer
CSS Viewer allows us to inspect and view the CSS properties of an element on a web page.
Chrome Extension: CSS Viewer
Eye Dropper
Eye Dropper is an open-source extension that allows you to pick colors from web pages, color picker, and your personal color history.
Chrome Extension: Eye Dropper
Responsive Viewer
Responsive Viewer shows multiple screens in one view. the extension will help front-end developers to test multiple screens while developing responsive websites/applications in an easier way.
Chrome Extension: Responsive Viewer
Conclusion
Chrome is one of the famous web browsers for developers and has some awesome features as Chrome Extensions created by the community. During this post we had seen some of those awesome extensions however there are a lot of extensions to explore.
Let me know in the comments recommendations or extensions that you think can be helpful to everyone, I will be checking and keep in mind for part 2 of this post. I will update the post based on that thanks! 👍
