Edit

What's New in DevTools (Microsoft Edge 123)

  • Article

To check out the latest features of Microsoft Edge DevTools and the Microsoft Edge DevTools extension for Microsoft Visual Studio Code and Visual Studio, read these announcements.

To stay up to date and get the latest DevTools features, download an Insiders preview version of Microsoft Edge. Whether you're on Windows, Linux, or macOS, consider using Canary (or another preview channel) as your default development browser. The Beta, Dev, and Canary versions of Microsoft Edge run as separate apps, side-by-side with the stable, released version of Microsoft Edge. See Microsoft Edge Insider Channels.

For the latest announcements, follow the Microsoft Edge team on Twitter. To report a problem with DevTools or ask for a new feature, file an issue in the MicrosoftEdge/DevTools repo.

Memory tool reports backing store sizes as part of an object's shallow size

Microsoft Edge 123 adds a new experiment called In heap snapshots, treat backing store size as part of the containing object. If you enable this experiment, the Memory tool reports shallow sizes in a way that more closely matches JavaScript behavior. By enabling this experiment, containers and their contents can now be represented as a single item, such as:

  • An Object and its properties.
  • An Array and its contents.
  • A Map and its contents.
  • A Set and its contents.

For example, to find the largest arrays, you can sort Array​ instances by shallow size, as shown below.

Default behavior for heap snapshots: Heap snapshot default behavior

Heap snapshots with the new experiment enabled: Heap snapshot with experiment enabled

This experiment is helpful because heap snapshots in the Memory tool show a complete list of everything allocated in the V8 and Blink heaps. Sometimes that list is a little too fine-grained, breaking out an item as if it is multiple items. For example, the list in the heap snapshot represents each JavaScript Array instance separately from the contents of that Array, which are called (object elements)[]. However, in JavaScript code, an Array is a single entity, rather than an array instance and separate contents of the array.

See also:

Crash analyzer tool is available by default

The Crash analyzer tool is now available by default, and is no longer an experiment that needs to be enabled. To open the Crash analyzer tool, in the Activity Bar, click the More tools (+) menu, and then select Crash analyzer.

The Crash analyzer tool helps you create a JavaScript stack trace, and applies your sourcemaps to the stack trace so that you can debug faster:

The Crash analyzer tool

Command Palette experimental feature has been removed

The Command Palette experimental feature has been removed from Microsoft Edge, starting with version 123.

See also:

Undocked DevTools window is kept focused as the topmost window while inspecting a page

When DevTools was undocked into its own separate window, and you selected a webpage element to inspect, the DevTools window lost focus and was obscured by the webpage being analyzed. This bug has been resolved, and the DevTools window stays in focus as the topmost window.

See also:

Announcements from the Chromium project

Microsoft Edge 123 also includes the following updates from the Chromium project: