DEV Community

Cover image for 8 real useful Chrome Dev & Design extensions πŸ‘¨πŸ»β€πŸ’»
Thiago Silva Lopes
Thiago Silva Lopes

Posted on

8 real useful Chrome Dev & Design extensions πŸ‘¨πŸ»β€πŸ’»

1- Blackbox - Select. Copy. Paste & Search

If the extension title itself wasn't enough to convice you: imagine copy and paste the text on any image, article or video you want.

To spare yourself lots of lost time, you just have to install, create an free account, and copy and paste any text you want.
Screenshot

2- Dark Reader

If like me, you are also tired of tiring your eyes with the light theme as default on almost every website, or just don't have the option to change to dark mode.

This open source MIT-licensed extension, turns literally any website you want in dark mode, applying dynamic CSS classes to change their styles.
Screenshot
The most amazing part is that you can export these styles to apply on your website yourself! Or simply study why those colors work with each other.

If all of that wasn't enough, you can change brightness, contrast, and even font styles to your personal favorite. IN ANY WEBSITE.

3- ColorZilla

Copy the HEX, RGB, HSL and HSV values from any color you see around the web. In addition, you can also analyze all colors applied in CSS of any site.
Screenshot

4- Grepper

I think we can all relate to spending more time than we'd like to look for a solution to that annoying bug.

This extension is here to help us decrease this time. Where all users of this extension can publish code snippets, to any google search, and any framework/language. 🀯😳

Screenshot

5- JSON Viewer

Format any JSON data you see on web. With this extension your JSON response is so much more legible. Analyze raw data no more.
Screenshot
You can even customize the color scheme, highlight, wrap and many others things on your response.

6- CSS Viewer

See many CSS properties for an div/HTML element just by hovering it.
Screenshot

7- Material Icons for GitHub

Screenshot
Alright, this one might not be real uuseful, but adding file & folder icons to GitHub repos really helps find visually what you want. Or just make things more prettier, i guess. πŸ€“

8- VisBug

And I saved the best for last.
This one is just like CSS Viewer, but with sooo much more.

This awesome extension give you power to preview any change you want in a website, just with the right clicks. Color, padding, margin, position, shadows, and it keeps going! πŸš€πŸ™ŒπŸΌ
GIF Demo
Although may be a little complex to use at first, once you get the hang of it, you'll never need to test a code change a thousand times to get it the way you wanted.

That's it❗ πŸ₯³

Thank you so much for reading my article this far. Any extension interested you? Or have you not heard of it yet? Tell me in the comments! πŸ€©πŸ˜‰

Discussion (2)

Collapse
andrewbaisden profile image
Andrew Baisden

Good list.

Collapse
thiagoow profile image
Thiago Silva Lopes Author

Thank you so much! So glad you liked it! πŸ₯³