A Look Into: Firefox Developer Edition

After a brief preview, Mozilla has officially launched Firefox Developer Edition, a browser tailored specifically for web developers. Though not officially declared, it seems poised to replace Firefox Aurora eventually.

The name, official statements, and the landing page suggest that Firefox Developer Edition is the first major browser designed with developers in mind, rather than merely accommodating them. It’s packed with a variety of debugging tools and utilities and operates on its own profile, making it convenient to use alongside the standard Firefox browser. Let’s explore its features.

How to Optimize Firefox for Better Performance

How to Optimize Firefox for Better Performance

Your web browser of choice is truly the gateway into accessing the global Internet. The web has been... Read more

User Interface

The Developer Edition’s interface signals a clear focus on developers. The toolbar is slimmer than those of Chrome and the standard Firefox, yet it includes more buttons by default.

Firefox Developer Edition Toolbar

The default dark theme is likely a strategic choice based on UI testing, emphasizing the importance of quickly locating tools during development. Even brief delays can accumulate over time. While I generally prefer lighter colors for everyday browsing, the dark theme proved effective in my initial tests.

Should you prefer the standard look, switching off the Developer Edition theme is straightforward via the “Use Firefox Developer Edition Theme” button, accessible through Menu -> Customize.

Customizing Firefox Developer Edition

However, some interface decisions leave me puzzled. Bookmarking, for instance, seems less crucial in this context, as most developers are familiar with the Ctrl / Cmd + D shortcut. Thus, the inclusion of a dedicated bookmarks button, alongside sections for downloads and even the Developer Edition start page, appears somewhat superfluous.

First Impressions

Initially, the Developer Edition felt familiar, a sentiment echoed by Mozilla themselves on their landing page:

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

The developer tools function similarly to those in the standard Firefox version, with WebIDE and Valence already integrated. It’s primarily the subtle design tweaks that distinguish the Developer Edition.

Nevertheless, there’s a palpable sense of potential and direction. Mozilla appears to have been gearing up for this edition, accumulating a wealth of developer tools and expertise. It feels as though they’ve laid down a foundation for future innovations and testing.

Put simply, the Developer Edition seems like an updated branch of Firefox, crafted with minor modifications. Going forward, it will likely evolve more distinctly, focusing on tools and features specifically for developers, setting it apart from the standard Firefox experience. This initiative aims to make it the preferred choice for developers.

A key indicator of Mozilla’s strategy for the Developer Edition is the integration of Valence. Here’s Mozilla’s view on Valence:

“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.”

This suggests the Developer Edition will be the first to receive new tools. While Mozilla may not remove existing developer features from Firefox, new and innovative tools might be exclusive to the Developer Edition. This approach, aimed at minimizing unnecessary features in browsers, is something I wholeheartedly support.


WebIDE stands out as a key feature prominently showcased. Launched with Firefox 34, it serves as a successor to the App Manager – facilitating the editing, running, and debugging of Firefox OS applications either through the Firefox OS simulator or directly on a device, akin to what Xcode offers for iOS development.


Valence, a tool for cross-browser debugging, enables developer tools to interface with various browsers effectively. Currently, it primarily supports Chrome on Android and Safari on iOS. For a clearer understanding of its capabilities, Mozilla has prepared a helpful video:

Developer Tools

Those acquainted with Firefox’s developer tools will find the Developer Edition’s tools familiar. They can be accessed with Ctrl / CMD + I or by right-clicking on a webpage element and selecting “Inspect Element”.

Firefox Developer Edition Developer Tools


The Inspector offers a detailed tree view of the webpage’s DOM, highlighting elements on the page as you hover over them in the DOM view. This feature is incredibly useful for understanding element dimensions and placement.

Inspecting elements with Firefox Developer Edition

Alternatively, activating the icon in the screenshot above lets you navigate through the page with your cursor highlighting elements, an efficient method for inspecting elements amidst overlapping ones.

The Inspector also enables direct editing of element contents or properties. Useful tips include navigating the DOM with arrow keys, and using the delete key for removal and Ctrl / Cmd + Z for undoing deletions.

Dragging within the DOM highlights a section, visually indicating its boundaries on the webpage – another excellent feature for visualizing HTML structures and CSS code. The CSS rules for any selected element are displayed in a sidebar, facilitating quick reviews and edits.


The console acts as a comprehensive display for CSS, JS, Net, Security, and Logging information. Primarily utilized for JavaScript debugging and identifying missing resources, it also supports command execution, including through jQuery.

Firefox Developer Edition Console


While the console is handy for simple script troubleshooting and verification, complex issue resolution necessitates the debugger.

Setting breakpoints allows the pausing of JavaScript execution at specified points, enabling variable adjustments and execution path reviews before proceeding.

Using the Debugger in Firefox Developer Edition

This tool is invaluable for bug identification and scenario testing, offering insightful complementarity to unit testing.

Style Editor

The style editor is ideal for crafting CSS and instantly viewing its impact. It permits selection, importation, and creation of stylesheets, with a straightforward saving mechanism for modifications.

Style Editor in Action

Although perfect for minor adjustments, it’s less suited for complex setups involving preprocessors, where setting up a comparable environment with live reload capabilities might be equally burdensome.


Introduced in Firefox 34, the performance tool supersedes the JavaScript sampling profiler, facilitating the creation of detailed performance analyses, including the impact of reflows, paints, and the parsing of JavaScript and CSS.

Performance Analysis

Profiles are easily managed, allowing for straightforward comparison and optimization efforts.


Exclusive to the Developer Edition, the timeline tool visualizes browser engine activities, tracking reflows, restyles, paints, console, and DOM events.

Browser Engine Timeline


The Network tab offers valuable insights into your website’s requests during load time and user interaction. It showcases an array of resources, status codes, load durations, and timings.

A filtering option at the bottom enables the examination of specific types of assets, notably useful for analyzing AJAX calls via the XHR filter.

Network Insights

Selecting an asset reveals detailed information on response and request headers, cookies, parameters, and timings.

An especially handy feature is the option to initiate a performance analysis directly from the context menu, resulting in comparative pie charts of cached and uncached loads.

Cache Performance Analysis

Responsive Design Mode

The responsive design mode enables previewing your site across various screen sizes, though it’s not an exact emulator, it’s invaluable for testing media queries.

In this mode, you can toggle between preset dimensions, manually adjust sizes, alter orientation, and simulate touch events.

Responsive Design Testing

While I typically adjust browser window width during development, using responsive design mode for final reviews and mid-breakpoint assessments has proven exceptionally beneficial.


To summarize: though the Firefox Developer Edition may not introduce groundbreaking features for those already familiar with Mozilla’s offerings, its potential is evident. I’m eager to see integration of tools specific to Coffeescript, Sass, Less, and more.

The addition of compilers and processing utilities could elevate the Firefox Developer Edition from a mere testing tool to a comprehensive development suite. As a developer with a toolkit for compiling scripts, building finals, automating tasks, checking errors, and live-reloading, a browser incorporating some of these functions could significantly expedite certain processes. I’m keenly watching this development and recommend you do the same.

Your insights or experiences with the Firefox Developer Edition are welcome in the comments.

Note: This article was originally published on November 11, 2014.