If you are a web developer, then you can agree that one of the most powerful tools at your disposal is the browser itself. More specifically, the inspector tool that gives you access to everything from the page DOM to the JavaScript global variables to the debugger to the cookies.
But there is one browser that I always recommend that gives you much more than that and that is specifically made with developers in mind.
That browser is...Firefox. But not quite your ordinary regular Firefox. More specifically, it is the Firefox Developer Edition variant that you can download right here. It's free, it's stylish, it has developer in its name, what's not to like.
The developer edition pretty much functions like your standard browser. At least from the initial glance at it. But internally, this version of Firefox is a bit more unstable than its counterpart. And that's because it's a development and testing ground for Mozilla. It gets the latest beta updates plus any experimental features that are not yet ready to hit the mainstream.
Let's talk features
Firefox Developer Edition offers for the most part the same console that you will find in the standard Firefox edition, but with a few additions that are surprisingly useful and that you won't find anywhere else.
Inactive CSS rules
The CSS properties and rules area in the console window will now let you know if an rule is not being used for a specific element. You will also get a notification window with a link offering you more information on how to fix the issue and why the rule is being ignored.
This can definitely help you identify harder to spot CSS issues in your code. But really, it can also help to reduce unused code in your projects, like most projects suffer from. I found this feature particularly useful in spotting when elements are displayed as inline-block versus block as the inline version will tend to ignore properties such as padding and margin.
Fonts Panel
The new Fonts tab includes everything you need to modify and play around with the current elements font. This includes the standard properties such as size, line-height and weight.
There are 3 main components to the Fonts tab, those being:
1. Fonts used - Shows all fonts used by the currently selected element. The fonts displayed will only appear if any of the following reasons are true:
- They are listed in the element's font-family CSS declaration value.
-
They are applied to the element as part of the browser's default styling (Times New Roman for most browsers), and no author-defined font has been supplied.
-
They are used by a descendant of the inspected element, for example, when it is a container for other elements which have text content with fonts applied.
-
They are system fallback fonts used when nothing from the font-family CSS declaration has been applied.
2. The Fonts editor - The GUI shown above used to modify font styling.
3. All fonts on page - This section displays all of the fonts that are in use on the entire page. This area is pretty useful as you can easily determine whether a font is a web font or a system font. Each font that is displayed will show the font-family, the URL to the font file, the @font-face descriptor that loads the font to the page and a text sample showing what the font looks like.
Changes panel
This one is a pretty useful panel, particularly if you find your testing out design changes in the inspector window as I do myself. The Changes tab will keep track of all new changes made to the CSS stylesheet since you loaded the page.
You can then copy any changes to the clipboard and transfer them over to your actual CSS files. This of course will only be useful to you if you have a very standard CSS model. If you are using any form of CSS framework or perhaps have multiple files to load then you might use this often. But regardless, it's still useful tool to see just what changes you have made along the way.
Beta updates
Beta releases roll out on a weekly basis for the most part and updates can include anything from bug fixes, to new features being added to old features being removed. For that reason, you definitely should treat this version of the browser as a developers tool and not have all of your personal/business/financial dealings happening here.
This is really where you will get the most benefit from using this browser. It might take certain features months to roll out in their timeline and being one of the first to test them out can give you a big advantage over other developers using standard browsers.
So give it a download and comment below if you find any features worth noting.
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.
Stay up to date
Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.