What's New In DevTools (Microsoft Edge 89)

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.

What's New is now Welcome

The What's New tool in the Microsoft Edge DevTools now has a new appearance and a new name: Welcome. The Welcome tool still displays the latest DevTools news and updates. It now also includes links to Microsoft Edge DevTools documentation, ways to submit feedback, and more. To display the Welcome tool after each update to Microsoft Edge, choose the checkbox next to Open tab after each update under the title. To close the Welcome tool, choose the X on the right-side of the tab title. If you prefer the original What's New tool, navigate to Settings > Experiments and remove the checkbox next to Enable Welcome tab.

The Welcome tool is highlighted

Visual Font Editor in the Styles pane

When you work with fonts in CSS, use the new visual Font Editor. You may define fallback fonts, and use sliders to define font weight, size, line-height, and spacing. The Font Editor helps you complete the following actions.

  • Switch between units for different font properties
  • Switch between keywords for different font properties
  • Convert units
  • Generate accurate CSS code

To turn on this experiment, navigate to Settings > Experiments and choose the checkbox next to Enable new Font Editor tools within Styles pane. For more information, navigate to Edit CSS font styles and settings in the Styles pane in DevTools. To review the history of this feature in the Chromium open-source project, navigate to Issue 1093229.

The visual Font editor is highlighted in the Styles pane

CSS Flexbox debugging tools

Flexbox debugging features are in active development. To turn on the experiment for the following two features, navigate to Settings > Experiments and choose the checkbox next to Enable new CSS Flexbox debugging features. To review the history of this feature in the Chromium open-source project, navigate to Issues 1136394 and 1139949.

New Flexbox (flex) icon helps identify and display flex containers

In the Elements tool, the new Flexbox (flex) icon helps you identify Flexbox containers in your code. Choose the Flexbox (flex) icon to turn on or off the overlay effect that outlines a Flexbox container. You may customize the color of the overlay in the Layout pane, which is located next to Styles and Computed.

To turn on and off the overlay effect that outlines the Flexbox container, choose the Flexbox (flex) icon.

You may customize the color of the overlay in the Layout pane next to Styles and Computed.

Display alignment icons and visual guides when Flexbox layouts change using CSS properties

When you edit CSS for your Flexbox layout, CSS autocompletes in the Styles pane now displays helpful icons next to relevant Flexbox properties. To try this new feature, open the Elements tool and select a flex container. Then add or change a property on that container in the Styles pane.

The autocomplete menu now displays icons that indicate the effect of alignment properties such as align-content and align-items.

Additionally, DevTools now displays a guiding line to help you better review the align-items CSS property. The gap CSS property is supported as well. In the following figure, the gap CSS property is set to gap: 12px; and the hatching pattern for each gap is displayed.

Add tools quickly with new More Tools button

You now have a new way to open more tools in the Microsoft Edge DevTools. After you turn on this experiment, the More Tools icon displays as a plus sign (+) to the right of the main panel. To display a list of other tools to add to the main panel, choose the More Tools (+) icon. To turn on this experiment, navigate to Settings > Experiments, and then choose the checkbox next to Enable + button tab menus to open more tools.

More Tools highlighted in DevTools

Assistive technologies now announce position and count of CSS suggestions

When you edit CSS, you get a dropdown of features. This feature was not available to users of assistive technologies, since it is announced in Microsoft Edge version 89. A user of assistive technologies can now navigate CSS suggestions in the Styles pane. In Microsoft Edge version 88 and earlier, assistive technology announced Suggestion as a user navigated through the list of suggestions when editing CSS in the Styles pane. In Microsoft Edge version 89, a user of assistive technology now hears the position and count of the current suggestion. Each suggestion is announced as the user navigates through the list of suggestions, such as Suggestion 3 of 5. To learn more about writing CSS in the DevTools, see CSS features reference. To view the history of this feature in the Chromium open-source project, see Issue 1157329.

