Firefox Developer Edition is made mainly for developers on the web with all the core developer tools needed to work across multiple platforms. Firefox Developer Edition 44 is not for only programmers but also has some cool new tools to help work with animations much faster and easier. It’s going to make most visual designers and animators gasp in awe.

Firefox Developer Edition 44 Devtools

 

DevTools Challenger

Devtools challenger

Firefox partnered with web animation engineer Rachel Nabors to make DevTools Challenger. It comes with hands-on exercises for all the new visual design tools.

 

Animation & CSS Filter Tools

animationtools

The Page Inspector’s animation panel makes it easy to scrub, pause, and visualize each animation on a webpage. Thanks to its tight integration in the DOM inspector, you can switch between a global view of every animation, or drill down to just a few nodes.

Once you’ve found the animation you want, the visual cubic-bezier editor is just a click away. Packed with useful presets, the editor will ensure your animation moves perfectly.

cubicbezier-cropped-500x447

Firefox Developer Edition 44 also has a similar editor for CSS filters, allowing you to visually add, remove, re-order, and adjust filters with live feedback from the page.

Measurements & Colors

measuretools1-500x344

Firefox Developer Edition 44 features two brand new tools for fine-tuning layout: you can now enable pixel rulers along the page margins, or use the new measurement tool to drag-and-measure arbitrary regions of the page.

The Inspector now defaults to displaying CSS colors “as authored,” and shift-clicking on a color swatch cycles between authored styles and equivalent hex, rgb, and hsl values. There’s even an eyedropper tool to pick colors right from the page.

Memory Snapshots

nyanparticles-500x304

The new Memory tool helps front-end engineers better understand and optimize the way pages allocate and retain memory. The tool works by taking a snapshot of the heap, and then allows you to drill down by retained object type, allocation stack, or internal representation. There many more features and enhancements in the works!

WebSocket Debugging API

websocket-demo-500x202

Firefox Developer Edition 44 now exposes an API for monitoring WebSocket frames (Bug 1203802), which is the first step on the path to a full-fledged WebSocket inspection tool. Developer Tools engineer Jan Odvarko has built an experimental add-on for inspecting WebSocket traffic. Install the add-on and give it a try.

Firefox Developer Edition is available at firefox.com/developer.

This article was originally adopted from Dave Camp, Director of Engineering at Mozilla here.

Let us know what you think about these features by commenting below.

Author: Lawk

Lawk is a mozillian, director at Innovware and consults part time for Every1Mobile.

He loves open source, the open web, writing, reading and developing literacy tools that can teach the youth around the world especially in East Africa.

https://i0.wp.com/newslibre.com/wp-content/uploads/2015/11/Firefox_Screenshot_2015-11-05T01-32-05.251Z.png?fit=1024%2C284&ssl=1https://i0.wp.com/newslibre.com/wp-content/uploads/2015/11/Firefox_Screenshot_2015-11-05T01-32-05.251Z.png?resize=200%2C150&ssl=1LawkScience & TechWebAnimation tools,Designer,Dev,Devtools,Devtools Challenger,Download,Firefox,Firefox Developer Edition,Firefox Developer Edition 44,Memory Management Tools,Memory snapshots,Mozilla,Web,Websocket debuggingFirefox Developer Edition is made mainly for developers on the web with all the core developer tools needed to work across multiple platforms. Firefox Developer Edition 44 is not for only programmers but also has some cool new tools to help work with animations much faster and easier. It’s...People Media