diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/index-images/network-filter-bar-orig.png b/microsoft-edge/devtools-guide-chromium/experimental-features/index-images/network-filter-bar-orig.png new file mode 100644 index 0000000000..6e80275cd6 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/experimental-features/index-images/network-filter-bar-orig.png differ diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/index-images/network-filter-bar-redesigned.png b/microsoft-edge/devtools-guide-chromium/experimental-features/index-images/network-filter-bar-redesigned.png new file mode 100644 index 0000000000..140082f5db Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/experimental-features/index-images/network-filter-bar-redesigned.png differ diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md index e165b86ffc..fa7942e4a9 100644 --- a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md +++ b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge no-loc: ["Enable webhint"] -ms.date: 08/22/2023 +ms.date: 10/23/2023 --- # Experimental features @@ -48,7 +48,7 @@ The following experimental features are turned on by default. You can use these -**Turned on by default in Microsoft Edge Canary 118:** +**Turned on by default in Microsoft Edge Canary 120:** * [Automatically pretty print minified sources](#automatically-pretty-print-minified-sources) * [Source order viewer](#source-order-viewer) * [Enable keyboard shortcut editor](#enable-keyboard-shortcut-editor) @@ -63,25 +63,27 @@ The following experimental features are turned on by default. You can use these * [Show issues in Elements](#show-issues-in-elements) * [Focus Mode](#focus-mode) - selected by default on some machines. * [Open source files in Visual Studio Code](#open-source-files-in-visual-studio-code) -* [Enable Adaptive CPU throttling](#enable-adaptive-cpu-throttling) * [View console.profile() results in the Performance panel for Node.js](#view-consoleprofile-results-in-the-performance-panel-for-nodejs) * [Enable Preloading Status Panel in Application panel](#enable-preloading-status-panel-in-application-panel) -**Turned on by default in Microsoft Edge Stable 116:** +**Turned on by default in Microsoft Edge Stable 118:** * [Automatically pretty print minified sources](#automatically-pretty-print-minified-sources) * [Source order viewer](#source-order-viewer) * [Enable keyboard shortcut editor](#enable-keyboard-shortcut-editor) * [WebAssembly Debugging: Enable DWARF support](#webassembly-debugging-enable-dwarf-support) +* [Set all breakpoints eagerly at startup](#set-all-breakpoints-eagerly-at-startup) * [Display more precise changes in the Changes tab](#display-more-precise-changes-in-the-changes-tab) * [Local overrides for response headers](#local-overrides-for-response-headers) * [Enable color picking outside the browser window](#enable-color-picking-outside-the-browser-window) * [Disable the deprecated 'Color format' setting (requires reloading DevTools)](#disable-the-deprecated-color-format-setting-requires-reloading-devtools) +* [Enable background page selector (e.g. for prerendering debugging)](#enable-background-page-selector-eg-for-prerendering-debugging) * [Enable webhint](#enable-webhint) * [Show issues in Elements](#show-issues-in-elements) +* [Focus Mode](#focus-mode) - selected by default on some machines. * [Open source files in Visual Studio Code](#open-source-files-in-visual-studio-code) -* [Enable Adaptive CPU throttling](#enable-adaptive-cpu-throttling) * [View console.profile() results in the Performance panel for Node.js](#view-consoleprofile-results-in-the-performance-panel-for-nodejs) +* [Enable Preloading Status Panel in Application panel](#enable-preloading-status-panel-in-application-panel) @@ -163,8 +165,8 @@ The experiments checkboxes that appear in the latest version of the Canary previ Some Microsoft Edge Add-ons can define custom color themes for DevTools. If you install an add-on with a theme, you need to enable the **Allow extensions to load custom stylesheets** experiment to view the add-on themes. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -174,8 +176,8 @@ Status: To capture JavaScript stack traces when DOM nodes are added to the DOM at runtime, enable this experiment. The captured stack traces are displayed in the **Stack Trace** pane of the **Elements** panel. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -196,8 +198,8 @@ When this experiment is turned off, a UI prompt with a button asks you whether t * In contrast, _pretty print_ presents the contents of a file in an indented, more human-readable format. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -225,8 +227,8 @@ To monitor the messages sent and received by DevTools to debug the inspected pag 1. The **Protocol monitor** tool is displayed in the **Drawer** at the bottom of DevTools. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -238,8 +240,8 @@ Adds the **CSP Violations** tool, which displays any Content Security Policy (CS ![The CSP Violations tool](index-images/csp-violations-tool.png) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -255,8 +257,8 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -269,8 +271,8 @@ See also: * [Test keyboard support using the Source Order Viewer](../accessibility/test-tab-key-source-order-viewer.md) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -283,8 +285,8 @@ See also: * [Customize keyboard shortcuts](../customize/shortcuts.md) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -295,8 +297,8 @@ Whether to include event initiators in the Timeline. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -311,8 +313,8 @@ See also: * [Introduction to the Performance tool](../evaluate-performance/index.md) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -323,8 +325,8 @@ Enables DWARF support for WebAssembly debugging. See [Improved WebAssembly debu Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -340,8 +342,8 @@ See also: * [Mapping minified code to your source code to show readable code](../sources/index.md#mapping-minified-code-to-your-source-code-to-show-readable-code) in _Sources tool overview_. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -354,8 +356,8 @@ See also: * [Pause code with breakpoints](../javascript/breakpoints.md) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -376,8 +378,8 @@ See also: * [Test text-color contrast using the Color Picker](../accessibility/color-picker.md) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -387,8 +389,8 @@ Status: Adds a button in the **Elements** tool which toggles between the DOM tree and the accessibility tree. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -423,8 +425,8 @@ See also: * [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -435,8 +437,8 @@ Enables automatic contrast issue reporting in the **Issues** tool. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -447,8 +449,8 @@ Enables experimental cookie features. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -458,8 +460,8 @@ Status: See [More precise changes in the Changes tab](https://developer.chrome.com/blog/new-in-devtools-98/#changes). Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -470,8 +472,8 @@ Whether to sync CSS changes in the **Styles** tab in the **Elements** tool. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -482,8 +484,8 @@ _new as of Microsoft Edge 106_ Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -494,8 +496,21 @@ Whether to use local overrides for response headers. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. + + + +## Enable "Delete all overrides" temporarily + + +_new as of Microsoft Edge 119_ + +Adds a **Delete all overrides** menuitem in the right-click menu for folders in the **Overrides** tab of the **Sources** tool. When you select **Delete all overrides**, a dialog appears: "Are you sure you want to delete all overrides in this folder?" + +Status: +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -512,8 +527,8 @@ See also: * [Change colors with the Color Picker](../css/reference.md#change-colors-with-the-color-picker) in _CSS features reference_ Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -528,8 +543,8 @@ Controls whether to group resources into separate **Authored** and **Deployed** * Production files (deployed files that are on the web server after compiling and bundling the source files). Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -540,8 +555,8 @@ _new as of Microsoft Edge 106_ Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -582,8 +597,8 @@ To see the Object Properties viewer in the **Sources** tool: Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -602,8 +617,8 @@ In **Settings** > **Experiments**, this **Disable the deprecated 'Color format' For now, these controls enable you to disable the experiment and re-activate the **Color format** drop-down list. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -620,8 +635,8 @@ See also: * [chrome.runtime](https://developer.chrome.com/extensions/runtime) - retrieves the background page. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -640,8 +655,35 @@ See also: * [Self-XSS](https://wikipedia.org/wiki/Self-XSS) at Wikipedia. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is not present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. + + + +## 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](./index-images/network-filter-bar-orig.png) + +Filter bar with this checkbox selected: + +![Filter bar with this checkbox selected](./index-images/network-filter-bar-redesigned.png) + +See also: +* [Filter resources](../network/index.md#filter-resources) in _Inspect network activity_. +* [Filter requests](../network/reference.md#filter-requests) in _Network features reference_. + +Status: +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is not present in Microsoft Edge Stable 118. @@ -652,8 +694,8 @@ Controls whether to log DevTools uncaught exceptions in the **Console** tool. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -674,8 +716,8 @@ The [webhint](https://webhint.io) experiment displays the webhint feedback in th ![webhint feedback in the Issues panel](./index-images/experiments-webhint.png) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -685,8 +727,8 @@ Status: Enable this experiment to view syntax errors under HTML in the **DOM** view of the **Elements** tool. For more information, see [Wavy underlines highlight code issues and improvements in Elements tool](../whats-new/2021/04/devtools.md#wavy-underlines-highlight-code-issues-and-improvements-in-elements-tool). Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -702,8 +744,8 @@ Focus Mode also provides a **Quick View** list, to open a second tool alongside See [Reduce the complexity of DevTools with Focus Mode](focus-mode.md). Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -719,13 +761,14 @@ When you select a folder to use as your Workspace, selecting any link to a file Any edits that you make in DevTools now change the file on the hard drive and sync live with Visual Studio Code. You can read about setting up your workspace in [Opening source files in Visual Studio Code](../sources/opening-sources-in-vscode.md). Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -754,8 +797,8 @@ See also: * [Debug JavaScript error stack traces by using the Crash Analyzer tool](../whats-new/2023/05/devtools-113.md#debug-javascript-error-stack-traces-by-using-the-crash-analyzer-tool) in _What's New in DevTools (Microsoft Edge 113)_. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -771,8 +814,12 @@ See also: * [Throttle the CPU while recording](../evaluate-performance/reference.md#throttle-the-cpu-while-recording) in _Performance features reference_. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. + + + @@ -788,8 +835,8 @@ Whether to include the Ignore list for JavaScript frames on the Timeline. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -803,8 +850,8 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -818,8 +865,8 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -829,8 +876,8 @@ Status: Controls whether to show invalidation tracking on the Timeline. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -840,8 +887,8 @@ Status: Controls whether to show all events on the Timeline. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -851,8 +898,8 @@ Status: Controls whether to show v8 runtime call stats on the Timeline. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -870,8 +917,8 @@ This is a programmatic way to record JavaScript execution, which can be useful i When DevTools is used to debug processes that are running in Node.js, this experiment makes whatever `console.profile` generates available to the **Performance** Tool. Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. See also: * [JavaScript Profiler tool](../javascript-profiler/javascript-profiler-tool.md) @@ -888,12 +935,13 @@ See also: * [The first time source files are loaded, breakpoints might not trigger](https://bugs.chromium.org/p/chromium/issues/detail?id=1133307&q=%22instrumentation%20breakpoints%22&can=2) Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. ## Use scope information from source maps + _new as of Microsoft Edge 118_ @@ -905,8 +953,8 @@ See also: * [Mapping minified code to your source code to show readable code](../sources/index.md#mapping-minified-code-to-your-source-code-to-show-readable-code) in _Sources tool overview_. Status: -* This checkbox is present in Microsoft Edge Canary 118. -* This checkbox is not present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. @@ -936,12 +984,13 @@ todo: how select element, where? that instruction is prominent in UI, so clarif --> Status: -* This checkbox is present in Microsoft Edge Canary 117. -* This checkbox is present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118. ## Enable Storage Buckets Tree in Application panel + _new as of Microsoft Edge 118_ @@ -953,5 +1002,5 @@ See also: * []() --> Status: -* This checkbox is present in Microsoft Edge Canary 118. -* This checkbox is not present in Microsoft Edge Stable 116. +* This checkbox is present in Microsoft Edge Canary 120. +* This checkbox is present in Microsoft Edge Stable 118.