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.

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.

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.

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

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

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

Inspector

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.

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.

Console

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.

Debugger

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.

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.

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.

Performance

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.

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

Timeline

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

Network

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.

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.

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.

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

Conclusion

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.