It is meant to give designers a deep-dive (ha ha) on how to make the most of what Firefox Developer Edition offers. To showcase the new design tools, Mozilla partnered with Web animation engineer and advocate Rachel Nabors to build a hands-on experience called DevTools Challenger. The Inspector now defaults to displaying CSS colors “as authored,” an eyedropper tool lets you pick colors right from the page, and shift-clicking on a color swatch cycles between authored styles and equivalent hex, rgb, and hsl values. You can now also enable pixel rulers along the page margins and use the new measurement tool to drag-and-measure arbitrary regions of the page. A similar editor for CSS filters allows you to visually add, remove, reorder, and adjust filters with live feedback from the page. You can switch between a global view of every animation, drill down to just a few nodes, or even pick a specific animation and use the visual cubic-bezier editor to ensure it moves just the way you like. The new visual editing tools in Firefox Developer Edition include Animation Tools that Mozilla says “work the same way animators think.” The memory management tools, meanwhile, are designed to help developers understand memory performance and websites.įirst up, the Page Inspector’s animation panel makes it easy to scrub, pause, and visualize each animation on a webpage.
0 kommentar(er)
