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.
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.
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.
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.
Check out the official firefox website to see more features.
List of Extension Add-ons That I Use
1. CSS Debug
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.
2. WhatFont
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.
3. Wappalyzer
This add-on is really great if you are curious what technology is being used in a website.
4. Measure-it
Measuring pixel size is really useful when we are making a website, this is a great one.
5. VisBug
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.
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.
