What's New in DevTools (Microsoft Edge 121)

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

Z-index and DOM tabs in 3D View tool are now working

In recent versions of Microsoft Edge, there was a bug in the 3D View tool that caused the Z-index and DOM tabs to not work correctly. The tabs would crash or freeze and show the content for the Composited Layers tab instead. This issue has been fixed in Microsoft Edge 121:

See also:

• Navigate webpage layers, z-index, and DOM using the 3D View tool

Correct Hide debugger or Show debugger icon is shown in Sources tool

The icon used to collapse or expand the Debugger pane on the right in the Sources tool was incorrect. The Hide debugger icon was displayed instead of the Show debugger icon, and vice versa:

In Microsoft Edge 121, the correct icon is now shown:

See also:

• Sources tool overview

Added source map support in the Coverage tool

Before Microsoft Edge 121, the Coverage tool only displayed information for generated files, and omitted source files even when a source map was attached. The Coverage tool has now been improved so that when a generated file has a source map attached, the Coverage tool displays information for the source file as well as for the generated file.

For example, before Microsoft Edge 121, the coverage report for the Slow Calendar demo page contained only a single, static line, for the bundle.js file. The bundle.js line in the coverage report can now be expanded to show all of the original source files that make up this compiled bundle.js file:

See also:

• Find unused JavaScript and CSS code with the Coverage tool

Advanced filtering capabilities in the Bottom-Up, Call Tree, and Event Log tabs in the Performance tool

In the Performance tool, the following advanced filtering buttons were added to the Bottom-Up, Call Tree, and Event Log tabs:

• Match Case.
• Use Regular Expression.
• Match whole word.

Also, in the Bottom-Up tab, the filter has been updated to now only apply to the top-level items, instead of matching every node.

See also:

• Introduction to the Performance tool

Tooling for PWA Window Controls Overlay

The Application tool has a new Window Controls Overlay section under Manifest, to help PWA developers see a preview of how their application handles window controls, without having to install the PWA and make the styling changes that are necessary to accommodate window controls:

Use the Window Controls Overlay section to emulate window controls for Windows, Linux, and macOS.

See also:

• Simulate the Window Controls Overlay API without installing your PWA
• Display content in the title bar area using Window Controls Overlay
• Application tool, to manage storage

Announcements from the Chromium project

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

• Elements improvements
  • @font-palette-values support
  • Supported case: Custom property as a fallback of another custom property
• Improved source map support
• Performance panel improvements
  • Enhanced Interactions track
  • Advanced filtering in Bottom-Up, Call Tree, and Event Log tabs
• Indentation markers in the Sources panel
• Helpful tooltips for overridden headers and content in the Network panel
• New Command Menu options for adding and removing request blocking patterns
• The CSP violations experiment is removed
• Accessibility

See also

• What's New in Microsoft Edge DevTools
• Release notes for Microsoft Edge web platform