Microsoft Edge 89

Not present in Edge 88 or Chrome 89. With the bookmarks bar open, and with a folder of bookmarks in the bookmark bar, expand the folder and attempt to open multiple tabs by Ctrl+Clicking. Today Microsoft Edge helps you save time and effort while filling out forms and creating accounts online by auto filling your data like addresses, names, phone numbers, etc. Starting with Microsoft Edge version 89, we are adding support for another field that you can have saved and auto-filled - date of birth. This is Microsoft Edge Dev Build 89.0.723.0. Innovation has been part of Microsoft Edge since day one, whether you’re seamlessly accessing corporate apps online for work or saving money shopping with built-in coupons. As contributors to the Chromium project, we look forward to The post Serving our customers more effectively with new.

-->

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.

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.

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.

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 may 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, navigate to Change CSS. To review the history of this feature in the Chromium open-source project, navigate to 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.

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.

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.

Added a Close instance button to each item on the target list (#248)
Bumped Microsoft Edge DevTools version from 84.0.522.63 to 85.0.564.40 (#235)
Included Debugger for Microsoft Edge as a dependency (#233)
Implemented settings option to change extension themes (#229)

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.

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.

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.

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.

Microsoft Edge 89 Download

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.

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.

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

Microsoft Edge 89 What's New

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.

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.

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.

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.

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.

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.

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.

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.

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).

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

Microsoft's vertical tabs in its new Edge browser have been a long time in the making and they're finally available as the latest stable release of Microsoft's Chromium-based browser.

Enterprise Software

Vertical tabs arrive in the newly released Edge stable version 89 among other performance improvements related to Microsoft's work on toning down the burden of sleeping tabs on memory and the CPU.

SEE: Windows 10 Start menu hacks (TechRepublic Premium)

For those who haven't tested vertical tabs during the preview releases of Edge since October, the vertical tabs appear on the left-hand side and can be activated by clicking the 'turn on vertical tabs' icon at the top left side of the browser. This moves all open tabs to a panel on the left edge of the browser and gives more space to show the full name of each site in a tab. The feature is available in Edge 89 for Windows 10 and macOS.

Vertical tabs are Microsoft's effort to address the packed rack of tabs that builds up during the course of a typical work-from-home day that might involve Outlook, Gmail, Zoom, Google Meets, Slack, YouTube and everything else that's happening in the browser.

'To make tab management and organization easier, vertical tabs is now generally available this month. Now everyone can view and manage their tabs from a pane on the side with a single click. This allows you to clearly see the tab titles and controls, making it easier to find and switch between the tabs you need, regardless of how many you have open,' Liat Ben-Zur, Microsoft corporate vice president, said.

The other big performance feature arriving in Edge 89 is startup boost, a feature under the hood that helps the browser launch faster. Microsoft claims when it is enabled, startup times can be 29% to 41% faster than when it is not enabled.

'Startup boost works by keeping a few Microsoft Edge processes running when the browser is not visible. This allows Microsoft Edge to start more quickly when, for example, you click the Microsoft Edge icon, a hyperlink from another application, or search from the search box in the Task Bar,' Microsoft explained in a blogpost.

The feature is currently rolling out to Edge users so it may not be available just yet even on the latest version of the browser.

Startup boost does consume some CPU and GPU resources but Microsoft assures users that it's minimal.

SEE: Google: Here's how we're toughening up Android security

'Startup boost does not add any additional resources when Microsoft Edge browser windows are open,' Microsoft claimed.

'When Microsoft Edge is closed, a set of core Microsoft Edge processes will continue to run to enable faster launches in the future. You may see browser, GPU, Network, CrashPad, or other processes running in the background. Experimentation has shown these processes have a minimal resource footprint.'

Microsoft has also made it easier to access and manage browsing history without losing context of the page currently open. This is achieved by opening history as a dropdown from the toolbar instead of opening the full page view in settings.

Assistfox119