Curated List of Browser Extension I Personally Use

Written on April 24, 2021 by

photo of me

Theodorus Clarence.

––– views • 3 min read

Read in Bahasa Indonesia

Introduction

Finding these add-ons really boosts my time on developing a website, debugging, and learning

Disclaimer: I personally use Firefox Developer Edition for my default browser. Some of extension probably have the chrome version, but you really should try Firefox Dev Edition.

Why Firefox Developer Edition?

1. Better Grid & Flexbox Tools

Firefox has better dev tools especially for grid and flexbox.

Grid Tools

2. Better Color Scheme

Also, the overall code theme for the Firefox Dev tools is absolutely better than the orange-y chrome for me. It resembles Dracula color theme which I also use on my VSCode.

Color Scheme

Also, you got a custom font tabs, you can directly customize it with a slider, how convenient.

3. Mobile View without Opening Devtools

You want to open mobile view, without blocking half the view? You can.

Mobile View

4. Lots of Development Tools (eyedropper especially)

Task manager and Eyedropper is really great, the rest is the usual like Chrome too. But it has a dedicated icon on the toolbar, so it is really handy.

Eye dropper

Check out the official firefox website to see more features.

List of Extension Add-ons That I Use

1. CSS Debug

Download Link

This add-on has a really great feature for giving a global outline for each HTML element. This tool helped me a lot during debugging CSS. Really recommended, I even map my mouse button to toggle this tool easily.

CSS Debug

2. WhatFont

Download Link

A great tool to peek what font is under the hood. Fairly easy to use, just click it and you get the font. I usually use this to check the font-size and if I am curious what font is being used on other website.

What Font

3. Wappalyzer

Download Link

This add-on is really great if you are curious what technology is being used in a website.

Wappalyzer

4. Measure-it

Download Link

Measuring pixel size is really useful when we are making a website, this is a great one.

Measure It

5. VisBug

Download Link

I recently found this, and I think it is my best find yet. It has a lot of great tools like changing padding, margins, font size. You can move the flexbox arrangement, change your text, all with one tool. This is really great when you want to fine-tune your website design after building it.

Visbug

Summary

Be sure to download all of those add-ons! Add-ons help a lot when developing a website. Find something that you like and comfortable with, and utilize it.

Enjoying my post? Kindly subscribe to my newsletter if you want an update everytime I post.