Firefox 71 released with new developer tools features

Yesterday, the Firefox team announced its latest version, Firefox 71. This version includes a plethora of new developer tools features such as web socket message inspector, console multi-line editor mode, log on events, and network panel full-text search. Many of these features were first made available in the Firefox Developer Edition and later improved based on the feedback.

Other highlights in Firefox 71 includes new web platform features such as CSS subgrid, column-span, Promise.allSettled, and the Media Session API.

What’s new in Firefox 71?

Improvements in speed and reliability

In Firefox 71, the team took some help from the JavaScript team by improving the caching of scripts during a startup. This made both Firefox and DevTools start faster. “One Console test got an astonishing 40% improvement while times across every panel were boosted by 8-15%”, the official blog post mentions.

Also, the links to scripts, for example, from the event handler tooltip in the Inspector or the stack traces in the Console, reliably gets you to the expected line and debugging sources loaded through eval() now also works as expected.

WebSocket Message Inspector

In Firefox 71, the Network panel has a new Messages tab. You can observe all messages sent and received through a WebSocket connection:

Source: Mozilla Hacks

Sent frames have a green up-arrow icon, while received frames have a red down-arrow icon. You can click on an individual frame to view its formatted data.

Know more about WebSocket Message Inspector on the official post.

Console multi-line editor mode

Another developer tools feature in Firefox 71 is the new multi-line console. It combines the benefits of IDEs to authoring code with the workflow of repeatedly executing code in the context of the page.

If you open the regular console, you’ll see a new icon at the end of the prompt row.

Source: Mozilla Hacks

Clicking this will switch the console to multi-line mode:

Source: Mozilla Hacks

Here you can enter multiple lines of code, pressing enter after each one, and then run the code using Ctrl + Enter. You can also move between statements using the next and previous arrows. The editor includes regular IDE features you’d expect, such as open/close bracket pair highlighting and automatic indentation.

Inline variable preview in Debugger

The JavaScript Debugger now provides inline variable previewing, which is a useful timesaver when stepping through your code. In previous versions, you had to scroll through the scope panel to find variable values or hover over a variable in the source pane. In the current version, when execution pauses, you can view relevant variable and property values directly in the source.

Source: Mozilla Hacks

Using the babel-powered source mapping, preview also works for variables that have been renamed or minified by build steps. Make sure to enable this power-feature by checking Map in the Scopes pane.

Log on Event Listeners

There have been a few updates in the event listener breakpoints in Firefox 71. A few improvements include, log on events lets you explore which event handlers are being fired in which order without the need for pausing and stepping.

Hence, if we choose to log keyboard events, for example, the code no longer pauses as each event is fired:

Source: Mozilla Hacks

Instead, we can then switch to the console, and whenever we press a key we are given a log of where related events were fired.

CSS improvements

In Firefox 71, the new CSS includes subgrid, multicol, clip-path: path, and aspect ratio mapping.

Subgrid

A feature that has been enabled in 71 after being supported behind a pref for a while, the subgrid value of grid-template-columns and grid-template-rows allows you to create a nested grid inside a grid item that will use the main grid’s tracks. This means that grid items inside the subgrid will line up with the parent’s grid tracks, making various layout techniques much easier.

Multicol — column-span

CSS multicol support has moved forward in a big way with the inclusion of the column-span property in Firefox 71. This allows you to make an element span across all the columns in a multicol container (generated using column-width or column-count).

Clip-path: path()

The path() value of the clip-path property is now enabled by default — this allows you to create a custom mask shape using a path() function, as opposed to a predefined shape like a circle or ellipse.

Aspect ratio mapping

Finally, the height and width HTML attributes on the <img> element are now mapped to an internal aspect-ratio property.

This allows the browser to calculate the image’s aspect ratio early on and correct its display size before it has loaded if CSS has been applied that causes problems with the display size.

There are also a few minor JavaScript changes in this release including, Promise.allSettled(), the Media Session API, and WebGL multiview.

A lot of users are excited about this release and are looking forward to trying it out.

https://twitter.com/IshSookun/status/1201897724943036417

https://twitter.com/awhite/status/1202163413021077504

To know more about this news in detail, read Firefox 71 official announcement.

The new WebSocket Inspector will be released in Firefox 71

Firefox 70 released with better security, CSS, and JavaScript improvements

Google and Mozilla to remove Extended Validation indicators in Chrome 77 and Firefox 70