Dev News: New Microsoft Edge Tools and Goodbye Node.js 16

Microsoft’s web development team announced a number of changes that should make Edge faster while improving the developer experience, according to a presentation at Microsoft Build conference on Wednesday.

The updates include:

• A built-in JSON Viewer is currently an experimental feature in Edge 114. Activating this feature will cause any URL that returns a JSON resource to load directly into the browser in the JSON viewer.
• Microsoft Edge Dev Tools, which are built into the browser. “It’s a set of tools that appear next to the rendered webpage in the browser, and provide a powerful way to inspect and debug web pages and web apps,” Zohar Ghadyali, program manager on the Microsoft Edge Dev Tools team, said. “As a non-exhaustive list, you can use the dev tools to inspect, tweak and change the styles of elements in the web page using live tools with a visual interface, inspect network traffic and see the location of problems like resources that fail to load and debug your JavaScript using breakpoint debugging and with a live console.” In all, there are 33 tools.
• Focus Mode. To help manage the visual overhead of the 33 tools, the browser also offers Focus Mode, wherein the top bar is customizable to hold a developer’s primary tools and the bottom bar contains the rest. “In addition to moving the doc location of dev tools, you can also customize the positioning of the activity bar,” Ghadyali said. “If you like the older Dev Tools UI and you like the horizontal toolbar, you can leave the activity bar in this orientation. However, if you like the way VS code is organized, instead, you can move the activity bar to a vertical orientation.” Focus Mode also incorporates a quick view function that allows the developer to look at two tools simultaneously.

There are also new features in dev tools to improve performance and add context to things such as enhanced traces, including .devtools file, which is the new file format for enhanced traces from Microsoft Edge.

“The key benefits of enhanced traces are that even if server-side changes are made, you’re preserving the state of your source code and the state of your webpage,” Ghadyali said. “This means you can package and share self-contained Dev Tools instances when collaborating with your teammates or co-workers.”

This solves the “it doesn’t work for me” problem. Instead of getting a rogue console error and then trying to show a colleague how you triggered that state, you can instead export and enhance trace and share the dot Dev Tools file with them, and the state will be preserved, Ghadyali explained.

Another new feature is the “select your stats” feature in the performance tools, which is designed to help developers understand what is happening during long-running recalculate style events in the performance tool.

There’s also support for faster debugging using source maps, which map from the transformed source to the original source, allowing the browser to reconstruct the original source and present the reconstructed original in a debugger.

Edge also has a new experimental crash analyzer tool.

“With the crash Analyzer tool, you can input a JavaScript stack trace, like those that you get for non-fatal JavaScript exceptions, and have your source maps applied to the salary so that you can debug faster,” said Rob Paveza, a principal software engineering manager at Microsoft.

Paveza also shared with the audience anti-patterns that can slow web performance.

Vercel to Deprecate Node.js 16

Bad news for those who don’t want to upgrade: Vercel is deprecating Node.js 16, beginning Aug. 15, 2023. Node.js 16 will reach official end of life on Sept. 11, 2023. Node.js 14 reached official end of life on April 30, 2023.

“On Aug. 15, 2023, Node.js 14 and 16 will be disabled in the Project Settings and existing Projects that have Node.js 14 and 16 selected will render an error whenever a new Deployment is created,” Vercel noted in its announcement. “The same error will show if the Node.js version was configured in the source code.

It added that while existing deployments with Serverless Functions will not be affected, developers should upgrade to Node.js 18 in order to receive security updates.

Microsoft’s TypeScript 5.1 RC Available

Microsoft’s Daniel Rosenwasser, senior program manager of TypeScript, published a detailed look at what’s new in its TypeScript 5.1 release candidate since the beta. Among the changes for developers are:

• Corrected behavior for init hooks in decorators
• Changes to emit behavior under isolatedModules, ensuring that script files are not rewritten to modules
• New refactoring support for moving declarations to existing files

The post also reviews all the changes that 5.1 incorporates now, and Rosenwasser noted that they anticipate very few additional changes before the stable version of TypeScript 5.1 in a few weeks. In fact, the team already recently published the TypeScript 5.2 iteration plan, which will incorporate decorator metadata. Support for decorators is expected to be available in the next JavaScript release.