DEV Community

Cover image for 8 real useful Chrome Dev & Design extensions ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป
Thiago Silva Lopes
Thiago Silva Lopes

Posted on

2 1

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! ๐Ÿคฉ๐Ÿ˜‰

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where youโ€™ll build it, break it, debug it, and fix it. Youโ€™ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good olโ€™ AI to find and fix issues fast.

RSVP here โ†’

Top comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden โ€ข

Good list.

Collapse
 
thiagoow profile image
Thiago Silva Lopes โ€ข

Thank you so much! So glad you liked it! ๐Ÿฅณ

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs