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. 

Comments

Make a Comment or View Existing Comments Using Disqus

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