Review When Mozilla released the first Firefox Developer Edition there wasn't much difference from the regular Firefox release, but all that changed recently.
Firefox DE 44, delivered in early November, packs in a wealth of new features and improvements, particularly for anyone working with HTML5 and CSS3 animation.
The Developer Edition's Page Inspector tool adds an animation panel that allows developers to step through animations node by node and easily scrub, pause, and inspect each animation on the webpage.
The animation panel also ties into the DOM inspector so it's easy to switch between global and detail views of your animation. The animation panel also offers a visual cubic-bezier editor for tweaking any easing you need to apply to animations.
The animation tools make it much easier to create and edit animations in HTML without ever needing to leave the browser, but what might be the single most useful item is the new memory profiling tools – useful not just for developers, but by proxy end users who will thank you for reducing your memory footprint.
Inspecting memory by allocation to quickly find any oversized chunks of memory your app is using
There's one other way to inspect memory, though you'll need to turn it on each time you need it since it uses quite a bit of memory itself, namely "allocation stack." With that activated (look for the checkbox at the top of the Memory Panel) you can quickly reference the actual code that created each object in memory.
Equally useful, though rougher around the edges, is the new WebSocket Debugging API. This API allows for monitoring WebSocket frames. Eventually Mozilla plans to turn this into a new WebSocket inspection panel, but at the moment you'll need to install an "experimental" add-on created by a Firefox Developer Tools engineer.
Experimental or not, I didn't have any problems using it, it's no less stable than the rest of the Developer Edition. Because it's built on top of a pre-release version of Firefox, the Developer Edition can be a bit less stable than traditional Firefox, but it does mean you get new features faster. For example, this release starts with support for Mozilla's Electrolysis project(AKA multi-process Firefox) enabled by default.
This release also adds a new CSS filter inspector that lets you visually create, re-order and edit CSS3 filters, viewing your changes in real-time on the page.
Visually editing CSS filters with live feedback on the page
There are two new measurement tools in this version as well. The first is a set of pixel rulers along the page margins, so think the pixel rulers in Photoshop or Gimp. The second is the more useful new measurement tool. Click the icon in the developer panel tool bar and then just click and drag anywhere on the page to get a pixel-based measurement.
This is one of those incredibly simple tools that once you've used it you'll wonder how you ever did without it. It's a bit like what might be the single most useful tool for developers, namely the forget button. The forget button resides in the tool bar and when clicked will quickly wipe your cache, cookies and browsing history for the last five minutes.
Part of the problem with the Firefox Developer Edition is that it doesn't come with a detailed manual (there is some great documentation, but it often lacks real-world "recipes" to show what you can do with all the various tools).
To address that, and showcase some potential ways the developer tools can be useful, web animation engineer Rachel Nabors helped Mozilla create DevTools Challenger, an interactive showcase that's both an example of how to use the various tools and an example of what you can build with them.
When Firefox Developer Edition launched a year ago I was sceptical, especially given Mozilla's decision to abandon Mozilla Labs amid a string of failed projects.
Twelve months on, Developer Edition has proved itself a valuable tool, with half a dozen features you won't find anywhere else. Even better, thus far, the development pace shows no signs of stagnating. ®