-->
Microsoft Edge isn’t a brand new browser, but many Windows users are only just noticing the latest version of Edge, which recently rolled out to everyone in a recent Windows Update. The new Edge is available for all supported Windows versions (Windows 7 and later) as well as on MacOS. On any platform, you can download the new Edge from www.microsoftedge.com. It's a relatively. It's been quite some time since Microsoft debuted the Edge browser, the chic version of Internet Explorer.Over the years, it has shed its tag of 'basic browser' and has incorporated plenty of 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.
Download Edge For Windows 10
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.
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
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)
Upgrade Browser For Windows 7
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
New Windows Edge 2020
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.
New Windows Edge Browser
Note
Windows Edge 10 Free Download Microsoft
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.