Edit

Share via

Experimental features in Microsoft Edge DevTools

  • Article

Microsoft Edge DevTools provide access to experimental features that are still in development. This article lists and describes the experimental features that are in either:

  • The latest version of the Canary preview channel of Microsoft Edge.
  • The latest version of the Stable release of Microsoft Edge.

All channels of Microsoft Edge have experimental features. You can get the latest experimental features by using the Microsoft Edge Canary channel. To view the full list of experiments that are available in your version of Microsoft Edge, see the Settings > Experiments page in DevTools.

These experiments could be unstable or unreliable and may require you to restart DevTools.

Experiments which are turned on by default

The following experimental features are turned on by default. You can use these features right away, without changing any settings. You can turn off these default experimental features, if needed.

Turned on by default in Microsoft Edge Canary 133:

Turned on by default in Microsoft Edge Stable 131:

Turning an experiment on or off

Experimental features are constantly being updated and might cause performance issues. This is one reason you might want to turn off an experiment.

To turn an experiment on or off in Microsoft Edge:

  1. To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.

  2. In DevTools, on the main toolbar, click the Customize and control DevTools (Customize and control DevTools icon) button, and then click the Settings (Settings icon) button. Or, press Shift+?.

  3. On the left side of the Settings panel, select the Experiments page:

    The Experiments page in Settings

  4. Select or clear the checkbox for an experiment. Some experiments are selected by default.

  5. Click Close (The Close icon in DevTools > Settings) in the upper right of DevTools Settings.

  6. Click the Reload DevTools button.

Restoring defaults for which experiments are selected

To restore the default settings for which experimental features are turned on:

  1. To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.

  2. In DevTools, on the main toolbar, click the Settings (Settings icon) button. Or, press Shift+?. The Settings panel opens, with the Preferences page selected.

  3. At the bottom of the Preferences page, click the Restore defaults and refresh button, and then click Close (The Close icon in DevTools > Settings).

Filtering the experiments

You can filter the experimental features by text included in the title.

  1. To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.

  2. In DevTools, on the main toolbar, click the Settings (Settings icon) button. Or, press Shift+?. The Settings panel opens, with the Preferences page selected.

  3. On the left side of the Settings panel, select the Experiments page.

  4. Click in the Filter text box and enter text, such as timeline. As you type, only the matching checkboxes are shown in the Experiments page.

  5. To end filtering, clear the Filter text box.

Providing feedback about the experiments

We're eager to hear your feedback about experimental features. To share feedback with us, Contact the Microsoft Edge DevTools team.

List of experiments

The experiments checkboxes that appear in the latest version of the Canary preview channel of Microsoft Edge are listed below. The Stable release is also noted, following behind the addition or removal of checkboxes in Canary.

Capture node creation stacks

To capture JavaScript stack traces when DOM nodes are added to the DOM at runtime, enable this experiment. This experiment adds the Stack Trace tab in the Elements tool, grouped with the Styles tab:

The Stack Trace tab in the Elements tool

After you enable the experiment, you can test it as follows:

  1. In a new window or tab, open a webpage that creates DOM nodes dynamically via JavaScript, such as the TODO demo app.
  2. In the rendered demo page, create a new todo item.
  3. In the rendered demo page, right-click the new todo item, and then select Inspect. DevTools opens, showing the Elements tool.
  4. Click the Stack Trace tab, which is grouped with the Styles tab.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Protocol Monitor

Makes the Protocol monitor tool available in DevTools:

The 'Protocol monitor' tool

The Protocol monitor tool displays the messages that are sent and received by DevTools, to debug the inspected page. DevTools communicates with the inspected page by using the Chrome DevTools Protocol (CDP).

To select this checkbox and then open the Protocol monitor tool:

  1. Select this Protocol Monitor checkbox as described in Turning an experiment on or off, above.

  2. In Quick View at the bottom of DevTools, click the More tools (+) button, and then select Protocol monitor.

    Or, open the Command Menu, such as by pressing Ctrl+Shift+P (Windows/Linux) or Command+Shift+P (macOS), and then type protocol in the text box. Then select Show Protocol monitor.

    The Protocol monitor tool is displayed in the Quick View panel at the bottom of DevTools.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Show option to expose internals in heap snapshots

new as of Microsoft Edge 105

Whether to display a checkbox to expose internals in heap snapshots in the Memory tool.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines

The Advanced Perceptual Contrast Algorithm (APCA) replaces the AA/AAA guidelines contrast ratio in the Color Picker. The Color Picker is used in the Styles tab in the Elements tool.

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.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Enable full accessibility tree view in the Elements panel

Adds a Switch to Accessibility Tree view button in the Elements tool that toggles between the DOM tree and the accessibility tree. The button label toggles to Switch to DOM Tree view.

If this Experiment checkbox is cleared, the Elements tool lacks the button:

The Elements tool without the "Switch to Accessibility Tree view" button

