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
Keep in mind the events pane in the Debugger as well, which lists all the event listeners on the page
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)
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)
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)
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)
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)
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 have been added to the Developer Toolbar (Shift+F2):
- The new
inject underscore, or provide your own url with
inject <url>. (development notes)
highlightcommand takes a selector and highlights all the nodes on that page that match that selector. (video)(development notes)
foldercommand opens a directory in your system’s file explorer. Use
folder openprofileto open your Firefox profile directory. (development notes)
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.
- Edit selectors
- Click the selector of any CSS rule in the Inspector to edit it. (development notes)
- Black boxed minified sources
- 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.