Event listeners popup, @media sidebar, Cubic bezier editor + more – Firefox Developer Tools Episode 33

A new set of Firefox Developer Tools features has just been uplifted to the Aurora channel. These features are available right now in Aurora, and will be in the Firefox 33 release in October. This release brings many new additions, especially to the Inspector tool:

Event listeners popup

Any node with a JavaScript event listener attached to it will now have an “ev” icon next to it in the Inspector. Clicking the icon will open a list of all the event listeners attached to that element. Click the pause icon to get taken to that function in the Debugger, where you can set breakpoints and debug it further. (development notes & UserVoice request)

Event listener popup screenshot

Keep in mind the events pane in the Debugger as well, which lists all the event listeners on the page

@media sidebar

There’s a new sidebar in the Style Editor which displays a list of shortcuts to every @media rule in the stylesheet (or Sass source) you’re editing. Click an item to jump to that rule. The condition text of the rule is greyed-out if the media query doesn’t currently apply. This works well in conjunction with the Responsive Design View (Opt+Cmd+M / Ctrl+Shift+M) for creating and debugging mobile layouts. (development notes)

@media rules sidebar

Add new rule

Right-click anywhere in the Rules section of the Inspector to get an “Add Rule” option. Selecting this will add a new CSS rule, pre-populated with a selector that matches the currently selected node. (development notes & UserVoice request)

Add rule screenshot

Edit keyframes

Any @keyframes rules associated with the currently selected element are now displayed in the Rules section of the Inspector, and are editable. This is the first step on the way to better debugging of CSS animations. (development notes)

Editing @keyframe rules

Cubic bezier editor

To aid in editing easing animations, there’s now a cubic bezier editor that appears when you click the icon next to an animation timing function in a CSS rule. This feature used open source code from Lea Verou’s cubic-bezier.com. (development notes)

Transform highlighter

There’s a new awesome way to visualize how an element has been transformed from its original position and shape. Hovering over a CSS transform property in the Inspector will show the original position of the element on the page and draw lines mapping the original points to their new positions. (development notes)

Transform highlighter screenshot

Persistent disable cache

You can disable the browser cache while you’re developing by checking Advanced Settings > Disable Cache in the Settings tab. Now this setting will persist the next time you open the devtools. As usual, caching is re-enabled for the tab when you close the tools. (development notes & UserVoice request)

New Commands

New commands have been added to the Developer Toolbar (Shift+F2):

The new inject command lets you easily inject jQuery or other JavaScript libraries into your page. Use inject jQuery, inject underscore, or provide your own url with inject <url>. (development notes)
The highlight command takes a selector and highlights all the nodes on that page that match that selector. (video)(development notes)
The folder command opens a directory in your system’s file explorer. Use folder openprofile to open your Firefox profile directory. (development notes)

Editor preferences

A host of editor preferences are now available in the Settings panel. From here you can change your indentation settings and change editor keybindings to Sublime Text, Vim, or Emacs. (development notes)


A big feature called WebIDE has landed, but is behind a preference for this release while it gets more testing. WebIDE is a tool for in-browser app development. See WebIDE lands in Nightly for more details.

Other features

Edit selectors
Click the selector of any CSS rule in the Inspector to edit it. (development notes)
Black boxed minified sources
JavaScript sources with “min.js” extensions are now automatically black boxed. You can turn this option off in the Debugger settings menu. (development notes)
Custom viewport dimensions
The dimensions in the Responsive Design View are now editable so you can input the exact size you want the content to be. (development notes)

Special thanks to the 33 contributors that added all the features and fixes in this release.

Three of the features from this release came from feedback on the Developer Tools feedback channel, so that’s a great way to suggest features. You can also comment here or shoot feedback to @FirefoxDevTools on Twitter. If you’d like to help out, check out the guide to getting involved.

About Heather Arthur

Firefox developer tools developer at Mozilla, working mainly on the style tools.

More articles by Heather Arthur…

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


  1. Brett Zamir

    Re: Event listeners, nice, nice, nice… Separation of concerns is an easier sell when those concerns can be seamlessly tied and traced back together…

    July 29th, 2014 at 10:07

  2. Orville Bennett

    This is awesome. I remember asking about this one twitter a few months ago, and now this feature has landing. That’s awesome.

    Thank you guys. You rock!


    July 30th, 2014 at 09:23

    1. Robert Nyman [Editor]

      Glad to make you happy!

      July 31st, 2014 at 01:23

  3. Rachel Nabors

    So happy to see the new CSS animation and timing functions editing capabilities in here!

    July 30th, 2014 at 14:17

    1. Robert Nyman [Editor]

      Yes, they are really nice features, we’re glad to have them in!

      July 31st, 2014 at 01:25

  4. Albert

    Great new features! Was waiting for the event listeners and I am looking forward to soon test the keyframe editing and the transform highlighter.
    I am having trouble with the ‘new rule’ on Mac OS, though. I seems only to display the new rule, after I e.g. resize the devtools.

    July 30th, 2014 at 18:37

    1. Robert Nyman [Editor]

      Interesting, thanks for the feedback. Is that behavior consistent every time?

      July 31st, 2014 at 01:29

      1. Albert

        Yeap. I made a quick video. You can view/download it here, but the link works for three days only: https://spideroak.com/storage/OJSXI4TPOZSXE5DJM5XQ/shared/823533-1-1031/dev-tools_new-rule-after-resizing.ogg?24dacb2452803a21f18b7329f02048f7

        July 31st, 2014 at 15:03

        1. Robert Nyman [Editor]

          Hmmm. Yeah, thanks for showing it. That seems to be a bug, please file a bug in Bugzilla. Thanks!

          August 1st, 2014 at 02:33

          1. Albert

            Found an existing bug and added the video


            August 3rd, 2014 at 11:07

          2. Robert Nyman [Editor]

            Perfect, thank you!

            August 4th, 2014 at 01:31

  5. Christian

    Did the 3D website view get removed from Firefox?

    July 30th, 2014 at 22:59

    1. Robert Nyman [Editor]

      No, it’s on the right hand side in Dev Tools. The icon for it looks like a cube.

      July 31st, 2014 at 01:23

    2. Heather Arthur

      You do have to enable it first, however. Go to the settings tab of the devtools, and check off “Available Toolbox Buttons” > “3D View”.

      August 1st, 2014 at 11:02

  6. Noitidart

    The event listener and animation editing is spectacular!

    I think the cubic bezier thing has potential. I have some issues which I badly need cubic bezier help on. I’ve been trying to do:



    I’m trying to start an animation at the 70% point of a cubic-ease. So the 70%-100% curve should be streched to actually be 0 – 100%. Will this be possible with these tools? I badly need it.

    August 1st, 2014 at 15:50

  7. Criação

    That is the reason Firefox is my default browser since its inception!
    Thanks to all hard working developers!

    August 3rd, 2014 at 11:37

    1. Robert Nyman [Editor]

      Good to hear and glad you like it!

      August 4th, 2014 at 01:32

  8. Jeffrey

    About Web IDE: I was late last time so I understandably didn’t get a response. Is their any planned integration with Emscripten C/C++ development?

    August 3rd, 2014 at 12:30

    1. Robert Nyman [Editor]

      Off the top of my head, I don’t know more about that at this time. I’ll check in with the development team, though.

      August 4th, 2014 at 01:33

    2. Dave Camp

      There is no Emscripten integration planned in the short term. For folks with an established C++ environment and workflow, we’d like to extend their existing environments with a way to push to devices and test using WebIDE, but this isn’t planned in the short term.

      August 4th, 2014 at 11:03

      1. Jeffrey

        Well, good to know it’s being thought about, at least. Thanks for letting me know what the project’s plans and priorities are concerning this.

        August 5th, 2014 at 11:11

Comments are closed for this article.