Firefox 73 was released just two days ago, and In a recent article, Chris Mills, Mozilla’s senior technology writer, shared the highlights of this update for developers, let’s take a look at this:
Web platform language features
The latest version of Firefox provides a number of improvements to the web platform. The first is the addition of CSS logical properties, including overscroll-act-block and overscroll-act-inline. These new properties provide a logical alternative to overscroll-acts-x and overscroll-s-y, which give developers more control over browser behavior, especially when the boundaries of the scroll ingress zone.
In addition, the yearName and relatedYear fields can now be used in the DateTimeFormat.prototype.formatToParts() method. The CJK (Chinese, Japanese, Korean) calendar benefits from enabling some formatting options.
The HTMLFormElement interface also has a new method, requestSubmit(). Unlike the old commit() method, requestSubmit() behaves like clicking the specified submit button, not just sending form data to the recipient. This triggers a commit event and checks the validity of the form before the actual data is submitted. At the same time, the old method is still available.
This release also brings some DevTools updates. Chris says they often survey DevTools users through @FirefoxDevTools Twitter accounts, resulting in a number of useful updates. For example, based on one of the feedbacks, you can now copy clearer CSS snippets from the Inspector’s Changes panel, and the s and — numbers in the output are no longer part of the copy text.
Stable and fast
This version of DevTools focuses on improving performance. The process of collecting quick start requests in the Network panel becomes easier, making the UI more flexible. Similarly, large source mapping scripts now load faster in The Meurer and reduce the burden on the console.
When you open DevTools on a load page, loading the correct source code in the debugger is not so easy. Because in practice, modern browsers are very good at erasing raw files when they are parsed, rendered, or executed, or even no longer needed. Firefox 73 makes script loading more reliable and ensures that developers get the right files for debugging.
Previously, CORS network errors were simply shown as warnings, so they were easily ignored when resources could not be loaded. They are now correctly reported as errors rather than warnings, giving them the visibility they deserve.
In addition, the variables declared in the expression will now be included in auto-completion. This change makes it easier to author longer clips in a multi-line editor. DevTools settings for automaticclosing brackets can now also be used in the console, bringing developers closer to the experience of authoring in the IDE.
Also, did you know that console logs can be styled in the background? For more diversity, you can use data-uris to add images. This feature is now available in Firefox, and Chris gives an example of this in one of the Fetch examples:
console.log(‘There has been a problem with your fetch operation: %c’ +e.message, ‘color: red; padding: 2px 2px 2px 20px; background: yellow 3px no-repeaturl(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAApUlEQVQoz5WSwQ3DIBAE50wEEkWkABdBT+bhNqwoldBHJF58kzryIp+zgwiK5JX2w+2xdwugMMZ4IAIZeCszELX2hYhcgQIkEQnOOe+c8yISgAQU1Rw3F2BdlmWig56tQNmdIpA68Qbcu6akWrJat7gp27EDkCdgttY+uoaX8oBq5gsDiMgToNY6Kv+OZIzxfZT7SP+W3oZLj2JtHUaxnnu4s1/jA4NbNZ3AI9YEAAAAAElFTkSuQmCC);’);
The following results are obtained:
Finally, in the section of the console, when you perform a text or regular expression search in the console, you can search by adding “-” (that is, the return result does not include the term) before the search term.
Improvements to the WebSocket Inspector
The WebSocket inspector from Firefox 71 now prints messages in WAMP format well (in JSON, MsgPack, and CBOR formats). Inspector can now also indicate when to close the WebSocket connection.