Skip to content

Instantly share code, notes, and snippets.

@jryans
Last active August 29, 2015 14:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jryans/1549e94d3c83a56a6f89 to your computer and use it in GitHub Desktop.
Save jryans/1549e94d3c83a56a6f89 to your computer and use it in GitHub Desktop.
Drag Elements, Console History, and more – Firefox Developer Edition 39

Quite a few big new features, improvements, and bug fixes made their way into Firefox Developer Edition 39. Update your Firefox Developer Edition, or Nightly builds to try them out!

Inspector

The Inspector now allows you to move elements around via drag and drop. Click and hold on an element and then drag it to where you want it to go. This feature was added by contributor Mahdi Dibaiee.

Drag and Drop

Back in Firefox 33, a tooltip was added to the rule view to allow editing curves for cubic bezier CSS animations. In Developer Edition 39, we've greatly enhanced the tooltip's UX by adding various standard curves you can try right away, as well as cleaned up the overall appearance. This was added by new contributor John Giannakos.

Cubic Bezier Tooltip

The CSS animations panel we debuted in Developer Edition 37 now includes a time machine. You can rewind, fast forward, and set the current time of your animations.

Animation Time Machine

Console

Previously, when the DevTools closed, your past Console history was lost. Now, Console history is persisted across sessions. The recent commands you've entered will remain accessible in the next toolbox you open, whether it's in another tab or after restarting Firefox. Additionally, we added a clearHistory console command to reset the stored list of commands.

The shorthand $_ has been added as alias for the last result evaluated in the Console. If you evaluated an expression without storing the result to a variable (for example), you can use this as a quick way to grab the last result.

We now format pseudo-array like object as if they were arrays in the Console output. This makes them easier to reason about and inspect, just like a real array. This was added by contributor Johan K. Jensen.

Pseudo Array Output

WebIDE and Mobile

WiFi debugging for Firefox OS has landed. WiFi debugging allows WebIDE to connect to your Firefox OS device via your local WiFi network instead of a USB cable. We'll discuss this feature in more detail in a future post.

WebIDE gained support for Cordova based projects. If you're working on a mobile app project using Cordova, WebIDE now knows how to build the project for devices it supports without any extra configuration.

Other Changes

  • Attribute changes only flash the changed attribute in the Markup View, instead of the whole element
  • Canvas Debugger now supports setTimeout for animations
  • Inline box model highlighting
  • Browser Toolbox can now be opened from a shortcut: Cmd-Opt-Shit-I / Ctrl-Alt-Shift-I
  • Network Monitor now shows the remote server's IP address and port
  • When an element's highlighted in the Inspector, you can now use the left/right arrow keys to move the highlighter to its parent/child

For an even more complete list, check out all 200 bugs resolved during the Firefox 39 development cycle.

Thanks to all the new developers who made their first DevTools contribution this release:

  • Anush
  • Brandon Max
  • Geoffroy Planquart
  • Johan K. Jensen
  • John Giannakos
  • Mahdi Dibaiee
  • Nounours Heureux
  • Wickie Lee
  • Willian Gustavo Veiga

Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here, add/vote for ideas on UserVoice or get in touch with the team at @FirefoxDevTools on Twitter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment