Experimental features

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.

  1. Open DevTools.

  2. Open the Settings pane.

  3. On the left side of the Settings pane, choose the Experiments section.

    The Experiments page in Settings

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

  5. Close and reopen Microsoft Edge DevTools.

Note

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

Enable webhint

webhint is an open-source tool that provides real-time feedback for websites and local webpages. The type of feedback provided by webhint.

  • accessibility
  • cross-browser compatibility
  • security
  • performance
  • 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.

webhint feedback in the Issues panel

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.

  1. Open the Network pane.
  2. Find the network request that you want to change and resend.
  3. Open the contextual menu (right-click), and choose Edit and Replay.
  4. When the Network Console opens, edit the network request information.
  5. Choose Send.

Network Console in the Console drawer

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.

  1. Open the Elements tool.
  2. To the right of the Styles tab, select the Accessibility tab.
  3. Under the Source Order Viewer section, choose the Show Source Order checkbox.
  4. Highlight any HTML element to display an overlay that the order in the webpage source.

Source Order Viewer in the Accessibility pane

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.

  1. On the drawer, choose the 3D View tool.
  2. Open the Composited Layers pane.
  3. All of the painted layers of the app are displayed. Try this feature with your own web apps.

Composited Layers pane

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.

  1. Open the Elements tool.
  2. Open the Styles pane.
  3. 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.

The visual Font Editor pane is highlighted

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 (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 Flexbox containers with the Inspect tool

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.

Flex icons and Layout panel in DevTools

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.

Layout panel

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 (+) icon.

More Tools in the top pane

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.

Welcome tool

Previous experimental features

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

The Send Feedback icon in Microsoft Edge DevTools