Firefox Developer Edition 44: Visual Editing and Cool tools
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 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
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.
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
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.
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
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.
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.