Firefox Developer Edition 54 has been released with improvements to CSS handling and the debugger, along with support for Network Monitor.

Firefox Developer Edition was first made available as a separate edition back in 2014, when it was described as:

"giving developers the whole browser as a hard-hat area, allowing Mozilla to bring front and center the features most relevant to developers."

Firefox Developer Edition is designed to solve the problem of having to switch development environments by creating a focal point to streamline your development workflow. It combines a developer browser that is an authoring tool with extra features to simplify the process of building apps for the Web, whether targeting mobile or desktop across many different platforms.

Alongside the browser, you get tools including Valence. This was originally called Firefox Tools Adapter, and it lets you connect the Firefox dev tools to other major browser engines. There's also WebIDE, which lets you develop, deploy and debug Web apps directly in your browser, or on a Firefox OS device. It lets you create a new Firefox OS app (which is just a web app) from a template, or open up the code of an existing app. 

The Inspector in the new release now supports CSS color level 4, which means that new color syntax like hsl(120deg 100% 50%) is recognized in the CSS Rules panel. The Inspector has also been made faster and more reliable. For example, the DOM tree now initializes with the DOMContentLoaded event.

Asynchronous Panning and Zooming, the technology behind Firefox's scrolling of long pages, is now used by the Inspector so that overlays that the inspector displays on web pages such as the box-model or the CSS grid lines scroll smoothly with the page.

Firefox Developer Edition's debugger front-end is another area to have been improved, starting with the ability to add watch expressions in the right sidebar, which will be evaluated when you pause. Various elements of the UI state are now saved between sessions, including opened tabs, whether the sidebar is collapsed, the selected source, and whether you want to pause on exceptions, all designed to make it easier to start debugging again.

Elsewhere in the debugger, the code search has been improved: outlines are shown around matches, the total number of results is displayed in the search bar, and a new function search option has been added.

The inclusion of Network Monitor in the revamped toolkit comes from the work that's been done by the developers in migrating the tools from XUL markup and Firefox-only JavaScript to standard HTML, CSS and JavaScript. The inclusion of Network Monitor should make it easier to work on the panel for developers with HTML, CSS, and React experience.

Other improvements see the move of the JSON Viewer from the Developer Edition channel to all channels, which means that even users of standard Firefox should find JSON responses in tabs easier to read and explore.

A final improvement is a new Web Extensions API for DevTools. WebExtensions are Firefox’s new way to write extensions for the browser that are compatible to a large extent with Google Chrome and Opera. The support for DevTools-related WebExtensions APIs, means that Chrome DevTools extensions should now work with Firefox. 

More Information

Firefox Developer Site

Related Articles

Firefox 42 Developer Edition 

Firefox 40 For Windows 10 & For Devs

React Devtools Beta

Firefox To Adopt Chrome Extensions

Is Windows 10 Playing Fair - Mozilla Thinks Not

Firefox Gets A Walled Garden

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

Comments

Make a Comment or View Existing Comments Using Disqus

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