What's New In DevTools (Microsoft Edge 92)

The following sections list the announcements from the Microsoft Edge DevTools team. To try new features in the DevTools, Microsoft Visual Studio Code extensions, and more, review the announcements. To stay up to date with the latest and greatest features in your developer tools, download the Microsoft Edge preview channels and follow the Microsoft Edge DevTools team on Twitter.

Tip

The Microsoft Build 2021 conference was on May 25-27. Here's a video from Build about the updates to DevTools: Microsoft Edge | State of the Platform - Microsoft Edge brings a compelling and consistent platform with tools for developers. As our legacy browsers phase out of support, Edge will soon be the only supported browser from Microsoft on Windows 10. Join us to learn about the latest across the Edge platform, tools, and web apps.

The Close button is no longer hidden when DevTools is narrow

In Microsoft Edge version 91 or earlier, the Close button to close DevTools isn't displayed when the DevTools viewport is narrow. In Microsoft Edge version 92, the Close button in the DevTools is always present, regardless of the DevTools viewport width.

The Close DevTools button is now present even when the viewport is narrow

Add tools quickly with the new More Tools button

There's a new way to open more tools in Microsoft Edge DevTools: the More Tools (+) menu. The More Tools menu appears on the toolbar in the main panel and on the toolbar of the drawer. Selecting a tool from the More Tools menu adds the tool to the toolbar.

To reorder the tabs on either toolbar, select and drag the tabs.

The More Tools menu was available as an experiment in Microsoft Edge version 89, and is now always present.

The More Tools button on the upper toolbar and drawer toolbar

The More Tools menu

Improvements for hovering, selecting, and closing tools

Tabs for each tool have been reformatted to reduce the chance of accidentally closing a tool. On each tab in the main toolbar and in the toolbar of the drawer, we added:

  • Spacing around the tab.
  • Spacing around the close (x) button in the tab.
  • A background color when hovering over the tab.
  • A tooltip for the close (x) button of the tab.
  • Higher contrast for the close (x) button of the tab.

For example, when you are in the Performance tool and you hover over the Network tool's tab, these improvements help prevent accidentally closing the Network tool.

These improvements are especially relevant for users of localized DevTools, in which the tabs may be narrower and easier to accidentally close.

Localized DevTools with narrow tabs

We also made it easier to re-add a tool that you closed by adding a More Tools menu to the main toolbar and drawer toolbar.

Better support for screen readers in the Console

Prior to Microsoft Edge version 92, in the Console, assistive technologies such as screen readers didn't announce autocomplete suggestions or the results of evaluated expressions. This has been fixed now.

Microsoft Edge Developer Tools for Visual Studio Code version 1.1.8

The Microsoft Edge Developer Tools for Visual Studio Code extension version 1.1.8 for Microsoft Visual Studio Code has the following changes since the previous release. Microsoft Visual Studio Code updates extensions automatically. To manually update to version 1.1.8, navigate to Update an extension manually.

You can file issues and contribute to the extension on the vscode-edge-devtools GitHub repo.

In-context documentation and UI to make it easier to use the DevTools extension

Version 1.1.8 of the Microsoft Edge Developer Tools for Visual Studio Code extension now features a simpler way to start a new instance of Microsoft Edge, by presenting instructions, buttons, links, and a documentation page to guide you.

  • When you select the Microsoft Edge Tools button in the Activity Bar of Visual Studio Code, the Microsoft Edge Tools: Targets panel now presents explanatory text, buttons, and links to guide you, instead of a blank panel.

  • When you open a new instance of Microsoft Edge from within Visual Studio Code, Microsoft Edge now shows a start page that explains how to use the Developer Tools extension, instead of a blank page.

  • The Microsoft Edge Tools: Targets panel now has a Generate launch.json button and instructions, to help launch your project for debugging in Microsoft Edge.

For more information, navigate to Using the tools.

Download the Microsoft Edge preview channels

If you are on Windows, Linux, or macOS, consider using the Microsoft Edge preview channels as your default development browser. The preview channels give you access to the latest DevTools features.

Getting in touch with Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.