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.
Firefox has better dev tools especially for grid and flexbox.
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.
You want to open mobile view, without blocking half the view? You can.
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.
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.
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.
This add-on is really great if you are curious what technology is being used in a website.
Measuring pixel size is really useful when we are making a website, this is a great one.
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.
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.