If this Experiment checkbox is selected, the Elements tool has the button:

The Elements tool with the "Switch to Accessibility Tree view" button

The Accessibility Tree view in the Elements tool:

The Accessibility Tree view in the Elements tool

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Enable new font editor within the Styles Pane

You can use the visual Font Editor to edit fonts. Use it define fonts and font characteristics. The visual Font Editor helps you do the following:

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

To use the visual Font Editor:

  1. To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.

  2. In DevTools, on the main toolbar, select the Elements tab. If the Elements tab isn't visible, click the More tabs (More tabs icon) button, or else the More Tools (More Tools icon) button.

  3. In the Styles tab, select the Font Editor icon.

    The visual Font Editor pane is highlighted

Some browser channels have the checkbox label Enable new Font Editor tool within the Styles pane.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Enable automatic contrast issue reporting via the Issues panel

Enables automatic contrast issue reporting in the Issues tool.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Enables experimental cookie features.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Deprecate CSS <length> authoring tool in the Styles tab

Not applicable for Microsoft Edge. Selecting or clearing this checkbox has no effect.

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Sync CSS changes in the Styles tab

Whether to sync CSS changes in the Styles tab in the Elements tool.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Highlights a violating node or attribute in the Elements panel DOM tree

new as of Microsoft Edge 106

Highlights a violating node or attribute in the Elements tool's DOM tree.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Group sources into authored and deployed trees

new as of Microsoft Edge 104

Controls whether to group resources into separate Authored and Deployed trees in the Page tab of the Sources tool. This feature in the Sources tool allows you to group source files in two folders depending on whether these are:

  • Original source files (authored, that is, files with your local edits).
  • Production files (deployed files that are on the web server after compiling and bundling the source files).

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Hide ignore-listed code in Sources tree view

new as of Microsoft Edge 106

In the Sources tool's tree view, omits code that's included in the Ignore list.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Redesign of the filter bar in the Network panel

new as of Microsoft Edge 120

In the Network tool, the filter bar has been redesigned:

  • The buttons are replaced by a Request types dropdown list.
  • The checkboxes are replaced by a More filters dropdown list.

Filter bar with this checkbox cleared:

Filter bar with this checkbox cleared

Filter bar with this checkbox selected:

Filter bar with this checkbox selected

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Autofill panel

new as of Microsoft Edge 125

Adds an Autofill tool to DevTools, to record various events that the browser triggers when a user is filling in a form by using the browser's autofill feature. For example, when the browser remembers your address and autofills it in an address field.

The Autofill tool

See also:

  • Autofill in Microsoft Edge Privacy Whitepaper.
  • Autofill in Overview of WebView2 APIs.

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 123, as Enable Autofill view.

Performance panel: show postMessage dispatch and handling flows

new as of Microsoft Edge 124

This experiment improves the Performance tool's Main section to help you quickly identify postMessage events and handlers, by distinguishing events that are triggered by the postMessage method from other events that are displayed in the Performance tool. This experiment helps you investigate performance issues that are related to posting messages across various threads of an application, to view messages between windows, iframes, and dedicated workers.

Without this experiment, events that are triggered by dispatching and handling messages between threads of an application appear as generic scripting function-call events. With this experiment enabled:

  • postMessage dispatch events appear as Schedule postMessage.
  • postMessage handler events appear as On Message:

"Schedule postMessage" events and "On Message" events in the Performance tool

This experiment helps you investigate when a postMessage call occurred, and how long the message was queued before the postMessage handler starts. The dispatch events are linked to handler events by initiator arrows that appear when you click on either type of event:

Arrows linking dispatch events to handler events

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Performance panel: enable annotations

new as of Microsoft Edge Canary 129

Annotations in the Performance tool allow you to double-click any event that's displayed in the main area of a performance recording, and then add a custom label on (above) that event:

An annotation on an event in the Performance tool

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Performance panel: enable performance insights

new as of Microsoft Edge Stable 129

In the Performance tool, adds the Insights sidebar tab, when viewing a recorded performance profile. The Insights sidebar tab provides useful information about the profile, such as the various Largest Contentful Paint phases and the list of Render blocking requests.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Performance panel: enable live metrics landing page

new as of Microsoft Edge 127

In the Performance tool, adds a landing page that's displayed when no performance traces have been recorded yet. The landing page displays performance metrics about the rendered page that are updated live, such as:

  • Largest Contentful Paint (LCP)
  • Cumulative Layout Shift (CLS)
  • Interaction to Next Paint (INP)

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Performance panel: enable server timings in the timeline

new as of Microsoft Edge Stable 129

Shows a Server Timings track in the Main section of the Performance tool, to display server timing events sent by your HTTP server. To learn more, see Server timing at MDN Web Docs.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Extension storage in Application panel

new as of Microsoft Edge Stable 131

Displays the Extension storage section in the Application tool. The Extension storage section displays the data that's stored by extensions that are using the storage extension API.

