Developer Edition 45 – Animations, Memory Tools and More

Firefox Developer Edition 45 has improvements to DevTools that will help you track down memory usage, dig into CSS animations, and more. In this post we’ll cover some of these changes – be sure to download the latest Developer Edition to try them yourself.

CSS animation tool++

demo of css animation tools

The animation tool has many additions:

  • When you click on an animation in the timeline, you’ll now see a list of the animated properties plus keyframes which show you the change in values over time.
  • If an animation is moving too fast for you to see what’s going on, you can now slow it down by changing the playback rate.
  • Animations running on the compositor thread have a lightning bolt icon next to them. This means that they will remain smooth even if the rest of the page is slow.

Learn more about using the animation tool in the latest episode of Patrick Brosset’s screencast series: “Using the Dev Tools to understand CSS”.

Beyond the animation improvements, the inspector’s search tool was also improved. It now matches results from all markup in the page and subframes.

What’s eating your memory?

We’ve improved the way you can inspect memory usage and find what is consuming memory. With snapshot diffing, you can inspect changes in the heap contents since a previous snapshot. And with snapshot filtering, you can show only memory allocated in a certain file or function, or show only the objects of a specific [[class]] type.

Read more about the Memory Tool and documentation about how to get started with it. We’ve also put together a quick gif that walks through the diffing process.

A bit of polish

We’ve also been working on polish and bug fixes across the toolbox – here are some of the highlights.


If you’re working with WeakMap and WeakSet objects, you can now see their entries in the web console.


Also, logs coming from service workers show up by default in controlled tabs. There is still a lot of work coming to improve the service worker debugging experience, follow this tracking bug for more.

Network monitor

  • You’ll see markers showing when DOMContentLoaded and load events fire in the network timeline.
  • You can now filter out filenames based on a string match. Just use “-” in front of the string, which is a handy way to narrow down a big list of requests.


And a big thanks to contributors Albert Juhé and Tim Nguyen for their help in making the netmonitor table UI match the rest of the toolbox.

There are a lot of improvements in this version so download it now — it’s free!

About Lin Clark

Lin works in Advanced Development at Mozilla, with a focus on Rust and WebAssembly.

More articles by Lin Clark…

About Brian Grinstead

More articles by Brian Grinstead…


  1. Jens

    Thanks for the improvements, very much appreciated.

    What I find most usefull is the plain text search in the inspektor that also comes with FF 45 ( This is a bug I followed very closely and was the last thing I was *really* missing compared to Firebug (or Chrome).

    I think FF dev tools are much better than Firebug these days, in many regards also better then Chrome. Nonetheless many of my colleagues still use Firebug (a matter of old habits). I think you should really release Firebug 3 asap to get these over to the new tools.

    December 23rd, 2015 at 01:33

  2. james

    Great, Earlier there used to be some difference in performance between chrome and firefox while running Gridients. Now both browsers render it same

    January 18th, 2016 at 10:55

Comments are closed for this article.