Firefox🦊 is the best browser for web-developers 💻🐱‍👤
Tags: firefox, webdev, javascript, browser
Published: 2020-07-07 13:08:23

Hello all😊👋
In this article, I am going to tell you guys why Firefox is the best browser for web-developers to date in deep🌊👓⤵🔥.

# Contents of Article 
* Basic Intro 
* Benefits and Features of Firefox
* How I contributed to Dev.to using firefox Devtools🔥

## Basic Intro
According to Google Searches also Firefox is the best browser for web-developers. and why that is a true detailed description with practical examples you can find in this article⤵ stay tuned for bonus tips too.
Mozilla Firefox is a free and open-source web browser developed by the Mozilla Foundation which is available on all well known operating systems.
You can use two versions of Firefox 
* [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/)
* [Firefox](https://www.mozilla.org/en-US/firefox/new/)
 Firefox usesSpiderMonkey is the code name for the first JavaScript engine, written by Brendan Eich at Netscape Communications, later released as open-source and currently maintained by the Mozilla Foundation.

## Benefits and Features of firefox
Firefox is the best choice for both web developers and their viewers, because it offers the most reliable performance, even with many tabs open(it takes less RAM and CPU usage compare to the chrome according to my 2 years of experience with firefox and many forums also agree that😊), the most consistent standards-compliant rendering and Javascript functioning across all desktop/laptop platforms, and the most democratic transparent open-source software development community, resulting in browser software which is much less likely to contain malware. Firefox is the only major browser that is truly open source, maintained by all opensource contributors. Firefox is also better than other major browsers because it is available in its native form on all platforms. Firefox renders and performs reliably on all platforms.

# Customization and Features/tools 
We can customize the firefox browser UI in our own way⤵
![Customize](https://dev-to-uploads.s3.amazonaws.com/i/68qo2x00pqcp95db1ikz.jpg)
After opening the customize tab we can customize search box themes/tabs/tools/flexible search box view like⤵ 
![Custom2](https://dev-to-uploads.s3.amazonaws.com/i/03vkbyom9mc5x6jsczrf.png)
and firefox is having many other inbuilt tools also.
this type of facility is not available on chrome etc browsers.
# Security 
Firefox is opensource and it is the best-secured browser to date and it looks for Data breaches and blocks the trackers automatically inbuilt tools are there for maintaining users' security.
# FireFox Devtools Shortcuts
You can use Firefox dev-tools using `CTRL+SHIFT+I` on windows and on mac using `Cmd + Opt + I`.

## FireFox Developer Edition
Among developers, Firefox is probably the world’s most popular browser.

On it’s own, Firefox is a pretty powerful browser. Deemed a lot faster than the average web browser, Firefox helps you to track down information and create stunning websites in a fraction of the time of something like Edge. 

However, if you really want to get the next-level Firefox experience, then it’s worth upgrading to Firefox’s own developer edition. 

Like Google Chrome for Developers, Firefox’s Developer Edition comes built for the open web. 

Additionally, with Firefox Developer Edition, you get access to a next-generation CSS engine (written in RUST), an inactive CSS system that grays out CSS declarations that don’t impact the page, and more. There is also a host of “Firefox DevTools” to access. 

With your new browser, you can access a best-in-class JavaScript debugger, a Master CSS Grid, and various other features too. In fact, Firefox is the only browser that is specifically built with tools that help developers to build and design with their own CSS grid. These tools make it easier to visualize information, display area names, and preview transformations too.
Firefox developer edition is having
 specific `web developer`option there you can find ⤵ following features
![Devtools](https://dev-to-uploads.s3.amazonaws.com/i/pwhv0cvd6wz0g1zia8k7.jpg)  
Color picker is awesome 🔥🦊❤
And including all these tools we can get more `web developer tools ` on [Firefox web-developer toolbox](https://addons.mozilla.org/en-US/firefox/collections/4757633/webdeveloper/)
and many more things you can do with Firefox go and explore.

## How I contributed to Dev.to using firefox dev-tools
A month ago I find issue's in `Ten X hacker theme of Dev.to` email text color's are overridden you can check the issue here on [Github](https://github.com/thepracticaldev/dev.to/issues/7998)
# Issue 
<!-- Before creating a bug report, try disabling browser extensions to see if the bug is still present. -->

<!-- If you're having trouble updating your profile, it is likely because you logged in separately with GitHub & Twitter. Please check if this is the case before creating a bug report, and email yo@dev.to so we can merge your accounts. -->

**Describe the bug**
hello
I set my theme to Ten X hacker theme my username is hidden because in default theme my username is everything is white except contents ex:-name and articles but after switching to dark theme my is get mixed with that and then that thing is hidden if you guys let me in I can change CSS color properties for showing text it is just a color property thanks 😊
<!-- A clear and concise description of what the bug is. -->

**To Reproduce**

<!-- Steps to reproduce the behavior: -->

<!-- 1. Go to '...' -->
Go the Profile icon then UX but first your theme is set to the default mode and then switch to Ten X hacker theme and then go and see the difference that's all about how to reproduce.
<!-- 2. Click on '....' -->
<!-- 3. Scroll down to '....' -->
<!-- 4. See error -->

**Expected behavior**

<!-- A clear and concise description of what you expected to happen. -->

**Screenshots**
![Annotation 2020-05-21 144847](https://user-images.githubusercontent.com/42638797/82544099-366e5980-9b72-11ea-8cb1-e4f52e3b03c0.png)
![Annotation 2020-05-21 144920](https://user-images.githubusercontent.com/42638797/82544141-4b4aed00-9b72-11ea-84da-f75e917bed68.png)
![Annotation 2020-05-21 144948](https://user-images.githubusercontent.com/42638797/82544171-5867dc00-9b72-11ea-81d3-11e11233755b.png)



<!-- If applicable, add screenshots to help explain your problem. -->

**Desktop (please complete the following information):**

- OS:Windows 10 X64
- Browser:firefox 
- Version:76.0.1 (64-bit)


# My solution to that using Firefox Devtools ⤵
You can check my PR on [Github](https://github.com/thepracticaldev/dev.to/pull/8001)
![Annotation 2020-05-21 144920](https://user-images.githubusercontent.com/42638797/82544141-4b4aed00-9b72-11ea-84da-f75e917bed68.png)
![Annotation 2020-05-21 144948](https://user-images.githubusercontent.com/42638797/82544171-5867dc00-9b72-11ea-81d3-11e11233755b.png)
# After changing base 50 value to white text appeared clear🔽
![devto](https://user-images.githubusercontent.com/42638797/82552091-15f8cc00-9b7f-11ea-8f6a-780033ae2e29.png)
I changed the value of base 50 (saas codebase) using Firefox `inspector tool` and in live-preview of webpage(We can't do that in Chrome🤙) I can see changes there and the good thing is my PR is merged and I got Dev contributor badge also and because of all these things Firefox is the best browser for the web-developers. 
I do things daily with 1.5 gigs of the internet you guys can support me for internet expenses my DM's are open for donations details and for Queries related to web-development/tech.
Thank you good day all.
Note:-I wrote this article in 2 hours my max time record is broked after this article😅.
![GIFY](https://media.giphy.com/media/PjyXWtFq4MwovNE3O1/giphy.gif)

* [Mytwitter](https://twitter.com/krishnadevz)

* [MyGitHub](https://github.com/krishnadevz)

## I am FireFoxian 🌊🐱‍👤
     Indie Dev