DEV Community

Cover image for My Favorite Chrome Extensions for web development and design
Thea
Thea

Posted on

My Favorite Chrome Extensions for web development and design

Chrome extensions are one of the ways to boost daily basis productivity and optimize development workflow.
I've collected a list of my favorite, most used Chrome extensions that can make you a more productive developer.

1.30 Seconds of Knowledge

Each time you open a new tab you, you get a random code snippet. There are 9 Categories of snippets, consisting of Programming Languages, Frameworks & Interview Questions.
This is an excellent extension not only for newbie developers.

30 secs of knowledge

Website

2.Axe Web Accessibility

Axe is ideal for developers to test Web applications to help resolve accessibility issues. Find violations against common standards including WCAG 2.0 A/AA or Section 508.

Axe

Website

3.Lighthouse

Lighthouse is a popular must-have extension for developers. It does a full audit of the web site along 5 dimensions: performance, accessibility, best practices, SEO, and whether you have a Progressive Web App.

Lighhouse

Website

4.Colorzilla

My one of the most favorite extensions. ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many more advanced color tools.

Colorzilla

Website

5.Wappalyzer

Wappalyzer is a cross-platform utility that uncovers the technologies used on websites. It detects content management systems, e-commerce platforms, web frameworks, server software, analytics tools and many more.

Alt Text

Webpage

6.What Font

The easiest way to identify fonts on web pages.

Alt Text

Webpage

7.JSON Viewer

The most beautiful and customizable JSON/JSONP highlighter.

Alt Text

Repository

8.SVG Grabber

It helps to preview, download and copy the code all SVG icons and illustrations on a website.

Alt Text

9.PageSpeed

Check PageSpeed Insights score with a single click. If you find a 100% score, your site is fast.

Alt Text

10.Marinara-Pomodoro Assistant

A very useful extension for time management. It trains your focus on a single task and helps to take breaks.

Alt Text

Repository

11.Grammarly

This is a very helpful tool for non-native speakers of English like me and not only.
Grammarly is a writing assistant that goes deeper than grammar to offer you comprehensive writing feedback. You can be confident that your writing is not only correct but clear and concise, too.

Alt Text

Webpage

12.Devtwitter

A must-have extension for Dev.to community members.
It helps to keep you up to date with the latest dev content while you browse Twitter.

Alt Text

13.Tineye

TinEye is the first image search engine on the web to use image identification technology, instead of using keywords, metadata or watermarks. TinEye does not find similar images only; it finds exact matches including those that have been cropped, edited or resized.

Alt Text

Webpage

14.Window Resizer

The extension re-sizes the browser’s window to emulate various resolutions. It is very useful for web designers and developers by helping them test their layouts on different browser resolutions.

Alt Text

I also use the following extensions:

Pocket

Gmail Checker

Vue Devtools

AdBlock

Hunter

At the moment there are 25 extensions on my Chrome and all are useful for everyday life and work. It’s true they make Chrome a bit slower but I would not remove any of them.

What are your favorite and must-have extensions? Let's exchange them!

Top comments (16)

Collapse
 
imcheesecake profile image
Freddie

I'm using Kontrast as for wcag/color-picker/contrast-checker. It's awesome!

Kontrast

Collapse
 
highflyer910 profile image
Thea

Wow, it's amazing, thank you! I used this web page to check contrast ratio but the extension is much faster and handy <3

Collapse
 
imcheesecake profile image
Freddie

Yeah I used different web pages as well before, this extension is so much better! Glad I could help :D

Collapse
 
dbumbeishvili profile image
David B. • Edited

I'd add page ruler and my favourite Tampermonkey, first one lets you measure width and height in your screen and second one lets you attach custom scripts to pages. So basically you are writing chrome extension by yourself very easily. It's very productive

Collapse
 
highflyer910 profile image
Thea

Added both:) Tampermonkey seems very interesting, thank you

Collapse
 
tigr profile image
Tigran Sargsyan • Edited

Wappalyzer was a gem! Thanks for sharing the info!
I would also add ChromeVox to the list.

Collapse
 
highflyer910 profile image
Thea

Thank you, will check it!:)

Collapse
 
vyvit profile image
VyvIT

Add to your list an extension for showing file tree in github - Octotree.

Collapse
 
highflyer910 profile image
Thea

Thank you!:)

Collapse
 
abdulghani200 profile image
Abdul Ghani

30 seconds of knowledge sounds cool

Collapse
 
lucasalt profile image
LucasAlt

You should try Daily. It's a great application that allows you to gather a lot of development related articles in one place. The app is convenient, simple and looks great.

Collapse
 
highflyer910 profile image
Thea

Wow, it looks amazing, thank you! Added:)

Collapse
 
lehmannsystems profile image
Mike

What makes Window Resizer better than just using the one in Chrome DevTools?

Collapse
 
highflyer910 profile image
Thea

It's just my personal choice, I find it handier:)

Collapse
 
jitheshkt profile image
Jithesh. KT

Why use colorzilla? You can pick colors using the built-in dev tools right?

Collapse
 
highflyer910 profile image
Thea

Maybe I'm lazy and prefer to get colors just by one click:)