Edit

Share via

What's New in DevTools (Microsoft Edge 116)

These are the latest features in the Stable release of Microsoft Edge DevTools.

New "Move Activity Bar" button directly on the Activity Bar

In Focus Mode, you now can quickly move the Activity Bar with a single mouse-click. In the upper left of DevTools, next to the Inspect button and Device Emulation button, there's now a Move Activity Bar to left or Move Activity Bar to top button:

The 'Move Activity Bar to left' button directly on the Activity Bar

The 'Move Activity Bar to top' button directly on the Activity Bar

For example, by default, the Activity Bar is horizontal, but you can change it to vertical by simply clicking the new Move Activity Bar to left button in the Activity Bar, instead of having to go into the DevTools Settings (...) menu.

See also:

React Developer Tools extension retains state of tools

Prior to Microsoft Edge 116, if you were in Focus Mode while using the React Developer Tools extension, the state of a tool in DevTools wasn't maintained when you switched to another tool and then switched back. This issue has been fixed.

See also:

"Containment Diff" view in Memory tool when multiple heap snapshots

In the Memory tool, when there's more than one heap snapshot, a Containment Diff view is now available in the Perspective dropdown menu in the upper left of the Memory tool:

The Containment Diff view in the Memory tool

The Containment Diff view shows only the new objects, deleted objects, or objects in the retaining chain that will eventually lead to either a new or deleted node. The dot symbol • means that it's a node in the retaining chain. Expanding the view displays the node that's new or deleted.

For example:

  1. Open the example webpage Example 9: DOM leaks bigger than expected in a new window or tab.

  2. Right-click the webpage and then select Inspect. DevTools opens.

  3. In the Activity Bar, select the Memory tool.

  4. Click the Take heap snapshot button, in the upper left. Snapshot 1 is listed in the Profiles section.

  5. In the rendered example webpage, click the Create tree button.

  6. In the Memory tool, click the Take heap snapshot button again. Snapshot 2 is added in the Profiles section.

  7. In the Perspective dropdown menu, instead of Summary, select Containment Diff.

  8. In the Object column, expand an entry.

See also:

Announcements from the Chromium project

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

See also