Microsoft Edge DevTools provide access to experimental features that are still in development. You may test and provide feedback before each feature is released.
While experimental features are available in all channels of Microsoft Edge, you may get the latest experimental features using the Microsoft Edge Canary channel.
Turn on experimental features
To turn on (or off) experimental features in Microsoft Edge, complete the following steps.
I(Windows, Linux) or
I(macOS). For more information, navigate to Microsoft Edge DevTools keyboard shortcuts.
Open the Settings pane.
?. For more information, navigate to Microsoft Edge DevTools keyboard shortcuts.
On the left side of the Settings pane, choose the Experiments section.
On the Experiments page, scroll through the list of all available experimental features and choose the checkbox next to each feature that you want to test.
Close and reopen Microsoft Edge DevTools.
Experimental features are constantly being updated and may cause performance issues. To turn off an experimental feature, open the Experiments page and clear the checkbox of the experimental feature that you want to turn off.
Highlighted experimental features
The following sections describe the new experimental features that are available in Microsoft Edge.
|Experimental feature||Microsoft Edge version|
|Enable webhint||85 or later|
|Enable Network Console||85 or later|
|Source Order Viewer||86 or later|
|Enable Composited Layers in 3D View||87 or later|
|Enable new Font Editor tool within the Styles pane||89 or later|
|Enable new CSS Flexbox debugging features||89 or later|
|Enable + button tab menus to open more tools||89 or later|
|Enable Welcome tab||89 or later|
- cross-browser compatibility
- Progressive Web Apps (PWAs)
- other common web development issues
The webhint experiment displays the webhint feedback in the Issues panel. Choose an issue to display solution documentation and a list of the affected resources on your website. Choose a resource link to open the relevant Network, Sources, or Elements pane in DevTools.
Enable Network Console
Network Console is the working title of an experiment to make synthetic network requests over HTTP. You may use the Network Console experiment to send web API requests.
After you turn on the experiment, ensure you restart the DevTools. To use the Network Console, complete the following steps.
- Open the Network pane.
- Find the network request that you want to change and resend.
- Open the contextual menu (right-click), and choose Edit and Replay.
- When the Network Console opens, edit the network request information.
- Choose Send.
Source Order Viewer
Source Order Viewer is an experiment that displays the order of elements in the webpage source. The on-screen display order may differ from the order of the source, which confuses screen reader and keyboard users. Use the Source Order Viewer experiment to find the differences between on-screen display order and the order of the source.
After you turn on the experiment, ensure you restart the DevTools. To use Source Order Viewer, complete the following steps.
- Open the Elements tool.
- To the right of the Styles tab, select the Accessibility tab.
- Under the Source Order Viewer section, choose the Show Source Order checkbox.
- Highlight any HTML element to display an overlay that the order in the webpage source.
Enable Composited Layers in 3D View
You may now visualize Layers alongside z-indexes and the Document Object Model (DOM). This feature helps you debug without switching contexts as often. You identified that reducing context-switching was a major pain point. It is not always clear how the code you write affects your web app. For a comprehensive visual debugging experience, the 3D View and Composited Layers are now combined.
After you turn on the experiment, ensure you restart the DevTools. To use Composited Layers, complete the following steps.
- On the drawer, choose the 3D View tool.
- Open the Composited Layers pane.
- All of the painted layers of the app are displayed. Try this feature with your own web apps.
Enable new Font Editor tool within the Styles pane
You may now use the new visual Font Editor to edit fonts. Use it define fonts and font characteristics. The visual 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
After you turn on the experiment, ensure you restart the DevTools. To use the new visual Font Editor, complete the following steps.
- Open the Elements tool.
- Open the Styles pane.
- Choose the Font Editor icon.
For more information about the new visual Font Editor, navigate to Edit CSS font styles and settings in the Styles pane in DevTools.
Enable new CSS Flexbox debugging features
This experimental feature provides many new visualizations to help you debug CSS Flexbox layouts. To preview the latest experimental features, turn on this experiment and reload DevTools.
Display persistent overlays on Flexbox layouts with the Inspect tool
The Inspect tool provides a quick way to identify and visualize CSS Flexbox layouts in a website by hovering on them with the mouse. Choose the Inspect () icon in the top-left corner of DevTools. Then, while debugging the website, hover on a flex container to display outlines around the flex container.
Display persistent overlays on Flexbox layouts
In Microsoft Edge version 89 or later, the experimental CSS Flexbox feature also offers the option to turn on persistent overlays on Flexbox layouts. Persistent overlays provide the following benefits.
- Persistent overlays remain visible on the webpage as you scroll, move your mouse, and use other features of the DevTools.
- Multiple persistent overlays may be used at the same time, to allow you to review several Flexbox layouts at once.
- Persistent overlays offer color configuration options.
To toggle persistent overlays on Flexbox layout, use one of following actions.
- Choose the Flexbox oval icon next to any Flexbox container displayed in the DOM tree of the Elements tool.
- Open the new Layout panel located in the Elements tool, and choose the checkbox next to each Flexbox container you want to highlight.
Configure persistent overlays
To configure options for persistent overlays for CSS grids or Flexbox layouts, use the Layout pane. The Layout pane is located in the Elements tool next to the Styles and Computed panes.
Enable + button tab menus to open more tools
You may now open more tools using the new More Tools (
+) icon. After you turn on the Enable + button tab menus to open more tools experiment and reload DevTools, a plus sign (
+) displays to the right of the tab group at the top of the DevTools. To display a list of other tools that you may add to the tab bar, choose the new More Tools (
Enable Welcome tab
This experiment replaces the What's New tool with the new Welcome tool. It displays a refreshed design for the following content.
- Links to developer docs
- the latest features
- release notes
- Option to contact the Microsoft Edge DevTools team
The Welcome tool opens automatically after each update to Microsoft Edge. To prevent the display of the Welcome tool after each update, clear the checkbox next to Open tab after each update under the Welcome tool title.
If you prefer the original What's New tool, navigate to Settings > Experiments and remove the checkbox next to Enable Welcome tab.
Previous experimental features
- 3D View is now available and turned on by default in Microsoft Edge version 83 or later.
- Turn on support to move tabs between panels is now available and turned on by default in Microsoft Edge version 85 or later.
- Match keyboard shortcuts in the DevTools to Microsoft Visual Studio Code is now available and turned on by default in Microsoft Edge version 86 or later.
- Edit keyboard shortcuts for any action in the DevTools is now available and turned on by default in Microsoft Edge version 89 or later.
- Turn on new CSS grid debugging features is now available and turned on by default in Microsoft Edge version 89 or later.
- Emulation: Support dual screen mode is now available and turned on by default in Microsoft Edge version 90 or later.
Providing feedback on experimental features
To provide feedback on Microsoft Edge DevTools experiments, or anything else related to DevTools.
- Send your feedback using the Send Feedback icon in the DevTools
- Tweet at @EdgeDevTools