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.

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 cleaning up the overall appearance. This enhancement was added by new contributor John Giannakos.

cubic

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.

Console

Previously, when the DevTools console 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’ve added a clearHistory console command to reset the stored list of commands.

The shorthand $_ has been added as an 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 objects as if they were arrays in the Console output. This makes a pseudo-array-like object easier to reason about and inspect, just like a real array. This feature was added by contributor Johan K. Jensen.

pseudo-array

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-Shift-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 arrow keys to highlight the current element’s parent (left key), or its first child, or its next sibling if it has no children, or the next node in the tree if it has no siblings (right key). This is especially useful when an element and its parent occupy the same space on the screen, making it difficult to select one of them using only the mouse.

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.

About J. Ryan Stinnett

Staff Engineer working on Firefox DevTools at Mozilla.

More articles by J. Ryan Stinnett…


5 comments

  1. Alex

    As usual, more new added functionalities in Firefox for a nicer web development experiment more productive. Thanks for that !

    April 15th, 2015 at 01:46

  2. Ivan

    One thing that is really boring is when you paste many lines on console input text and appears no horizontal scroollbars.

    I have to edit the text on Notepad++ and past over and over again.

    April 16th, 2015 at 05:21

  3. Andris

    Shurely you ment `Cmd-Opt-Shift-I` not `Cmd-Opt-Shit-I`

    April 28th, 2015 at 05:23

    1. J. Ryan Stinnett

      Indeed, I have fixed it now. Thanks!

      April 29th, 2015 at 09:04

  4. Mervas Dayi

    When I inspect some Object in the console. There opens a panel with object properties. And there is no close button to close this panel, It is a good thing that I can see properties, but will be better if I could close it.

    May 9th, 2015 at 08:13

Comments are closed for this article.