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 (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.


Comments are now closed.

  1. Brett Zamir wrote on July 29th, 2014 at 10:07:

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

  2. Orville Bennett wrote on July 30th, 2014 at 09:23:

    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!

    1. Robert Nyman [Editor] wrote on July 31st, 2014 at 01:23:

      Glad to make you happy!

  3. Rachel Nabors wrote on July 30th, 2014 at 14:17:

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

    1. Robert Nyman [Editor] wrote on July 31st, 2014 at 01:25:

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

  4. Albert wrote on July 30th, 2014 at 18:37:

    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.

    1. Robert Nyman [Editor] wrote on July 31st, 2014 at 01:29:

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

      1. Albert wrote on July 31st, 2014 at 15:03:

        Yeap. I made a quick video. You can view/download it here, but the link works for three days only:

        1. Robert Nyman [Editor] wrote on August 1st, 2014 at 02:33:

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

          1. Albert wrote on August 3rd, 2014 at 11:07:

            Found an existing bug and added the video


          2. Robert Nyman [Editor] wrote on August 4th, 2014 at 01:31:

            Perfect, thank you!

  5. Christian wrote on July 30th, 2014 at 22:59:

    Did the 3D website view get removed from Firefox?

    1. Robert Nyman [Editor] wrote on July 31st, 2014 at 01:23:

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

    2. Heather Arthur wrote on August 1st, 2014 at 11:02:

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

  6. Noitidart wrote on August 1st, 2014 at 15:50:

    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.

  7. Criação wrote on August 3rd, 2014 at 11:37:

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

    1. Robert Nyman [Editor] wrote on August 4th, 2014 at 01:32:

      Good to hear and glad you like it!

  8. Jeffrey wrote on August 3rd, 2014 at 12:30:

    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?

    1. Robert Nyman [Editor] wrote on August 4th, 2014 at 01:33:

      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.

    2. Dave Camp wrote on August 4th, 2014 at 11:03:

      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.

      1. Jeffrey wrote on August 5th, 2014 at 11:11:

        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.

Comments are closed for this article.