A Look Into: Firefox Developer Edition

After a short tease, Mozilla has officially released Firefox Developer Edition. It’s a new browser aimed specifically at web developers. Although it hasn’t been announced officially, it looks like it will be replacing Firefox Aurora at some point.

Judging from the name, the official announcements and the landing page it looks like Firefox Developer Edition is the first large browser built for development, not just supporting it. It contains a multitude of debuggers, panels and other utilities, plus it uses its own profile so it can be run alongside regular Firefox more easily. Let’s take a look at what it offers.

Recommended Reading: How To Optimize Firefox For Better Performance

User Interface

The interface changes in the Developer Edition already hint at a developer-centric approach. The toolbar is noticeably narrower than both Chrome and regular Firefox while adding more buttons by default.

It’s fairly obvious that the new default theme is dark, which is possibly the result of some clever UI testing. It is extremely important to find everything at a glance while developing. A one second delay in finding something could amount to hours a month. I personally prefer the light colors for casual use, but the dark UI was great in my initial tests.

If you prefer the default theme you can switch the developer edition theme off very quickly using the “Use Firefox Developer Edition Theme” button by going to Menu -> Customize.

On the other hand, there are some interface choices which puzzle me. I’m fairly sure that bookmarking will be far less used in this version and most developers know the Ctrl / Cmd + D key combination to make it happen. The fact that there is a dedicated button for this; the bookmarks section, the downloads section, even the Developer Edition start page seems a bit unnecessary.

First Impressions

My first impression was that there’s nothing I haven’t seen before here. This is even reinforced by Mozilla on the landing page:

“It’s everything you’re used to, only better”

Developer tools handle about the same as they do on regular Firefox, WebIDE and Valence can already be used. Only slight cosmetic changes make the Developer Edition different than Firefox.

That being said, there is an underlying feeling of a good direction here. It seems very much like Mozilla has been waiting to create this version of Firefox for a while, they were just waiting for a critical mass of developer tools and know-how. It feels like they’ve created a framework in which to place future tools and methodologies and put them to the test.

In more developer-friendly lingo: it seems like the Developer Edition is a fork of the regular version which was made just now, with a few tweaks. From here on out, development will intensify and focus specifically on this product, separating it from regular Firefox and making it the go-to place for developers. Or at least that is the intention.

One of the biggest indications of how Mozilla plans to position the Developer Edition is the inclusion of Valence (more on this later). Mozilla’s stance on Valence is this:

“The Adapter is still in its early stages, and is available only as a preview. We do not yet recommend using it for day-to-day work.”

It seems that the Developer Edition will receive tools earlier than regular versions of Firefox. While it doesn’t seem likely that Mozilla will remove developer features from Firefox, perhaps some upcoming ones will only be added to the new Developer Edition. I for one support keeping bloat out of browsers and welcome this new direction.

WebIDE

One of the most prominently advertised features is WebIDE. Added in Firefox 34, it is a replacement for the App Manager – it enables you to run edit and debug Firefox OS applications using the Firefox OS simulator or an actual device. In other words, it is what Xcode is for iOS.

Valence

Valence is essentially a cross-browser debugging tool. It allows the developer tools to work with a wide array of browsers. At the moment the main targets for Valence are Chrome on Android and Safari on iOS. The technical details of this are a bit difficult to comprehend, so have a look at this video done by Mozilla:

Developer Tools

If you’re familiar with developer tools in regular Firefox, then it’s pretty much what you’d expect. Invoke it using Ctrl / CMD + I or right-click on an element and click “Inspect Element”.

Inspector

The Inspector gives you a collapsible tree view of the page DOM. When you hover over an element in the DOM, it is highlighted on the page which is super-helpful for figuring out dimensions and where things are in general.

Doing it the other way around is even more helpful. By clicking on the top right icon as per in the screenshot above, you can cruise through the page and elements will be highlighted under your cursor. In many cases, this is a more viable way of inspecting something when it is in the midst of overlapping elements.

The Inspector allows you to double-click to edit the contents or properties of an element. One trick which may be useful to know is that the DOM can be traversed using the arrow keys, you can even delete and undelete using the delete key and Ctrl / Cmd + Z command.

Clicking and dragging in the DOM will highlight a portion of the DOM, the bounds will be shown on the web page, another great tool for visualizing your HTML structure and CSS code.

The CSS rules for any given element shows up in the sidebar giving you a quick read and easy editing access.

Console

The console is a window that shows aggregate information from CSS, JS, Net, Security and Logging. It is mostly used for Javascript debugging and tracking down missing resources but can also be used to issue commands, even via jQuery.

Debugger

The console is great for quickly logging some script issues and making sure your code works on the first try. If you want to figure out some more complex problems, you’ll need to use the debugger.

By setting breakpoints in your code, you can pause the execution of the Javascript code before that point. You can view where the execution is in the code and you can modify variables before moving on.

This not only enables you to figure out bugs but also lets you test various use cases pretty quickly. It won’t replace unit testing but it will give you deeper insight and a great companion to them!

Style Editor

The style editor is a great place to write styles and see the results applied live. You can select any of the stylesheets loaded or you can import and create new ones on the fly. Any modified file can be saved easily.

While this is an amazingly handy feature for little tweaks, it isn’t so convenient for more complex environments that work with preprocessors. These environments can be set up, but the overhead of doing so is about the same as using a preprocessor which has live reload enabled.

Performance

The performance tool was introduced with Firefox 34 and is a replacement for the JavaScript sampling profiler. It allows you to create extremely detailed performance profiles down to the the toll that reflows and paints, Javascript and CSS parsing takes and more.

Profiles can be saved and imported easily, so you can compare profiles to make your applications streamlined to the extreme!

Timeline

The timeline tool is not available in the regular version of Firefox by default, it enables you to see what operations are performed by the browser engine. The tool will display reflows (layout), restyle, paint, console and DOM events.

Network

The Network tab is great for gaining insight into the requests that your website makes while it loads and while it is being used by users. It provides an overview of resources and status codes, along with the time it took to load and when the loading took place.

The bottom filter allows you to look at specific asset types, a particularly useful tool for figuring out AJAX calls using the XHR type.

Clicking on any asset displays its response and request headers, cookies, parameters, response and timings.

One of the most useful features is the ability to start a performance analysis on your website by right clicking and choosing the appropriate option. This will bring up two pie charts which compare a cached and an un-cached load.

Responsive Design Mode

The responsive web design Singapore mode allows you to view how your site will look in different sized windows. This is not a true emulator so results may vary somewhat, but it is great for previewing the outcome of media queries.

Once in responsive mode you can switch between preset screen sizes, click and drag for custom sizes, change orientation and simulate touch events.

When developing, I usually change the browser window width and leave it be until I’m done but I find that the responsive web design Singapore mode is great for final checks and for looking at states in-between breakpoints.

Conclusion

In a nutshell: while there aren’t a lot of brand-spanking new features for developers who keep up with Mozilla news, the direction is very promising. I look forward to a lot of tool-specific features like Coffeescript, Sass, Less and others.

Perhaps even compiler and other processing tools could be added to make Firefox Developer Edition a true developer package, and not just something we use to look at our end result with.

As a seasoned developer, I already have tools to compile my scripts, create final builds, automate general programming tasks, error-check my code and live-reload my browser. If a browser would offer some of these features, it may make some aspects of my work a lot faster. I’ll be following this project with great interest and I suggest you do too.

If you have any thoughts or already have some experience with the Firefox Developer Edition, let us know what you think in the comments.