diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md index 3d2f4fbea9..e165b86ffc 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: 06/13/2023 +ms.date: 08/22/2023 --- # Experimental features @@ -48,21 +48,27 @@ The following experimental features are turned on by default. You can use these -**Turned on by default in Microsoft Edge Canary 116:** +**Turned on by default in Microsoft Edge Canary 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) + -**Turned on by default in Microsoft Edge Stable 114:** +**Turned on by default in Microsoft Edge Stable 116:** * [Automatically pretty print minified sources](#automatically-pretty-print-minified-sources) * [Source order viewer](#source-order-viewer) * [Enable keyboard shortcut editor](#enable-keyboard-shortcut-editor) @@ -74,7 +80,9 @@ The following experimental features are turned on by default. You can use these * [Enable webhint](#enable-webhint) * [Show issues in Elements](#show-issues-in-elements) * [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) + @@ -150,26 +158,29 @@ The experiments checkboxes that appear in the latest version of the Canary previ ## Allow extensions to load custom stylesheets + 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Capture node creation stacks + 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Automatically pretty print minified sources + ## Protocol Monitor + DevTools communicates with the inspected page using the DevTools protocol. @@ -213,24 +225,26 @@ 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Show CSP Violations view + Adds the **CSP Violations** tool, which displays any Content Security Policy (CSP) violations that are detected on the inspected webpage. ![The CSP Violations tool](index-images/csp-violations-tool.png) Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Show option to expose internals in heap snapshots + _new as of Microsoft Edge 105_ @@ -241,12 +255,13 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Source order viewer + This checkbox is being removed. The Source Order Viewer is now a regular feature, not an experiment. Whether the checkbox is checked or unchecked makes no difference; the Source Order Viewer feature appears in DevTools either way. @@ -254,12 +269,13 @@ 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Enable keyboard shortcut editor + Whether to enable editing keyboard shortcuts. @@ -267,23 +283,25 @@ See also: * [Customize keyboard shortcuts](../customize/shortcuts.md) Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Timeline: event initiators + Whether to include event initiators in the Timeline. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Enable JavaScript Profiler temporarily + _new as of Microsoft Edge 114_ @@ -293,23 +311,25 @@ See also: * [Introduction to the Performance tool](../evaluate-performance/index.md) Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## WebAssembly Debugging: Enable DWARF support + Enables DWARF support for WebAssembly debugging. See [Improved WebAssembly debugging](../whats-new/2019/12/devtools.md#improved-webassembly-debugging) in _What's new in DevTools (Microsoft Edge 80)_. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. -## Console: Resolve variable names in expressions using source maps +## Resolve variable names in expressions using source maps + Uses source maps to automatically map original variable names to minified variable names when evaluating expressions. @@ -319,15 +339,28 @@ See also: * [Map the processed code to your original source code, for debugging](../javascript/source-maps.md) * [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_. -In Microsoft Edge Canary 116, the checkbox label omits the **Console:** prefix. +Status: +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. + + + +## Set all breakpoints eagerly at startup + + +Sets all possible defined breakpoints at startup. + +See also: +* [Pause code with breakpoints](../javascript/breakpoints.md) Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines + The [Advanced Perceptual Contrast Algorithm (APCA)](https://w3c.github.io/silver/guidelines/methods/Method-font-characteristic-contrast.html) replaces the [AA](https://www.w3.org/WAI/WCAG21/quickref#contrast-minimum)/[AAA](https://www.w3.org/WAI/WCAG21/quickref#contrast-enhanced) guidelines contrast ratio in the Color Picker. The Color Picker is used in the **Styles** tab in the **Elements** tool. @@ -343,34 +376,29 @@ See also: * [Test text-color contrast using the Color Picker](../accessibility/color-picker.md) Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Enable full accessibility tree view in the Elements panel + 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Enable new Font Editor tool within the Styles pane. - + See [Enable the Font Editor tool within the Styles pane](#enable-the-font-editor-tool-within-the-styles-pane) below. - - ## Enable the Font Editor tool within the Styles pane - + You can use the visual [Font Editor](../inspect-styles/edit-fonts.md) to edit fonts. Use it define fonts and font characteristics. The visual **Font Editor** helps you do the following: @@ -395,77 +423,84 @@ 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. -## Enable automatic contrast issue reporting via the Issues Panel +## Enable automatic contrast issue reporting via the Issues panel + Enables automatic contrast issue reporting in the **Issues** tool. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Enable experimental cookie features + Enables experimental cookie features. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Display more precise changes in the Changes tab + 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Sync CSS changes in the Styles pane + Whether to sync CSS changes in the **Styles** tab in the **Elements** tool. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Highlights a violating node or attribute in the Elements panel DOM tree + _new as of Microsoft Edge 106_ Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Local overrides for response headers + Whether to use local overrides for response headers. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Enable color picking outside the browser window + Allows you to move the mouse cursor when it's an eyedropper tool, over anywhere on your screen, not just within the Microsoft Edge window. @@ -477,12 +512,13 @@ 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Group sources into Authored and Deployed trees + _new as of Microsoft Edge 104_ @@ -492,23 +528,25 @@ 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Hide ignore-listed code in sources tree view + _new as of Microsoft Edge 106_ Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Highlight important DOM properties in the Object Properties viewer + _new as of Microsoft Edge 105_ @@ -544,12 +582,13 @@ To see the Object Properties viewer in the **Sources** tool: Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Disable the deprecated 'Color format' setting (requires reloading DevTools) + _new as of Microsoft Edge 110_ @@ -563,12 +602,13 @@ 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Enable background page selector (e.g. for prerendering debugging) + _new as of Microsoft Edge 114_ @@ -580,23 +620,45 @@ See also: * [chrome.runtime](https://developer.chrome.com/extensions/runtime) - retrieves the background page. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. + + + +## Show warning about Self-XSS when pasting code + + +_new as of Microsoft Edge 117_ + +Displays a warning about self cross-site scripting when code is pasted into the Console. If this checkbox is enabled, when you initially try to paste code into the Console tool, a warning message is displayed: + +"Warning: Do not paste code you do not understand or have not checked yourself into the DevTools console. This could allow attackers to steal your identity or take control of your computer. Please type 'allow pasting' below to allow pasting." + +After you enter `allow pasting` in the Console, you can paste code, in the current DevTools session and in future sessions. + +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. ## Log DevTools uncaught exceptions to Console + Controls whether to log DevTools uncaught exceptions in the **Console** tool. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Enable webhint + [webhint](https://webhint.io) is an open-source tool that provides real-time feedback for websites and local webpages. The type of feedback provided by [webhint](https://webhint.io) includes: @@ -612,22 +674,24 @@ 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Show issues in Elements + 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Focus Mode + Focus Mode is a new user interface for DevTools. Focus Mode is designed to simplify and streamline the DevTools UI, without compromising its feature set. @@ -638,12 +702,13 @@ 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## 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. @@ -654,13 +719,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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Enable Crash Analyzer + _new as of Microsoft Edge 114_ @@ -687,12 +754,13 @@ 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Enable Adaptive CPU throttling + _new as of Microsoft Edge 114_ @@ -703,8 +771,8 @@ 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. @@ -714,17 +782,19 @@ Status: ## Ignore List for JavaScript frames on Timeline + Whether to include the Ignore list for JavaScript frames on the Timeline. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Live heap profile + Controls whether to live-update the heap profile. @@ -733,12 +803,13 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Sampling heap profiler timeline + Controls whether to show the Sampling heap profiler timeline. @@ -747,42 +818,46 @@ See also: * [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Timeline: invalidation tracking + Controls whether to show invalidation tracking on the Timeline. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Timeline: show all events + Controls whether to show all events on the Timeline. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## Timeline: V8 Runtime Call Stats on Timeline + Controls whether to show v8 runtime call stats on the Timeline. Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. ## View console.profile() results in the Performance panel for Node.js + _new as of Microsoft Edge 109_ @@ -795,8 +870,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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. See also: * [JavaScript Profiler tool](../javascript-profiler/javascript-profiler-tool.md) @@ -804,6 +879,7 @@ See also: ## Enable instrumentation breakpoints + Whether to halt at test breakpoints. This experiment makes breakpoints more reliable. @@ -812,25 +888,30 @@ 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 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. -## Set all breakpoints eagerly at startup +## Use scope information from source maps -Sets all possible defined breakpoints at startup. +_new as of Microsoft Edge 118_ + +Whether to use scope information from source maps. + See also: -* [Pause code with breakpoints](../javascript/breakpoints.md) +* [Map the processed code to your original source code, for debugging](../javascript/source-maps.md) +* [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 116. -* This checkbox is not present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 118. +* This checkbox is not present in Microsoft Edge Stable 116. ## Enable Preloading Status Panel in Application panel + _new as of Microsoft Edge 110_ @@ -855,5 +936,22 @@ todo: how select element, where? that instruction is prominent in UI, so clarif --> Status: -* This checkbox is present in Microsoft Edge Canary 116. -* This checkbox is present in Microsoft Edge Stable 114. +* This checkbox is present in Microsoft Edge Canary 117. +* This checkbox is present in Microsoft Edge Stable 116. + + + +## Enable Storage Buckets Tree in Application panel + +_new as of Microsoft Edge 118_ + +Whether to enable the Storage Buckets Tree in the **Application** tool. + + + + +Status: +* This checkbox is present in Microsoft Edge Canary 118. +* This checkbox is not present in Microsoft Edge Stable 116. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/aad-symbol-server.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/aad-symbol-server.png new file mode 100644 index 0000000000..7938399bc5 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/aad-symbol-server.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/allocation-instrumentation-on-timeline.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/allocation-instrumentation-on-timeline.png new file mode 100644 index 0000000000..0c99bb8a59 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/allocation-instrumentation-on-timeline.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/device-mode-dropdown.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/device-mode-dropdown.png new file mode 100644 index 0000000000..a40133ebbc Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/device-mode-dropdown.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/icon-update-performance.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/icon-update-performance.png new file mode 100644 index 0000000000..264744b120 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/icon-update-performance.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/icon-update-sources.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/icon-update-sources.png new file mode 100644 index 0000000000..ae8842b96b Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/icon-update-sources.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/profiling-overhead-performance.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/profiling-overhead-performance.png new file mode 100644 index 0000000000..e3bb27d833 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/profiling-overhead-performance.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md new file mode 100644 index 0000000000..2101ba3374 --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md @@ -0,0 +1,156 @@ +--- +title: What's new in DevTools (Microsoft Edge 115) +description: "Improvements for connecting DevTools to Azure Artifacts symbol server. Snapshotting improvements for the Memory tool. Refreshing the DevTools icons and buttons. And more." +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.prod: microsoft-edge +ms.date: 08/18/2023 +--- +# What's New in DevTools (Microsoft Edge 115) + +[!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + +## Improvements for connecting DevTools to Azure Artifacts symbol server + + + +In Microsoft Edge 115, it's easier and more customizable to connect DevTools to Azure Artifacts symbol server. In previous versions of Microsoft Edge, to authenticate to the symbol server, you had to generate Personal Access Tokens (PATs) in Azure DevOps and then paste them into DevTools. Now, as long as you're logged into Microsoft Edge using a work account, you can connect to the symbol server by using Azure Active Directory. + + +Additionally, you can now connect to multiple symbol servers, in case you need to fetch sourcemaps from different Azure DevOps organizations. You can also filter which sourcemaps you want DevTools to fetch from the symbol server, by specifying the sourcemap URLs in an inclusion or exclusion list. + +![Connecting to symbol server using Azure Active Directory from DevTools settings](./devtools-115-images/aad-symbol-server.png) + +The message **An Azure DevOps organization must be selected** means double-click the organization, or click it and then press **Enter**. + + + +#### Wildcards + +In the **Filter behavior** text box, the following wildcards are supported: + +| Wildcard | Meaning | +|---|---| +| ? | Matches a single character. | +| * | Matches one or more of any character. | + +If you select **Exclusion List**, DevTools attempts to look up any source maps for scripts except those that have a URL that matches one of the entries in the list. + +If you select **Inclusion List**, DevTools only attempts to look up source maps for scripts that have URLs that match one of the entries in the list. For example, suppose you select **Inclusion List** in the **Filter behavior** dropdown list, and then enter the following in the **Filter behavior** text box: + +```http +https://cdn.contoso.com/* +https://packages.contoso.com/* +``` + +In this example, DevTools only attempts to resolve source maps that match these two URL patterns, and doesn't attempt to load source maps for other scripts. + + + +See also: +* [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](../../../javascript/publish-source-maps-to-azure.md) +* [Securely debug original code by using Azure Artifacts symbol server source maps](../../../javascript/consume-source-maps-from-azure.md) + + + +## Memory tool enhancements + + + +In previous versions of Microsoft Edge, in the **Memory** tool, when using the **Allocation instrumentation on timeline** option, the **Memory** tool takes a sample of the heap every 50 milliseconds. However, taking a sample of the heap scales with the size of the heap, so with a heap size of 200 MB, the sample actually takes 1.5 seconds to generate. As a result, there's little time left on the main thread for your website, outside of generating heap samples. When **Allocation instrumentation on timeline** is running, it might look like your web content is hanging or blocked. + +In Microsoft Edge 115, the sample rate for the heap now scales to the time it takes to generate a sample, freeing up the main thread so that you can interact with your web content while profiling. + +![The "Allocation instrumentation on timeline" profiling option in the Memory tool](./devtools-115-images/allocation-instrumentation-on-timeline.png) + +Additionally, in previous versions of Microsoft Edge, heap snapshots would sometimes include objects that should have been garbage-collected (GC'd). In Microsoft Edge 115, this issue has been fixed and heap snapshots are now more accurate. + +See also: +* [Limit proportion of CPU time given to requestHeapStatsUpdate (4469909) · Gerrit Code Review](https://chromium-review.googlesource.com/c/v8/v8/+/4469909) +* [Make heap snapshots more precise (4499405) · Gerrit Code Review](https://chromium-review.googlesource.com/c/v8/v8/+/4499405) + + + +## Refreshed DevTools icons and buttons + + + +In Microsoft Edge 115, the DevTools UI has gotten a makeover with new icons and buttons. For example, when debugging in the **Sources** tool, the current frame in the call stack is indicated by a right-pointing blue arrow. This icon is more consistent with the debugging icons in Microsoft Visual Studio and Microsoft Visual Studio Code: + +![The right-pointing blue arrow icon for the current frame in the call stack](./devtools-115-images/icon-update-sources.png) + +In previous versions of Microsoft Edge, in the **Bottom-Up** view in the **Performance** tool, the triangle buttons for collapsing and expanding the recorded activities rendered incorrectly. In Microsoft Edge 115, this issue has been fixed and you can now expand and collapse individual activities to see which functions are calling them: + +![The triangle icons for expanding and collapsing activities in the Bottom-Up view](./devtools-115-images/icon-update-performance.png) + +See also: +* [Step through code](../../../javascript/reference.md#step-through-code) in _JavaScript debugging features_. +* [The Bottom-Up tab](../../../evaluate-performance/reference.md#the-bottom-up-tab) in _Performance features reference_. + + + +## Screen readers correctly announce dropdown state in Device Mode + + + +In previous versions of Microsoft Edge, in Device Mode, screen readers incorrectly announced the state of dropdown menus as "expanded" when these menus were actually collapsed. In Microsoft Edge 115, this issue has been fixed and screen readers now correctly announce the state of dropdown menus in Device Mode as "collapsed" or "expanded": + +![The 'Throttling' dropdown menu expanded in Device Mode](./devtools-115-images/device-mode-dropdown.png) + +See also: +* [Emulate mobile devices (Device Emulation)](../../../device-mode/index.md) + + + +## Profiling improvements for the Performance tool + + + +When recording a profile in the **Performance** tool, the V8 JavaScript engine takes periodic samples of all the JavaScript functions that are running, to accurately report CPU time in the flame chart. When profiling a website that has many cross-domain iframes, these samples take a long time to collect. This results in significant overhead, slowing down the main thread, which slows down the performance of the website while profiling. In Microsoft Edge 115 on Windows, V8 collects these samples more efficiently, resulting in better site performance while profiling. + +Additionally, in the **Performance** tool, you can now see a representation of profiler overhead in the flame chart when recording a profile. This block of time represents the CPU time that's needed to sample and parse events when recording a profile, and doesn't represent CPU time that the users of your website are actually encountering. **Profiling Overhead** events have been added to the flame chart to help focus your performance investigations on **Compile Code** and **Evaluate Script** events that affect your actual users, rather than events that only take time while you're profiling in the **Performance** tool: + +![The "Profiling Overhead" block of time in a recorded Performance profile](./devtools-115-images/profiling-overhead-performance.png) + +See also: +* [Avoid busy-waiting in sampler thread if Windows supports precise sleep (4453767) · Gerrit Code Review](https://chromium-review.googlesource.com/c/v8/v8/+/4453767) +* [Show V8.FinalizeDeserialization time as profiler overhead (4504370) · Gerrit Code Review](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4504370) +* [Issue 1428605: V8's code cache deserialization is 2-4× slower than a regular uncached compilation when CPU profiling is enabled](https://bugs.chromium.org/p/chromium/issues/detail?id=1428605) + + + +## Announcements from the Chromium project + +Microsoft Edge 115 also includes the following updates from the Chromium project: + +* [Elements improvements](https://developer.chrome.com/blog/new-in-devtools-115/#elements) + * [New CSS subgrid badge](https://developer.chrome.com/blog/new-in-devtools-115/#subgrid) + * [Selector specificity in tooltips](https://developer.chrome.com/blog/new-in-devtools-115/#specificity) + * [Values of custom CSS properties in tooltips](https://developer.chrome.com/blog/new-in-devtools-115/#css-variable-values) +* [Sources improvements](https://developer.chrome.com/blog/new-in-devtools-115/#sources) + * [CSS syntax highlighting](https://developer.chrome.com/blog/new-in-devtools-115/#css) + * [Shortcut to set conditional breakpoints](https://developer.chrome.com/blog/new-in-devtools-115/#breakpoint) +* [Application > Bounce Tracking Mitigations](https://developer.chrome.com/blog/new-in-devtools-115/#bounce-tracking) +* [Ignore content scripts by default](https://developer.chrome.com/blog/new-in-devtools-115/#content-script) +* [Network > Response pretty-printing by default](https://developer.chrome.com/blog/new-in-devtools-115/#network) + + + + + + + + + + + + diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/whats-new-archive.md b/microsoft-edge/devtools-guide-chromium/whats-new/whats-new-archive.md index 6fff8c94da..b7a8c50011 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/whats-new-archive.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/whats-new-archive.md @@ -13,6 +13,7 @@ The following What's New entries cover older releases. +* [What's New in DevTools (Microsoft Edge 105)](2022/09/devtools-105.md) * [What's New in DevTools (Microsoft Edge 104)](2022/08/devtools-104.md) * [What's New in DevTools (Microsoft Edge 103)](2022/06/devtools-103.md) * [What's New in DevTools (Microsoft Edge 102)](2022/05/devtools-102.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md b/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md index ea062aa944..360552a60a 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md @@ -5,7 +5,7 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge -ms.date: 03/02/2023 +ms.date: 08/18/2023 --- # What's New in Microsoft Edge DevTools @@ -16,6 +16,7 @@ ms.date: 03/02/2023 * move eleventh oldest link into whats-new-archive.md --> +* [What's New in DevTools (Microsoft Edge 115)](2023/07/devtools-115.md) * [What's New in DevTools (Microsoft Edge 114)](2023/06/devtools-114.md) * [What's New in DevTools (Microsoft Edge 113)](2023/05/devtools-113.md) * [What's New in DevTools (Microsoft Edge 112)](2023/04/devtools-112.md) @@ -25,5 +26,4 @@ ms.date: 03/02/2023 * [What's New in DevTools (Microsoft Edge 108)](2022/12/devtools-108.md) * [What's New in DevTools (Microsoft Edge 107)](2022/10/devtools-107.md) * [What's New in DevTools (Microsoft Edge 106)](2022/09/devtools-106.md) -* [What's New in DevTools (Microsoft Edge 105)](2022/09/devtools-105.md) * [What's New in DevTools archive](./whats-new-archive.md) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index df3a3bfad7..1710cd458a 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -33,6 +33,9 @@ # What's New pages ------------------------------------------------------------ # also add new pages to nav page: /whats-new/whats-new.md # move eleventh oldest into Archive bucket + - name: Microsoft Edge 115 + href: devtools-guide-chromium/whats-new/2023/07/devtools-115.md + - name: Microsoft Edge 114 href: devtools-guide-chromium/whats-new/2023/06/devtools-114.md @@ -60,15 +63,15 @@ - name: Microsoft Edge 106 href: devtools-guide-chromium/whats-new/2022/09/devtools-106.md - - name: Microsoft Edge 105 - href: devtools-guide-chromium/whats-new/2022/09/devtools-105.md - # keep 10 items above - name: Archive items: - name: What's New in DevTools archive href: devtools-guide-chromium/whats-new/whats-new-archive.md + - name: Microsoft Edge 105 + href: devtools-guide-chromium/whats-new/2022/09/devtools-105.md + - name: Microsoft Edge 104 href: devtools-guide-chromium/whats-new/2022/08/devtools-104.md