Firefox Is Better Than Chrome For CSS Debugging
And here’s why
Yeah, you have read it right. Stop using Chrome or any other browser. Most of you might get offended, but I know what I am talking about. Chrome is the best choice when it comes to JavaScript and other stuff. Even I am writing this article using Chrome. So, why should you stop using Chrome? Well, I usually suffer a lot when CSS doesn’t work the way I want it to work. It’s totally my fault, but how can I get help? or how can I know the CSS I am applying is invalid here? Sometimes, these small CSS tweaks can make you suffer a lot.
After a lot of searches, I found a valuable resource to help me understand these CSS tweaks. I found the Firefox browser. I will explain to you, why you should reconsider your browser and start using Firefox while learning CSS.
If something doesn’t work, it will tell you why.
While learning CSS, you might experiment with CSS. Sometimes, something didn’t work and you have no idea that why it didn’t work. Let Firefox come to the rescue. Let me show you how.
Above is the Developer tool of Chrome and you can see that I have applied vertical-align property to the button and it didn’t work. As you might know that why it didn’t work. What about beginners, who are just learning now? For them, it might be arduous. Now let’s see Screen Shot of the Firefox developer tool.
You can see that it’s telling me what was the mistake, I was using display flex for the button, changing it to display inline will work.
What are the fonts, the website is using?
As a beginner web developer, you might be wondering about different fonts of different websites. When I started out, I was so curious to know about the different kinds of fonts, some famous websites were using. Unfortunately all in vain, until I found Firefox. In the Firefox developers tools, you can actually for fonts. Here’s how.
Go to the Website, then open the Firefox developer tool. Navigate to Fonts and then select All fonts on Page. There you will be able to see the list of fonts.
If you want to see the font of a specific header or any paragraph, select that paragraph and then see repeat the same process.
FlexBox inspector
CSS flexible box model is commonly known as flexbox model, it is CSS layout model. The flexbox layout allows responsive elements within a flex container to be automatically arranged depending upon screen size.
If you are working with flexbox and want to inspect the flexbox container then Firefox FlexBox inspector may be your friend in need.
You just need to open the inspector and navigate to the flex item. Go to the Styles tab and you might see the property of display flex. In front of flex, you may see a small grid icon just click on that and you will see that the flex container got highlighted. It is very useful when you are working with flexbox properties like flex-wrap etc.
CSS Grid inspector
How important it is to keep track of rows and columns in CSS Grid and Firefox CSS inspector helps you do that very easily. To open CSS inspector, you just need to follow the process as you did to open flexbox inspector. After opening grid inspector you can see the highlighted rows and columns.
Accessibility Inspector
One of the best ways to fix your website Accessibility is to inspect it through the Firefox accessibility inspector. Open the developer tool and navigate the accessibility or you can use the shortcut (shift + F12). Where you can scan for issues and it will also let you know, how you can fix these issues.
Conclusion
As you can see, how helpful Firefox can be while learning CSS. There are a lot more to just these, but I guess these features are pretty much used every time. This, of course, is just my opinion. If you agree or disagree, be sure to let me know in the comments.
