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


JConference January 2024 Sessions Now Online
23/02/2024

The talks presented at the 4th JChampions Conference which took place between Jan 25 to Jan 30, are now available for free on YouTube. Topics ranged from Code and Tech to Career Advice.



WasmCon 2023 Sessions Now Online
01/03/2024

The recorded session of the premier conference for technical developers and users interested in exploring the potential of WebAssembly are now online.


More News

raspberry pi books

 

Comments




or email your comment to: comments@i-programmer.info

 

Last Updated ( Wednesday, 18 June 2014 )