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


Other stories you might like

  • North Korea pulled in $400m in cryptocurrency heists last year – report

    Plus: FIFA 22 players lose their identity and Texas gets phony QR codes

    In brief Thieves operating for the North Korean government made off with almost $400m in digicash last year in a concerted attack to steal and launder as much currency as they could.

    A report from blockchain biz Chainalysis found that attackers were going after investment houses and currency exchanges in a bid to purloin funds and send them back to the Glorious Leader's coffers. They then use mixing software to make masses of micropayments to new wallets, before consolidating them all again into a new account and moving the funds.

    Bitcoin used to be a top target but Ether is now the most stolen currency, say the researchers, accounting for 58 per cent of the funds filched. Bitcoin accounted for just 20 per cent, a fall of more than 50 per cent since 2019 - although part of the reason might be that they are now so valuable people are taking more care with them.

    Continue reading
  • Tesla Full Self-Driving videos prompt California's DMV to rethink policy on accidents

    Plus: AI systems can identify different chess players by their moves and more

    In brief California’s Department of Motor Vehicles said it’s “revisiting” its opinion of whether Tesla’s so-called Full Self-Driving feature needs more oversight after a series of videos demonstrate how the technology can be dangerous.

    “Recent software updates, videos showing dangerous use of that technology, open investigations by the National Highway Traffic Safety Administration, and the opinions of other experts in this space,” have made the DMV think twice about Tesla, according to a letter sent to California’s Senator Lena Gonzalez (D-Long Beach), chair of the Senate’s transportation committee, and first reported by the LA Times.

    Tesla isn’t required to report the number of crashes to California’s DMV unlike other self-driving car companies like Waymo or Cruise because it operates at lower levels of autonomy and requires human supervision. But that may change after videos like drivers having to take over to avoid accidentally swerving into pedestrians crossing the road or failing to detect a truck in the middle of the road continue circulating.

    Continue reading
  • Alien life on Super-Earth can survive longer than us due to long-lasting protection from cosmic rays

    Laser experiments show their magnetic fields shielding their surfaces from radiation last longer

    Life on Super-Earths may have more time to develop and evolve, thanks to their long-lasting magnetic fields protecting them against harmful cosmic rays, according to new research published in Science.

    Space is a hazardous environment. Streams of charged particles traveling at very close to the speed of light, ejected from stars and distant galaxies, bombard planets. The intense radiation can strip atmospheres and cause oceans on planetary surfaces to dry up over time, leaving them arid and incapable of supporting habitable life. Cosmic rays, however, are deflected away from Earth, however, since it’s shielded by its magnetic field.

    Now, a team of researchers led by the Lawrence Livermore National Laboratory (LLNL) believe that Super-Earths - planets that are more massive than Earth but less than Neptune - may have magnetic fields too. Their defensive bubbles, in fact, are estimated to stay intact for longer than the one around Earth, meaning life on their surfaces will have more time to develop and survive.

    Continue reading

Biting the hand that feeds IT © 1998–2022