My First Week with Firefox Developer Edition
A deep look into the new browser by Mozilla
In recognition of Mozilla’s 10th anniversary and release of the new “Firefox Developer Edition”, I have decided to make this browser my default browser of choice for 1 week. I will be using it to develop and browse. Below is a report of my findings and things that I found very useful. Hopefully this will help you gain a better understanding of this new browser
How this Review is structured:
My experience will be separated into three categories. These are:
- UI (User Interface)
- UX (User Experience)
- Development (Things I have noticed with the tools)
As a UI/UX Developer, I will be providing my insight on how this new application behaves with regards to already existing systems (i.e. Chrome Canary, Chrome, Standard Firefox, etc). In addition, I will do my best to capture all that “Firefox Developer Edition” has to offer but I encourage you to point out any things I may have missed by using the hashtag #fx10 and mention me @Stephn_R. So without further ado, lets dive in to the “Unofficial Firefox Developer Edition” Review!
A True Developer-Oriented UI
Not much attention is focused on the UI of a browser. We just use browsers to surf the web right? But has anyone ever considered the differences between “Minimal” and “Condensed” UI? Well Mozilla did with their new browser. Mozilla’s use of a condensed UI puts a greater emphasis on the viewport of the browser. In addition to adding focus, you can almost feel that the browser has provided us with a lot of extra room as compared to the standard Firefox browser.
Beyond just providing a lot of extra room, the Dev Toolkit has undergone a couple of subtle renovations since its sister Firefox. In the image above, this is an expanded version of the devkit where Firefox has added additional functionality for things like:
- Debugging
- Style, Shade, Canvas Editing
- Measuring Performance, Network, and Storage
All of these things can be accessed via the settings panel of the devkit.
It should also be noted that there is a wealth of tools and options available to the user. Despite having a beautifully simple Interface, there were some concerns with the Experience.
An Experience that provides more functionality at a cost…
I do believe that developers are only as strong as their tools and experience. But I also believe in the saying that you are only as strong as your weakest link. For Firefox, the element inspector is this faulty link.
After a complete week of developing web pages and modifying pre-existing ones, I could not help but notice that being able to inspect elements has become one of my most commonly used tools. So much so in fact that without it, the experience lacks a certain flair.
Beyond just this concern, the browser has a smooth experience and is seldom different than the standard experience of its sister Firefox.
Developers are powerful. And your browser should reflect that too..
When it comes to developing/writing code on this browser, Firefox Developer Edition truly is a browser that has been optimized for the modern developer. They have taken into account that developers nowadays are not just developing for one platform but for several. Be it mobile, web, or other. Tools like WebIDE and ScratchPad provide new realms for writing and editing code in a live environment across several devices at once.
A couple of other things I had noticed were subtle features for assistance with Javascript and CSS debugging.
Font Transparency:
The devkit provides full transparency on how fonts are rendered for specific elements. It goes in depth enough to even show the font face declaration, the associated name, and even where the font file was derived from. I am aware that this tool does exist in the standard Firefox experience but having come from Chrome, this is a wonderful tool that I have yet to experience. In addition, the “Abc” text is editable.
Attributes, Attributes, Attributes
I love Javascript debugging just as much as the next guy but providing the information in a coherent manner for me to process is much more important than just yelling and screaming at me through the console. The devkit has this beautifully constructed sidebar that neatly lists out the attributes of the selected element in full details. I have found this sidebar to be exceptionally helpful when handling things like JSON data, Ajax requests, and JQuery error handling.
There are many more features and things that I can talk about but I encourage you, try it out! It is definitely not your average browser and it 100% designed to work with Developers as its intended audience. So get out there and make sure to give a shout out to Mozilla! They put a ton of effort into this project and I commend them for their efforts in making the everyday developer an all-star developer.
