Developer Edition 44: New visual editing and memory management tools

This month marks the one-year anniversary of Firefox Developer Edition. To celebrate, we’re excited to show you some new tools – and some improvements to existing tools – that let you work with the Web in a visual and intuitive way.

As the Web becomes a more dynamic, interactive and mobile experience, visual designers are more than ever experimenting with animation – and the latest Firefox Developer Edition has tools to make working with animations faster and easier. Firefox Developer Edition now gives visual designers and animators a set of visual editing tools that work like they do. We are addressing the technically challenging aspects of animation with a set of visceral, powerful, interactive tools that are comfortable for designers to use. Visual editing tools should appeal to animators, not just to programmers.

DevTools Challenger

Reading about our new tools is great, but trying them out yourself is even better! To help you get started, we partnered with acclaimed Web animation engineer and advocate Rachel Nabors to create DevTools Challenger. Check out DevTools Challenger for hands-on exercises with all of our new visual design tools. Remember to keep scrolling until you get to the ocean floor!

Screenshot of the Devtools Challenger demo website

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.

animationtools

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

Screenshot of the visual cubic-bezier curve editor

We’ve also built a similar editor for CSS filters, allowing you to visually add, remove, re-order, and adjust filters with live feedback from the page.

filtereditor-cropped

Measurements & Colors

Firefox Developer Edition also features two brand new tools for fine-tuning layout: you can now enable pixel rulers along the page margins, or use our 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

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, then allows you to drill down by retained object type, allocation stack, or internal representation. We think you’ll like it, and we’ve got many more features and enhancements in the works!

Screenshot of the DevTools memory panel

WebSocket Debugging API

Lastly, we’re extremely excited to announce that Firefox 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, we’d love your feedback.

Screenshot of the experimental WebSocket Debugger add-on

Firefox Developer Edition is available at firefox.com/developer. Let us know what you think about these features by commenting below or following @FirefoxDevTools on Twitter!

About Dan Callahan

Engineer with Mozilla Developer Relations, former Mozilla Persona developer.

More articles by Dan Callahan…

About Dave Camp

Dave Camp is Director of Engineering for Firefox at Mozilla.

More articles by Dave Camp…


22 comments

  1. Chris H

    Great work, thanks for the best (and sexiest) browser!

    November 3rd, 2015 at 07:59

  2. Samiullah Khan

    If you have hard time to find newly added measurement tools than you can find it in the wrench area of devtools. This time it’s this tool that brought me back to use Dev Version for debugging.

    November 3rd, 2015 at 08:40

  3. EH

    WebSockets in dev tools? Hallelujah! I’ve been waiting for this for quite some time!

    Working for a company that does streaming has made it hard to not use Chrome, seeing as they thus far have been the only browser that could inspect web socket frames. But now, with the reference implementation from Mr. Jan Odvarko, Firefox has an objectively speaking better implementation of web sockets dev tools!

    I should be able to win over some developers with this :)

    November 3rd, 2015 at 10:51

  4. guest

    how to download Developer Edition 44?

    November 3rd, 2015 at 18:07

    1. Dan Callahan

      Visit https://firefox.com/developer

      November 3rd, 2015 at 18:17

  5. Ingeborg

    Szkoda wielka, że nie ma edycji w języku polskim :( Pozdrawiam i życzę dobrego dnia. Inga.

    November 4th, 2015 at 04:29

    1. Dan Callahan

      Jest to polska wersja pod adresem https://www.mozilla.org/firefox/developer/all/#pl :)

      November 4th, 2015 at 04:59

  6. dorme

    Bonjour,

    Avez-vous une version française pour les vidéos et les texte.
    Merci

    November 4th, 2015 at 23:27

  7. guirong

    can firefox developer edition add a feature like chrome “device”, where i can change device model(Useragent) and screen size at same time ?

    November 5th, 2015 at 20:00

  8. Jess

    Hi Dave and Dan,

    Can you tell me where to find 3D View in Firefox for Devs? It’s my favourite tool. It’s perfect for discovering layout problems or side scrolling bugs. I have to open up regular Firefox often just to use that tool because I can’t find it on the developers’ version. Would love to know if it’s included.

    Thanks for this awesome browser, looking forward to trying the new tools!

    Jess

    November 6th, 2015 at 14:17

    1. Dan Callahan

      Hi Jess! That’s Bug 937166. Long story short, the 3D View currently conflicts with Electrolysis (“e10s”), our multi-process feature. The code is pretty gnarly, so instead of fixing it as is, we’re planning on something closer to a complete rewrite next year that will work with e10s.

      In the meantime, you can get the 3D View back by opening a non-e10s window, which should be one of the options under the browser menu. You can turn e10s off permanently in preferences (uncheck “Enable multi-process Firefox Developer Edition”), but I wouldn’t recommend it. Multi-process is the future, and it helps make sure that a tab crashing won’t crash your whole browser.

      November 6th, 2015 at 15:02

  9. Denis

    I miss user agent switcher so much. This is hardly the only feature, which makes me switch to chrome.

    But still, keep up great work guys!

    November 8th, 2015 at 09:40

  10. Francis Kim

    Great work guys! The WebSockets Debugging API looks awesome :)

    November 9th, 2015 at 05:56

  11. Marco

    Dave and colleagues, you just won the internet.

    Big thumbs up!!!

    November 12th, 2015 at 00:56

  12. Tony

    Tools (from palette selector) eye-dropper doesn’t seem to work in the tool. Instead of changing color or even copy to clipboard, nothing happens. The one on the toolbar does work in copy to clipboard fashion.

    November 12th, 2015 at 16:00

  13. jeremy

    Hell Firefox, I really look forward to enjoying this amazing tool, wish me luck, no actually, I have all the help I will need…..you dudes. Thanks man….

    November 14th, 2015 at 18:30

  14. Pramod Pantula

    Thanks a lot for this awesome developer friendly browsers… I am very much interested to work with you guys, do you think I have any chance ;-)

    November 15th, 2015 at 09:39

  15. Ahmed Abd El-Aaal

    Awesome

    November 15th, 2015 at 10:23

  16. Constantine

    All looks fine.
    But as spoke the russians – in each burrell of honey there is its own spoon of shit: FireFox deny the installation of WebSocket Monitor.

    November 19th, 2015 at 05:16

    1. Dan Callahan

      Because the websocket monitor is still experimental, you need to set xpinstall.signatures.required to false in about:config before the add-on will install.

      November 19th, 2015 at 09:05

  17. Rene Pilon

    WOW. – love the tools! excellent debugger, excellent browser!

    November 24th, 2015 at 20:34

  18. Geovani dos Santos

    Thanks for Firefox Developer Edition. Excellent tool!

    November 25th, 2015 at 12:09

Comments are closed for this article.