To view a video that displays and reads aloud several suggestions with this experiment turned on, navigate to Voiceover announcing devtools options on YouTube.

The suggestion highlighted in the Styles pane

Emulate Surface Duo and Samsung Galaxy Fold

Test the appearance of your website or app on the following devices in Microsoft Edge.

Turn on Experimental Web Platform features to access the new CSS media screen-spanning feature and getWindowSegments JavaScript API. Navigate to edge://flags and toggle the flag next to Experimental Web Platform features. To help enhance your website or app for the dual-screen and foldable devices, use the following features when emulating the device.

  • Spanning, which is when your website (or app) appears across both screens.
  • Rendering the seam, which is the space between the two screens.

To review the history of this feature in the Chromium open-source project, navigate to Issue 1054281.

Emulate dual-screen

Microsoft Edge Developer Tools for Visual Studio Code version 1.1.2

The Microsoft Edge Developer Tools for Visual Studio Code extension version 1.1.2 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.2, navigate to Update an extension manually.

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

Announcements from the Chromium project

The following sections announce additional features available in Microsoft Edge that were contributed to the open-source Chromium project.

Capture node screenshot beyond viewport

In Microsoft Edge version 89, node screenshots are more accurate, capturing the full node even if content from the node is not visible in the viewport. In the Elements tool, hover on an element, open the contextual menu (right-click), and choose Capture node screenshot. To review the history of this feature in the Chromium open-source project, navigate to Issue 1003629.

Capture node screenshot highlighted on the context menu in the Elements tool

Elements tool updates

Support forcing the :target CSS state

You may now use DevTools to force the :target CSS pseudo-class. The :target pseudo-class is triggered when a unique element (the target element) has an id that matches a fragment of the URL. For example, the http://www.example.com/index.html#section1 URL triggers the :target pseudo-class on an HTML element with id="section1". To try a demo with section 1 highlighted, navigate to CSS :target demo. To review the history of this feature in the Chromium open-source project, navigate to Issue 1156628.

Use Duplicate elements to copy elements

Use the new Duplicate element shortcut to clone an element. In the Elements tool, hover on an element, open the contextual menu (right-click), choose Duplicate element. A new element is created under the selected element. To duplicate the element with a keyboard shortcut, select Shift+Alt+Down Arrow (Windows/Linux) or Shift+Option+Down Arrow (macOS). To review the history of this feature in the Chromium open-source project, navigate to Issue 1150797.

The Duplicate element is highlighted in the context menu on an element in the Elements tool

Color pickers for custom CSS properties

The Styles pane now displays color pickers for custom CSS properties. To cycle through the RGBA, HSLA, and Hex formats of the color value, hold Shift and choose the color picker. To review the history of this feature in the Chromium open-source project, navigate to Issue 1147016.

Color pickers for custom CSS properties

Copy CSS classes and properties

You may now copy CSS properties quicker with a few new options in the contextual menu. In the Elements tool, choose an element. To copy the value, in the Styles pane, hover on a CSS class or a CSS property, open a contextual menu (right-click), and choose the copy option.

Copy options for a CSS class.

Option Details
Copy selector Copy the current selector name.
Copy rule Copy the rule of the current selector.
Copy all declarations Copy all declarations under the current rule, including non-valid and prefixed properties.

Copy options for a CSS property.

Option Details
Copy declaration Copy the declaration of the current line.
Copy property Copy the property of the current line.
Copy value Copy the value of the current line.

To review the history of this feature in the Chromium open-source project, navigate to Issue 1152391.

Cookies updates

New option to display URL-decoded cookies

You may now opt to display the URL-decoded cookies value in the Cookies pane. To display the decoded cookie, navigate to Application > Cookies pane, choose any cookie on the list, and choose the checkbox next to Show URL decoded. To review the history of this feature in the Chromium open-source project, navigate to Issue 997625.

Option to display URL-decoded cookies

Filter and clear visible cookies

