All hail Firefox Dev Edition 44 – animations, memory and all

Going from from 'pah' to 'hang on, a minute'


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.

The memory tool offers a snapshot of everything in memory on a per-tab basis and then breaks everything down by type. There are four types of memory objects to look at: Objects, which are JavaScript objects grouped by class name; Scripts; Strings; and a generic "Other" for everything that isn't one of the first three.

FF dev memory allocation

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.

That means, if you've got some huge object you want to re-factor, you can quickly see exactly which lines of code in your app created it. It might be the smartest JavaScript memory debugging tool I've ever used. Be sure to check out the Mozilla Hacks blog for more details and a nice video of everything you can do with the Memory debugger.

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.

FF dev CSS filter editor GC

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

Similar topics


Other stories you might like

Biting the hand that feeds IT © 1998–2021