See also:

Status:

  • This checkbox is not present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Performance panel: enable experimental performance insights

new as of Microsoft Edge Canary 133

Includes experimental insights in the Insights side panel in the Performance tool.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Performance panel: enable dimming unrelated events in performance insights and search results

new as of Microsoft Edge Canary 133

This experiment changes the color of certain events in the main section of the Performance tool to gray. This happens in two cases:

  • When you search for an event by using Ctrl+F and then type text, only the search matches retain their coloring; the other events turn gray.

  • When you use the Insights side-panel, and expand one of the insights, only the events that are related to that insight retain their coloring; the other events turn gray.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is not present in Microsoft Edge Stable 131.

Performance panel: enable a switch to an alternative timeline navigation option

new as of Microsoft Edge Canary 133

In the Performance tool, adds a Switch to an alternative timeline navigation control inside the Help/ Keyboard shortcuts popup.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is not present in Microsoft Edge Stable 131.

Log DevTools uncaught exceptions to Console

Controls whether to log DevTools uncaught exceptions in the Console tool.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

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 includes:

  • Accessibility
  • Cross-browser compatibility
  • Security
  • Performance
  • Progressive Web Apps (PWAs)
  • Other common web development issues

The webhint experiment displays webhint feedback in the Issues tool. Select an issue to display documentation about the solution and a list of the affected resources on your website. Select a resource link to open the relevant tool, such as Network, Sources, or Elements:

webhint feedback in the Issues tool

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Show issues in Elements

Displays syntax errors as wavy underlines under DOM nodes in the Elements tool.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Open source files in Visual Studio Code

The Open source files in Visual Studio Code experiment replaces the code editor of the Sources tool with Visual Studio Code, for editing local files. When you turn on this experiment, Developer Tools detects when you edit a local file, and prompts you to select a folder to use as your Workspace.

When you select a folder to use as your Workspace, selecting any link to a file in DevTools opens the file in Visual Studio Code. In previous versions of Microsoft Edge, this action opened the file in the code editor of the Sources tool in DevTools.

Selecting a file link in the Styles tool opens the file in Visual Studio Code

Any edits that you make in DevTools now change the file on the hard drive and sync live with Visual Studio Code.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Enable Adaptive CPU throttling

new as of Microsoft Edge 114

Enables Adaptive CPU throttling.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Enable CSS Copilot

Enables using Copilot in the Microsoft Edge Sidebar to explain HTML elements and CSS styles to help you better understand a particular element or style rule that's displayed in the Elements tool. To ask Copilot about an element or style rule, click the Copilot button next to it, and then ask follow-up questions.

Copilot icon in Elements tool

This experiment is not available when the Sidebar is turned off.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Live heap profile

Controls whether to live-update the heap profile.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Sampling heap profiler timeline

Controls whether to show the sampling heap profiler timeline in the Performance tool.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Performance panel: invalidation tracking

Adds an Invalidations section for Recalculate Style events in the Summary tab of the Performance tool. The Invalidations section provides information about the root cause for a Recalculate Style event, which might be helpful when investigating long-running Recalculate Style events that are causing performance issues.

The Invalidations section lists the DOM nodes that were invalidated as a result of a change on the webpage, such as a DOM mutation, and which the browser engine had to restyle during the Recalculate Style event.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Performance panel: show all events

Controls whether to show all events in the Performance tool.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Performance panel: V8 runtime call stats

Controls whether to show V8 runtime call statistics in the Performance tool. V8 is the JavaScript engine that's used by Microsoft Edge.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Performance panel: Enable collecting enhanced traces

new as of Microsoft Edge 128

This experiment makes the Performance tool capture newly added traces, to support enhanced traces v2. This feature is being implemented in the upstream Chromium project. This experiment doesn't affect the capabilities of Microsoft Edge to capture enhanced traces and doesn't impact DevTools user's experience.

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

See also:

Performance panel: Enable collecting source text for compiled script

new as of Microsoft Edge 128

In the Performance tool, when exporting the trace file, stores the source code of compiled scripts in the trace file.

This experiment makes the Performance tool record script source text in traces. This feature is being implemented in the upstream Chromium project.

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

See also:

Performance panel: Enable debug mode (trace event details, etc)

new as of Microsoft Edge 128

Adds a Trace Event section to the Summary tab of the Performance tool. The Trace Event section is displayed when you select an event in a recorded performance trace. The Trace Event section displays debugging information about the selected trace event, such as its name and duration.

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

See also:

Enable instrumentation breakpoints

Whether to halt at test breakpoints. This experiment makes breakpoints more reliable.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.

Use scope information from source maps

new as of Microsoft Edge 118

Whether to use scope information from source maps.

See also:

Status:

  • This checkbox is present in Microsoft Edge Canary 133.
  • This checkbox is present in Microsoft Edge Stable 131.