In Microsoft Edge version 88 or earlier, the Application tool only provided a way to clear all cookies with the Clear all cookies button. In Microsoft Edge version 89, you may now choose Clear filtered cookies to delete only the filtered cookies. To filter cookies, navigate to Application > Cookies, and type in the Filter textbox. To delete the displayed cookies, choose the Clear filtered cookies button. To display all other cookies, clear the filter text. To review the history of this feature in the Chromium open-source project, navigate to Issue 978059.

Clear only visible cookies

New option to clear third-party cookies in the Storage pane

DevTools now clear only first-party cookies by default. To clear website data and first-party cookies only, navigate to Application > Storage, and then choose Clear site data.

To clear website data and all cookies, navigate to Application > Storage. Choose the checkbox next to including third-party cookies, and then choose Clear site data.

To review the history of this feature in the Chromium open-source project, navigate to Issue 1012337.

Option to clear third-party cookies

Network tool updates

Persist Record network log setting

In Microsoft Edge version 88 or earlier, DevTools reset the Record network log setting when a webpage refreshes. In Microsoft Edge version 89, DevTools now persist the Record network log setting. To review the history of this feature in the Chromium open-source project, navigate to Issue 1122580.

Record network log

Online option is now No throttling option

The network emulation option Online is now renamed to No Throttling. To review the history of this feature in the Chromium open-source project, navigate to Issue 1028078.

No throttling option

New copy options in the Console tool, Sources tool, and Styles pane

Copy object in the Console and Sources tool

You may now copy object values in the Console and Sources tools. The ability to copy object values is useful when working with large objects. To review the history of this feature in the Chromium open-source project, navigate to Issues 1148353 and 1149859.

In the Console tool, hover on an object, open the contextual menu (right-click), and then choose Copy object.

In the Sources tool, on a breakpoint, hover on an object, in the Object popup window, highlight an object, open the contextual menu (right-click), and then choose Copy object.

Copy file name in the Sources tool and Styles pane

You may now copy a file name using the contextual menu. To review the history of this feature in the Chromium open-source project, navigate to Issues 1155120.

In the Sources tool, hover on a file name, open the contextual menu (right-click), and then choose Copy file name.

In the Elements tool > Styles pane, hover on a file name, open the contextual menu (right-click), and then choose Copy file name.

Updates to Frame details

Service Workers information in Frame details

DevTools now lists a dedicated service worker under the parent frame. In the following figure, service worker details are displayed. To display the service worker details, navigate to Application > Frames > top > Service Workers and then choose a service worker. To review the history of this feature in the Chromium open-source project, navigate to Issue 1122507.

Service Workers information in the Frames details

Measure Memory information in Frame details

The performance.measureMemory() API status is now displayed under the API availability section. The new performance.measureMemory() API estimates the memory usage of the entire webpage. To review the history of this feature in the Chromium open-source project, navigate to Issue 1139899.

Measure Memory

Dropped frames in the Performance tool

When you analyze load performance in the Performance tool, the Frames section now marks dropped frames as red. To display the frame rate, hover on a dropped frame. To review the history of this feature in the Chromium open-source project, navigate to Issue 1075865.

Dropped frames

New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)

The Advanced Perceptual Contrast Algorithm (APCA) replaces the AA/AAA guidelines contrast ratio in the Color Picker. APCA is a new way to compute contrast. It is based on modern research on color perception. Compared to AA/AAA guidelines, APCA is more context-dependent. The contrast is calculated based on the following spatial properties of the text, color, and context.

  • Spatial properties of text that include font weight and size.
  • Spatial properties of color that include perceived contrast between text and background.
  • Spatial properties of context that include ambient light, surroundings, and intended purpose.

To turn on this experiment, navigate to Settings > Experiments and choose the checkbox next to Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines. To review the history of this feature in the Chromium open-source project, navigate to Issue 1121900.

APCA in the Color Picker

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.

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Jecelyn Yeen (Developer advocate, Chrome DevTools).

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