10 Chrome extensions for front-end lovers 👨‍💻
Tags: webdev, productivity, css, html
Published: 2020-02-24 15:10:13

---
title: 10 Chrome extensions for front-end lovers 👨‍💻
published: true
description: A list of 10 Chrome extensions for both front-end developers and web designers
tags: webdev, productivity, css, html
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ks0y85wxpulzw840qvb5.png
---

There are tonnes of Chrome extensions for web developers out there. Some are heavily focussed on debugging, some care about the front-end stuff. But here I am, a front-end lover just like you so I've installed the following extensions for work and fun! 

These extensions are for both front-end developers and designers out there. So, here's the list of the best Chrome extensions for front-end lovers...

---

### 1️⃣ [Eye Dropper](https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka) by kepi.cz

![Eye Dropper](https://dev-to-uploads.s3.amazonaws.com/i/lq2w5tgw3m9wj5aoyz7p.jpg)

> Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history.

Of course, there are others for the same task like ColorZilla, Simple Color Picker etc. What I liked about this one is that it's [open-sourced](https://github.com/kepi/chromeEyeDropper) and I can use it with a keyboard shortcut <kbd>Alt+P</kbd>.

#### What to look for?

1. Quick and easy to use
2. Exporting palette as CSV
3. Gives info about the color in many formats like hex, hsl, rgb etc.
4. Built-in color palette.

### 2️⃣ [Kontrast - WCAG Contrast Checker](https://chrome.google.com/webstore/detail/kontrast-wcag-contrast-ch/haphaaenepedkjngghandlmhfillnhjk) by Kontrast

{% youtube FcEyCwNmcfU %}

> Quickly check and adjust contrast in realtime in your browser to meet WCAG 2.1 requirements.

A must for UI designers. The Premium version adds batteries to the already great extension. 

#### What to look for?

1. Automatically inspects contrast for the selected element and fixes the contrast
2. Shows you the [WCAG accessibility ratio](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
3. Built-in color picker


### 3️⃣ [VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc) by ArgyleInk


![VisBug](https://dev-to-uploads.s3.amazonaws.com/i/9fu2orw7gopmmb9tsqub.jpg)

> Open source browser design tools

It has so much to offer. From displaying CSS properties to actually moving different blocks of a website LIVE! Take a look below...

#### What to look for?

1. You are able to edit any page, just like it's an artboard
2. Edit any text, replace any image
3. All of your CSS code and Sketch work takes a browser route with this


### 4️⃣ [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm) by chengyinliu.com

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8vlkolkp74pgujp82wdr.jpg)
<figcaption>Image from WhatFont Chrome Store listing</figcaption>

> The easiest way to identify fonts on web pages.

One of the best answer way to your "What font they used here?" question. 2-clicks and you get everything about that font. 

#### What to look for?

1. One-click will show you just the font name, a second click reveals all the information necessary
2. Displays the entire font family, weight, style, size and more
3. Gives you the ability to share the font with others via Twitter


### 5️⃣ [BrowserStack Local](https://chrome.google.com/webstore/detail/browserstack-local/mfiddfehmfdojjfdpfngagldgaaafcfo) by browserstack.com

![BrowserStack Local](https://dev-to-uploads.s3.amazonaws.com/i/2ujtlrq92mnquimwe4li.jpg)
<figcaption>Image from BrowserStack Local Chrome Store listing</figcaption>

> BrowserStack Local lets you test local servers & HTML, CSS and JS files in 700+ real desktop and mobile browsers, across 11 OSes.

Technically an app BrowserStack is famous for testing websites on various devices across desktops or mobile. This enables you to instantly configure and test local, internal servers, as well as local folders containing HTML, CSS and JavaScript files. 

#### What to look for?

1. A must for responsive design lovers
2. Tests local files efficiently and also works on remote browsers
3. Has built-in debugging tools and the ability to take screenshots

### 6️⃣ [Muzli 2 - Stay Inspired](https://chrome.google.com/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc) by https://muz.li

{% youtube dYSIZ13yS64%}

> The freshest links about design and interactive, from around the web. A designer's must!

This replaces your new tab with fresh and top picks from the designer community around the world. Developed by the folks behind Invision Studio and Freehand. Trust them in this when they say, "A designer's must!".

#### What to look for?

1. Latest and top picks in UI, UX and interaction design 
2. A special "Muzli Picks" feed curated by pros
3. Has a similar _Speed Dial_ feature like the Opera browser, ability to download color palette from the feed, a dedicated search engine just for UI and design!

### 7️⃣ [UX Check](https://chrome.google.com/webstore/detail/ux-check/giekhiebdpmljgchjojblnekkcgpdobp) by chrisgallello

![UX Check](https://dev-to-uploads.s3.amazonaws.com/i/a2e4ma7utq2tutnfyvxu.jpg)
<figcaption>Image from UX Check Chrome Store listing</figcaption>

> Run a heuristic evaluation on your website

As simple as that! This lets you diagnose a website manually, you take notes categorized around different UX categories like visibility, error check, flexibility and accessibility etc.

#### What to look for?

1. Quick and easy heuristic evaluations
2. Add notes and screenshots
3. Exporting as a docx file

### 8️⃣ [CSS Scan](https://chrome.google.com/webstore/detail/css-scan/gieabiemggnpnminflinemaickipbebg) by getcssscan.com

![CSS Scan](https://dev-to-uploads.s3.amazonaws.com/i/35h41hj0evgmrghiq1iz.jpg)
<figcaption>Image from CSS Scan Chrome Store listing</figcaption>

> Quickly inspect and copy computed CSS

Probably the most mature CSS inspector out there. Although it's paid, it has so much to offer from HTML classes to `:hover` states, it got you covered. You can test it out [on their website](https://getcssscan.com/). This also has a [Pro version](https://cssscanpro.com/) available.

#### What to look for?

1. Copy the entire CSS rules of any element
2. Get all the active styles on the fly
3. Gets better with shortcuts

### 9️⃣ [Keyframes](https://chrome.google.com/webstore/detail/keyframes/dalaiblmpeklkjnpeocmaojcfldmbfck) by mitch.works

![Keyframes](https://dev-to-uploads.s3.amazonaws.com/i/hvufxo9bdjdq0zm535lr.jpg)

> In-browser CSS Animation creator.

I wrote an entire article on Medium in 2018 about this...

{% medium https://codeburst.io/animate-web-page-elements-with-keyframes-f56d719d880c %}

### 🔟 [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg) by wappalyzer.com

![Wappalyzer](https://dev-to-uploads.s3.amazonaws.com/i/2hay51t88o2hut4wh2uq.jpg)

> Identify web technologies

Get in-depth of what technologies a website is made of. Works on the majority of websites. 

#### What to look for?

1. Detects everything used in a website from analytics tool to CDNs
2. You can pin a specific set of tools/technologies 
3. Has its [website](https://www.wappalyzer.com/) with more features available

---

## 4️⃣ BONUS EXTENSIONS! 🤩

These are not only for front-end lovers. Any dev/techie can use these:

1. [Elocance](https://chrome.google.com/webstore/detail/elocance/ecnkepgpmmhejcfkcikfbeiinbmancgi) - Turn any web article or document into audio. With a single click.

2. [Grepper](https://chrome.google.com/webstore/detail/grepper/amaaokahonnfjjemodnpmeenfpnnbkco) - The Query & Answer System for the Coder Community

3. [Octotree](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc) - GitHub on steroids

4. [Refined GitHub](https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf) - Simplifies the GitHub interface and adds useful features

---
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Ah, IntelliSense. What would we be without you? Learn more about <a href="https://twitter.com/code?ref_src=twsrc%5Etfw">@Code</a>&#39;s &#39;auto-complete&#39; feature here: <a href="https://t.co/EQkQuM1kzi">https://t.co/EQkQuM1kzi</a><br><br>Source: <a href="https://t.co/2DwHAUGuA8">https://t.co/2DwHAUGuA8</a><a href="https://twitter.com/VisualStudio?ref_src=twsrc%5Etfw">@VisualStudio</a> <a href="https://twitter.com/hashtag/DevHumour?src=hash&amp;ref_src=twsrc%5Etfw">#DevHumour</a> <a href="https://twitter.com/hashtag/Programming?src=hash&amp;ref_src=twsrc%5Etfw">#Programming</a> <a href="https://twitter.com/hashtag/ICYMI?src=hash&amp;ref_src=twsrc%5Etfw">#ICYMI</a> <a href="https://t.co/RqdJNHGCIU">pic.twitter.com/RqdJNHGCIU</a></p>&mdash; Microsoft Developer UK (@msdevUK) <a href="https://twitter.com/msdevUK/status/1231630805304324099?ref_src=twsrc%5Etfw">February 23, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, [here](https://medium.com/@vaibhavkhulbe)'s my Medium profile.