Firefox 31 Beta Full Of New Developer Features
Firefox 31 Beta Full Of New Developer Features
Written by Ian Elliot   
Monday, 16 June 2014

Firefox 31 is now in Mozilla's beta channel and introduces some helpful  features and tools for developing Web content, apps and add-ons. Here we look at what's new for Windows, Mac and Linux in Firefox 31.

Web Designers will be pleased to discover a new Eyedropper tool in the Inspector that lets you pick up the color from any pixel, making it easier to copy colors or manipulate then based on their color value:




The Inspector also now lets you directly edit dimensions in the Box Model panel:



When it comes to editing code, as part of the upgrade to the Codemirror 4 editor, the Style Editor and Scratchpad have gained new features including Sublime Text key-bindings, Rectangle selection, Undo selection and, as shown here, Multiple selection:




The Canvas Debugger that was demoed in March at the San Fransisco Game Developers Conference is in Firefox 31 beta. It’s a tool for debugging animation frames rendered on a Canvas element and is designed to let you view the rendering calls from the perspective of the animation loop itself, giving you a much better overview of what’s happening.

Also in Firefox 31 a new Add-on Debugger feature allows you to to use the developer tools' Debugger feature to add line breaks, step in, out and over execution, and inspect variables and scopes of modules used in an add-on.

Firefox 31: Add-on Debugger Screencast on Vimeo from Jordan Santell .

Acknowledging that Web developers tend to use the console and network monitor heavily as they debug, Mozilla has responded to feedback on how to improve the console experience with the following improvements in Firefox Beta: 

  • Console stack traces: console.error, console.exception, and console.assert logs in the console now include the full stack from where the call was made.
  • Copy as cURL: replay any network request in the Network Monitor  by right-clicking a request and selecting the copy as cURL menu item to copy a cURL command to the clipboard, including arguments for headers and data.
  • Styled console logs: on parity with other browser developer tools, you can now add style to console logging with the %c directive.

Two improvements flagged as HTML5 are that CSS variables have been implemented and WebVTT, a format for displaying timed text tracks such as video subtitles, has been implemented and enabled.

The Release Notes also list these Developer enhancements: 

  • navigator.sendBeacon enabled by default
  • New Array built-in: Array.prototype.fill() 
  • New Object built-in: Object.setPrototypeOf()
  • CSP 1.1 nonce-source and hash-source enabled by default.
  • Dialogs spawned from the onbeforeunload event no longer block access to the rest of the browser.

Mozilla is keen for devs to test out the beta features and provide feedback using the Firefox Developer Tools ideas channel. 



More Information

Mozilla Future Releases blog

Firefox 31 Beta Release Notes

Related Articles

The Firefox 29 Advantage

Mozilla Developer Network Redesign


To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.


Firefox 40 For Windows 10 & For Devs - Update

One feature of the recently released Firefox 40, which was supposed to make Firefox easier to install and use on Windows 10, didn't work. Mozilla has now released Firefox 40.0.2, that fixes the proble [ ... ]

Cloud Apps Best For Revenue

The latest State of the Developer Nation report has revealed that more than half of mobile developers and an even higher proportion of those developing IoT are making an income below the app pove [ ... ]

More News

blog comments powered by Disqus


Last Updated ( Wednesday, 18 June 2014 )

RSS feed of news items only
I Programmer News
Copyright © 2015 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.