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:

 

ff31eyedropper

 

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

ff31boxmodel

 

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:

 

 ff31betaed

 

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.

Banner


Firefox OS Comes To Raspberry Pi
28/10/2014

Firefox OS hasn't taken over the world yet despite its promise. Now we have a small effort from Mozilla to make it run on one of the most successful budget devices in the world - the Raspberry Pi.



IE Remote Runs On Anything
05/11/2014

This is another strange and difficult to interpret announcement. Microsoft is making the latest IE available as a Remote App hosted on Azure. This makes it possible for you to test your website/app in [ ... ]


More News

blog comments powered by Disqus

 

Last Updated ( Wednesday, 18 June 2014 )
 
 

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