diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md index e4a48be0d0..728f6d1f43 100644 --- a/microsoft-edge/dev-videos/index.md +++ b/microsoft-edge/dev-videos/index.md @@ -42,17 +42,17 @@ Covers: * See also: -* [What's New in DevTools (Microsoft Edge 125)](../devtools/whats-new/2024/05/devtools-125.md) -* [What's New in DevTools (Microsoft Edge 124)](../devtools/whats-new/2024/04/devtools-124.md) -* [What's New in DevTools (Microsoft Edge 123)](../devtools/whats-new/2024/03/devtools-123.md) -* [What's New in DevTools (Microsoft Edge 122)](../devtools/whats-new/2024/02/devtools-122.md) -* [What's New in DevTools (Microsoft Edge 121)](../devtools/whats-new/2024/01/devtools-121.md) -* [What's New in DevTools (Microsoft Edge 120)](../devtools/whats-new/2023/12/devtools-120.md) -* [What's New in DevTools (Microsoft Edge 119)](../devtools/whats-new/2023/11/devtools-119.md) -* [What's New in DevTools (Microsoft Edge 118)](../devtools/whats-new/2023/10/devtools-118.md) -* [What's New in DevTools (Microsoft Edge 117)](../devtools/whats-new/2023/09/devtools-117.md) -* [What's New in DevTools (Microsoft Edge 116)](../devtools/whats-new/2023/08/devtools-116.md) -* [What's New in DevTools (Microsoft Edge 115)](../devtools/whats-new/2023/07/devtools-115.md) +* [What's new in DevTools (Microsoft Edge 125)](../devtools/whats-new/2024/05/devtools-125.md) +* [What's new in DevTools (Microsoft Edge 124)](../devtools/whats-new/2024/04/devtools-124.md) +* [What's new in DevTools (Microsoft Edge 123)](../devtools/whats-new/2024/03/devtools-123.md) +* [What's new in DevTools (Microsoft Edge 122)](../devtools/whats-new/2024/02/devtools-122.md) +* [What's new in DevTools (Microsoft Edge 121)](../devtools/whats-new/2024/01/devtools-121.md) +* [What's new in DevTools (Microsoft Edge 120)](../devtools/whats-new/2023/12/devtools-120.md) +* [What's new in DevTools (Microsoft Edge 119)](../devtools/whats-new/2023/11/devtools-119.md) +* [What's new in DevTools (Microsoft Edge 118)](../devtools/whats-new/2023/10/devtools-118.md) +* [What's new in DevTools (Microsoft Edge 117)](../devtools/whats-new/2023/09/devtools-117.md) +* [What's new in DevTools (Microsoft Edge 116)](../devtools/whats-new/2023/08/devtools-116.md) +* [What's new in DevTools (Microsoft Edge 115)](../devtools/whats-new/2023/07/devtools-115.md) --> @@ -99,8 +99,8 @@ Covers: * `console.table()`. See also: -* [What's New in DevTools (Microsoft Edge 114)](../devtools/whats-new/2023/06/devtools-114.md) -* [What's New in DevTools (Microsoft Edge 113)](../devtools/whats-new/2023/05/devtools-113.md) +* [What's new in DevTools (Microsoft Edge 114)](../devtools/whats-new/2023/06/devtools-114.md) +* [What's new in DevTools (Microsoft Edge 113)](../devtools/whats-new/2023/05/devtools-113.md) @@ -119,7 +119,7 @@ Covers: * How to change themes in DevTools. See also: -* [What's New in DevTools (Microsoft Edge 112)](../devtools/whats-new/2023/04/devtools-112.md) +* [What's new in DevTools (Microsoft Edge 112)](../devtools/whats-new/2023/04/devtools-112.md) * [Analyze CSS selector performance during Recalculate Style events](../devtools/performance/selector-stats.md) - CSS selector stats. * [View a JSON file or server response with formatting](../web-platform/json-viewer.md) @@ -142,7 +142,7 @@ Covers: * Customize the **Network** tool's columns. See also: -* [What's New in DevTools (Microsoft Edge 111)](../devtools/whats-new/2023/03/devtools-111.md) +* [What's new in DevTools (Microsoft Edge 111)](../devtools/whats-new/2023/03/devtools-111.md) * [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](../devtools/javascript/publish-source-maps-to-azure.md) @@ -161,7 +161,7 @@ Covers: * Simulate `prefers-color-scheme`. See also: -* [What's New in DevTools (Microsoft Edge 110)](../devtools/whats-new/2023/02/devtools-110.md) +* [What's new in DevTools (Microsoft Edge 110)](../devtools/whats-new/2023/02/devtools-110.md) * [Overview of DevTools](../devtools/overview.md) @@ -173,7 +173,7 @@ January 17, 2023 [![Thumbnail image for video "What's new in DevTools 109"](./index-images/devtools-whatsnew-109.png)](https://www.youtube.com/watch?v=b-q-PLmO-ns) Covers: -* Enhanced traces to share memory and performance recordings. +* Share memory and performance traces with more data. * Selector Stats in the **Performance** tool. * Track garbage-collected (GC'd) objects in the **Memory** tool. * Heap Snapshot visualizer extension. @@ -182,8 +182,9 @@ Covers: * Inspecting elements. See also: -* [What's New in DevTools (Microsoft Edge 109)](../devtools/whats-new/2023/01/devtools-109.md) -* [Share enhanced performance and memory traces](../devtools/experimental-features/share-traces.md) +* [What's new in DevTools (Microsoft Edge 109)](../devtools/whats-new/2023/01/devtools-109.md) +* [Share a memory trace with more data](../devtools/experimental-features/share-memory-traces.md) +* [Share a performance trace with more data](../devtools/performance/share-performance-traces.md) * [Analyze CSS selector performance during Recalculate Style events](../devtools/performance/selector-stats.md) - selector stats. * [Investigate memory allocation, with reduced garbage ("Include objects" checkboxes)](../devtools/rendering-tools/js-runtime.md#investigate-memory-allocation-with-reduced-garbage-include-objects-checkboxes) in _Speed up JavaScript runtime ("Allocation sampling" profiling type)_. * [Trash talk: the Orinoco garbage collector](https://v8.dev/blog/trash-talk) @@ -207,7 +208,7 @@ Covers: * Use Detached Elements to find DOM leaks. See also: -* [What's New in DevTools (Microsoft Edge 108)](../devtools/whats-new/2022/12/devtools-108.md) +* [What's new in DevTools (Microsoft Edge 108)](../devtools/whats-new/2022/12/devtools-108.md) * [Create a DevTools extension, adding a custom tool tab and panel](../extensions/developer-guide/devtools-extension.md) * [The heap snapshot file format](../devtools/memory-problems/heap-snapshot-schema.md) * [Microsoft Edge WebDriver](https://developer.microsoft.com/microsoft-edge/tools/webdriver/?form=MA13LH) - download Edge WebDriver. @@ -232,7 +233,7 @@ Covers: * Customize shortcuts. See also: -* [What's New in DevTools (Microsoft Edge 107)](../devtools/whats-new/2022/10/devtools-107.md) +* [What's new in DevTools (Microsoft Edge 107)](../devtools/whats-new/2022/10/devtools-107.md) @@ -278,7 +279,7 @@ Covers: * Using Snippets. See also: -* [What's New in DevTools (Microsoft Edge 106)](../devtools/whats-new/2022/09/devtools-106.md) +* [What's new in DevTools (Microsoft Edge 106)](../devtools/whats-new/2022/09/devtools-106.md) @@ -728,7 +729,7 @@ Covers: * The Visual Studio Code debugger integrates with the DevTools Extension for VS Code. See also: -* [What's New in DevTools (Microsoft Edge 93)](../devtools/whats-new/2021/07/devtools.md) +* [What's new in DevTools (Microsoft Edge 93)](../devtools/whats-new/2021/07/devtools.md) diff --git a/microsoft-edge/devtools/crash-analyzer/index.md b/microsoft-edge/devtools/crash-analyzer/index.md index dbe874ed04..d99b85bdf8 100644 --- a/microsoft-edge/devtools/crash-analyzer/index.md +++ b/microsoft-edge/devtools/crash-analyzer/index.md @@ -258,6 +258,6 @@ External links: diff --git a/microsoft-edge/devtools/css/css-in-js.md b/microsoft-edge/devtools/css/css-in-js.md index 94556fa607..feebedfdda 100644 --- a/microsoft-edge/devtools/css/css-in-js.md +++ b/microsoft-edge/devtools/css/css-in-js.md @@ -48,7 +48,7 @@ To learn more about viewing and changing CSS, see [CSS features reference](refer ## Editing style rules that were initially defined by a CSSOM function - + The **Styles** pane supports editing styles that were created with the [CSS Object Model (CSSOM)](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) APIs. Many CSS-in-JS frameworks and libraries use the CSS Object Model APIs under the hood to construct styles. diff --git a/microsoft-edge/devtools/experimental-features/index.md b/microsoft-edge/devtools/experimental-features/index.md index 2bd0319263..389ed51f05 100644 --- a/microsoft-edge/devtools/experimental-features/index.md +++ b/microsoft-edge/devtools/experimental-features/index.md @@ -174,7 +174,7 @@ Status: ## Show option to expose internals in heap snapshots +[Heap snapshot improvements](../whats-new/2024/08/devtools-128.md#heap-snapshot-improvements) in _What's new in DevTools (Microsoft Edge 128)_ links to here --> _new as of Microsoft Edge 105_ @@ -202,7 +202,7 @@ APCA is a new way to compute contrast. It is based on modern research on color * Spatial properties of context that include ambient light, surroundings, and intended purpose. See also: -* [New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)](../whats-new/2021/01/devtools.md#new-color-contrast-calculation---advanced-perceptual-contrast-algorithm-apca) in _What's New in DevTools (Microsoft Edge 89)_. +* [New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)](../whats-new/2021/01/devtools.md#new-color-contrast-calculation---advanced-perceptual-contrast-algorithm-apca) in _What's new in DevTools (Microsoft Edge 89)_. * [Change colors with the Color Picker](../css/reference.md#change-colors-with-the-color-picker) in _CSS features reference_. * [Test text-color contrast using the Color Picker](../accessibility/color-picker.md) @@ -231,7 +231,7 @@ The Accessibility Tree view in the **Elements** tool: See also: * [Test accessibility using the Accessibility tab](../accessibility/accessibility-tab.md) -* [Full accessibility tree view in the Elements tool](../whats-new/2021/02/devtools.md#full-accessibility-tree-view-in-the-elements-tool) in _What's New in DevTools (Microsoft Edge 90)_. +* [Full accessibility tree view in the Elements tool](../whats-new/2021/02/devtools.md#full-accessibility-tree-view-in-the-elements-tool) in _What's new in DevTools (Microsoft Edge 90)_. Status: * This checkbox is present in Microsoft Edge Canary 144. @@ -359,7 +359,7 @@ See also: * [Performance recording event reference](../performance/performance-reference.md) * [postMessage Trace Events demo (rendered)](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) * [postMessage Trace Events demo (source code)](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) -* [postMessage events and handlers are distinguished from other events](../whats-new/2024/04/devtools-124.md#postmessage-events-and-handlers-are-distinguished-from-other-events) in _What's New in DevTools (Microsoft Edge 124)_. +* [postMessage events and handlers are distinguished from other events](../whats-new/2024/04/devtools-124.md#postmessage-events-and-handlers-are-distinguished-from-other-events) in _What's new in DevTools (Microsoft Edge 124)_. Status: * This checkbox is present in Microsoft Edge Canary 144. @@ -419,7 +419,7 @@ pointing to this anchor wording --> Displays syntax errors as wavy underlines under DOM nodes in the **Elements** tool. See also: -* [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) in _What's New in DevTools (Microsoft Edge 91)_. +* [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) in _What's new in DevTools (Microsoft Edge 91)_. Status: * This checkbox is present in Microsoft Edge Canary 144. @@ -544,44 +544,6 @@ Status: * This checkbox is present in Microsoft Edge Stable 142. - -## 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 not present in Microsoft Edge Canary 144. -* This checkbox is present in Microsoft Edge Stable 142. - -See also: -* [Share enhanced performance and memory traces](../experimental-features/share-traces.md) -* [Performance features reference](../performance/reference.md) -* [Performance recording event reference](../performance/performance-reference.md) - - - -## 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 not present in Microsoft Edge Canary 144. -* This checkbox is present in Microsoft Edge Stable 142. - -See also: -* [Share enhanced performance and memory traces](../experimental-features/share-traces.md) -* [Performance features reference](../performance/reference.md) -* [Performance recording event reference](../performance/performance-reference.md) - - ## Performance panel: Enable debug mode (trace event details, etc) @@ -595,7 +557,7 @@ Status: * This checkbox is present in Microsoft Edge Stable 142. See also: -* [Share enhanced performance and memory traces](../experimental-features/share-traces.md) +* [Share a performance trace with more data](../performance/share-performance-traces.md) * [Performance features reference](../performance/reference.md) * [Performance recording event reference](../performance/performance-reference.md) diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/close-icon.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/close-icon.png new file mode 100644 index 0000000000..53d0a08e79 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/close-icon.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/enhanced-trace-options.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/enhanced-trace-options.png new file mode 100644 index 0000000000..7389da6c7d Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/enhanced-trace-options.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/exporting-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/exporting-memory-trace.png new file mode 100644 index 0000000000..b942b08900 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/exporting-memory-trace.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/importing-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/importing-memory-trace.png new file mode 100644 index 0000000000..50f47dab17 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/importing-memory-trace.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/load-profile-icon.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/load-profile-icon.png new file mode 100644 index 0000000000..48579d69d9 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/load-profile-icon.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/opening-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/opening-memory-trace.png similarity index 100% rename from microsoft-edge/devtools/experimental-features/share-traces-images/opening-memory-trace.png rename to microsoft-edge/devtools/experimental-features/share-memory-traces-images/opening-memory-trace.png diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/save-profile-icon.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/save-profile-icon.png new file mode 100644 index 0000000000..ebb079ac7f Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/save-profile-icon.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/saving-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/saving-memory-trace.png new file mode 100644 index 0000000000..8023dfedb0 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/saving-memory-trace.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/set-default-memory-trace-type.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/set-default-memory-trace-type.png new file mode 100644 index 0000000000..843137dce3 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/set-default-memory-trace-type.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/settings-button-icon.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/settings-button-icon.png new file mode 100644 index 0000000000..4f03826c96 Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/settings-button-icon.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces-images/take-heap-snapshot-icon.png b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/take-heap-snapshot-icon.png new file mode 100644 index 0000000000..05db6b1fed Binary files /dev/null and b/microsoft-edge/devtools/experimental-features/share-memory-traces-images/take-heap-snapshot-icon.png differ diff --git a/microsoft-edge/devtools/experimental-features/share-memory-traces.md b/microsoft-edge/devtools/experimental-features/share-memory-traces.md new file mode 100644 index 0000000000..d54b5b9d1b --- /dev/null +++ b/microsoft-edge/devtools/experimental-features/share-memory-traces.md @@ -0,0 +1,178 @@ +--- +title: Share a memory trace with more data +description: Learn to export and import memory traces with more data in DevTools to resolve low performance and high memory usage issues in your webpages +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 11/17/2025 +--- +# Share a memory trace with more data + +The **Memory** tool records runtime data about your webpage. Exploring the recorded data makes it possible to improve your webpage's memory usage. + +Additionally, the recorded data can be exported to files on disk. The exported files are called _traces_. + +Exporting memory traces is useful when you want to share these files with other people to get help with investigating issues. + + + +#### File formats + +A trace file can be imported in DevTools at any time. By default, these traces contain minimal information about the runtime data from the traced webpage. + +An exported trace can be a basic `.heapsnapshot`, `.heapprofile`, or `.heaptimeline` file. + +A memory trace can also be saved as a `.devtools` file, which contains much more runtime data from the traced webpage. Advantages of the `.devtools` file format: + +* This makes it easier to resolve memory issues, by recreating the environment in which the trace was recorded, and by providing original source files. + +* This makes it possible to reliably resolve source code references found in imported traces to the actual runtime code in the **Sources** tool. + +* If source maps were present when a trace was recorded, or if they are stored on the [Azure Artifacts Symbol Server](../javascript/consume-source-maps-from-azure.md), it's also possible to resolve code references to their original source code. + + + +#### Browser compatibility + +* `.heapsnapshot`, `.heapprofile`, and `.heaptimeline` trace files are compatible with Microsoft Edge and other browsers that are based on the Chromium engine. + +* `.devtools` traces can only be imported in Microsoft Edge. + + + +## Set the default memory trace type + +By default, the **Memory** tool exports data as `.heapsnapshot`, `.heapprofile`, or `.heaptimeline` trace files. + +To change the default trace type to `.devtools`: + +1. Open DevTools by pressing **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). + +1. In DevTools, in the upper right, select **Customize and control DevTools** > **Settings** (![Settings button](./share-memory-traces-images/settings-button-icon.png)). **Settings** opens, with the **Preferences** page selected. + +1. In the **Persistence** section of the **Preferences** page, use the **Export .devtools memory traces** checkbox to control the default type. + + ![The Settings panel in DevTools, showing the export type option](./share-memory-traces-images/set-default-memory-trace-type.png) + + + +## Set the export options for memory traces + +Memory traces that are `.devtools` files always include source maps when they're available, and can optionally include console messages, script sources, and DOM elements. + +To control whether console messages, script sources, or DOM elements are included in memory traces: + +1. Open DevTools by pressing **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). + +1. In DevTools, in the upper right, select **Customize and control DevTools** > **Settings** (![Settings button](./share-memory-traces-images/settings-button-icon.png)). **Settings** opens, with the **Preferences** page selected. + +1. Scroll down to the **Persistence** section: + + ![The Settings panel in DevTools, showing the trace options](./share-memory-traces-images/enhanced-trace-options.png) + +1. Use these checkboxes to control what to include: + + * **Include console messages in .devtools memory traces** + + * **Include script sources in .devtools memory traces** + + * **Include DOM snapshots in .devtools memory traces (experimental)** + +1. In the upper right of DevTools, click the **Close** (![Close icon](./share-memory-traces-images/close-icon.png)) button. + + + +## Export a trace from the Memory tool + +To export memory information from the **Memory** tool: + +1. Open the **Memory** tool. + +1. Select the option button for the type of memory recording you're interested in, such as the **Heap snapshot** option button. + + The following instructions are similar if you choose a different memory recording type, per [Fix memory problems](../memory-problems/index.md). + + **In the case of a heap snapshot:** + +1. Click the **Take heap snapshot** (![Take heap snapshot icon](./share-memory-traces-images/take-heap-snapshot-icon.png)) button at top, or the **Take snapshot** button at bottom. + + The snapshot is recorded and displayed. + +1. In the toolbar, select the **Save profile** (![Save profile icon](./share-memory-traces-images/save-profile-icon.png)) button: + + ![Microsoft Edge with DevTools, showing the Memory tool, with the Save button](./share-memory-traces-images/exporting-memory-trace.png) + + Or, in the **Memory** tool sidebar, hover over the new snapshot's entry, and then select **Save profile**. + + The **Save As** dialog opens: + + ![The Save As dialog in Windows, showing the memory trace file being saved in a traces folder](./share-memory-traces-images/saving-memory-trace.png) + +1. Navigate to a folder in which to save the trace file on your disk. + +1. In the **File name** text box, adjust the file name if desired. + +1. In the **File name** text box, keep or modify the extension that's specified after the file name. + + + + * `.devtools` includes console messages, script sources, and DOM elements. + + * `.heapsnapshot`, `.heapprofile`, or `.heaptimeline` omits console messages, script sources, and DOM elements. + + Which extension is initially displayed is controlled by a DevTools setting; see [Set the default memory trace type](#set-the-default-memory-trace-type), above. + +1. Click the **Save** button. + + The **Save As** dialog closes, and the file is saved to disk. + + + +## Import a trace in the Memory tool + +To import a trace in the **Memory** tool: + +1. Open the **Memory** tool: + + ![Microsoft Edge, showing the Memory tool in DevTools, with the Load button](./share-memory-traces-images/importing-memory-trace.png) + +1. Click the **Load profile** (![Load profile icon](./share-memory-traces-images/load-profile-icon.png)) button at the top. Or, click the **Load profile** button at the bottom. + + The **Open** dialog is displayed. + +1. In the lower left dropdown list (a filter), select file types to display: + + * **Performance traces (*.devtools; *.json)** - _Used with the **Performance** tool._ + * **Heap snapshots (*.devtools; *.heapsnapshot)** + * **Heap timelines (*.devtools; *.heaptimeline)** + * **Sampled heap profiles (*.devtools; *.heapprofile)** + +1. Locate the trace file on your disk, and then select it. + + The trace file is either a `.devtools` file, or a `.heapsnapshot`, `.heaptimeline`, or `.heapprofile` file. + + ![The Windows open dialog, showing a memory trace file](./share-memory-traces-images/opening-memory-trace.png) + +1. Click the **Open** button. + + If it's a `.devtools` file, a new DevTools window appears, showing the memory information and the extra runtime information that was recorded displayed in the **Sources**, **Console**, and **Elements** tools. + + Otherwise, the memory information appears in the **Memory** tool, and the rest of the DevTools tabs continue to show information related to the current webpage. + + + +## See also + + +* [Share performance traces with more data](../performance/share-performance-traces.md) +* [Fix memory problems](../memory-problems/index.md) +* [Azure Artifacts Symbol Server](../javascript/consume-source-maps-from-azure.md) diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/choose-trace-type-on-export.png b/microsoft-edge/devtools/experimental-features/share-traces-images/choose-trace-type-on-export.png deleted file mode 100644 index bc5704ac56..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/choose-trace-type-on-export.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/enhanced-trace-options.png b/microsoft-edge/devtools/experimental-features/share-traces-images/enhanced-trace-options.png deleted file mode 100644 index 24e37cca6d..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/enhanced-trace-options.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/export-icon.png b/microsoft-edge/devtools/experimental-features/share-traces-images/export-icon.png deleted file mode 100644 index 2084c18150..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/export-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-memory-trace.png deleted file mode 100644 index d4e6da1e43..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-memory-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-perf-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-perf-trace.png deleted file mode 100644 index 47d58ea646..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/exporting-perf-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/import-icon.png b/microsoft-edge/devtools/experimental-features/share-traces-images/import-icon.png deleted file mode 100644 index ebf426704d..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/import-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/importing-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/importing-memory-trace.png deleted file mode 100644 index 9dfd121652..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/importing-memory-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/importing-perf-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/importing-perf-trace.png deleted file mode 100644 index 78e8218622..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/importing-perf-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/opening-perf-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/opening-perf-trace.png deleted file mode 100644 index 812692c525..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/opening-perf-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/saving-memory-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/saving-memory-trace.png deleted file mode 100644 index 5278413ca3..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/saving-memory-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/saving-perf-trace.png b/microsoft-edge/devtools/experimental-features/share-traces-images/saving-perf-trace.png deleted file mode 100644 index 669f32e0c7..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/saving-perf-trace.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/settings-button-icon.png b/microsoft-edge/devtools/experimental-features/share-traces-images/settings-button-icon.png deleted file mode 100644 index 1521389268..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/settings-button-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces-images/trace-type-setting.png b/microsoft-edge/devtools/experimental-features/share-traces-images/trace-type-setting.png deleted file mode 100644 index 6f5856c0af..0000000000 Binary files a/microsoft-edge/devtools/experimental-features/share-traces-images/trace-type-setting.png and /dev/null differ diff --git a/microsoft-edge/devtools/experimental-features/share-traces.md b/microsoft-edge/devtools/experimental-features/share-traces.md deleted file mode 100644 index 775548be92..0000000000 --- a/microsoft-edge/devtools/experimental-features/share-traces.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Share enhanced performance and memory traces -description: Learn to export and import enhanced performance and memory traces in DevTools to resolve low performance and high memory usage issues in your webpages -author: MSEdgeTeam -ms.author: msedgedevrel -ms.topic: article -ms.service: microsoft-edge -ms.subservice: devtools -ms.date: 01/06/2023 ---- -# Share enhanced performance and memory traces - -The **Performance** and **Memory** tools record runtime data about your webpage. Exploring the recorded data makes it possible to improve your webpage's memory usage or runtime performance. - -Additionally, the recorded data can be exported to files on disk. The exported files are called _traces_. - -Exporting performance and memory traces is useful when you want to share these files with other people to get help with investigating issues. An exported trace is a `.json`, `.heapsnapshot`, `.heapprofile`, or `.heaptimeline` file which can be imported in DevTools at any time. - -By default, traces contain minimal information about the runtime data from the traced webpage, but traces can also be exported as _enhanced traces_, as an experimental feature. An enhanced trace is a `.devtools` file which contains much more runtime data from the traced webpage. Enhanced traces make it easier to resolve performance and memory issues, by recreating the environment in which the trace was recorded, and by providing original source files. - -Using enhanced traces makes it possible to reliably resolve source code references found in imported traces to the actual runtime code in the **Sources** tool. Additionally, if source maps were present when a trace was recorded, or if they are stored on the [Azure Artifacts Symbol Server](../javascript/consume-source-maps-from-azure.md), it will also be possible to resolve code references to their original source code. - - - -## Differences between normal and enhanced traces - -#### Normal traces - -A normal trace only contains some of the information that's present in a webpage. Much of the original code is lost and only the recorded performance or memory data of the webpage is preserved in the trace. For example, when importing a `.heapsnapshot` memory trace that was recorded during another DevTools session or on another computer, there's no way to go from an object in the **Memory** tool to its constructor in the **Sources** tool. - -Similarly, in the **Performance** tool, when you import a performance trace recorded earlier: - -* The trace needs to have been recorded on the same site and same configuration to be able to map from the performance report to the JavaScript that was running in the browser. -* If file or function names have changed since the recording was taken, the mapping is prone to errors. - -#### Enhanced traces - -An enhanced trace retains much more information about the webpage where the recording took place. For example, an enhanced trace contains the execution context and the list of parsed scripts, and can optionally contain console messages, script sources, and a snapshot of the DOM tree. - -When an enhanced trace is imported in DevTools, a new DevTools window appears. This new window isn't connected to the webpage that's running in your browser, and instead re-creates part of the environment in which the trace was originally recorded. - -For example, if a snapshot of the DOM was recorded in the enhanced trace, the **Elements** tool displays this snapshot. If console messages were recorded, the **Console** tool prints these messages. The **Sources** tool displays the scripts that were present during the recording. - -Enhanced traces can only be imported in Microsoft Edge, while normal traces are compatible with other browsers based on the Chromium engine. - - - -## Set the default trace type - -By default, the **Performance** and **Memory** tools export data as normal traces, but you can set the default trace type to `enhanced`. - -To change the trace type: - -1. Open DevTools by pressing **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). - -1. In DevTools, in the upper right, click **Settings** (![Settings button](./share-traces-images/settings-button-icon.png)). **Settings** opens, with the **Preferences** page selected. - -1. In the **Persistence** section of the **Preferences** page, select the **Export enhanced performance and memory traces** checkbox: - - ![The Settings panel in DevTools, with the enhanced traces option checked](./share-traces-images/trace-type-setting.png) - -1. Enhanced traces can also optionally include console messages, script sources, and DOM elements. To control what to include in enhanced traces, use these checkboxes: - - * **Include console message in enhanced traces**. - * **Include script sources in enhanced traces**. - * **Include DOM snapshots in enhanced traces (experimental)**. - - ![The Settings panel in DevTools, showing the other enhanced trace options](./share-traces-images/enhanced-trace-options.png) - - - -## Export a trace from the Performance tool - -To export a performance recording from the **Performance** tool: - -1. Open the **Performance** tool. - -1. Click **Record** and run the scenario you want to investigate the performance of by interacting with the webpage, and then click **Stop**. - -1. When the performance profile appears, click **Save profile** (![Save profile button](./share-traces-images/export-icon.png)): - - ![Microsoft Edge with DevTools, showing the Performance tool, with the Save profile button](./share-traces-images/exporting-perf-trace.png) - -1. Choose a location to save the trace file on your disk: - - ![The Windows save dialog, showing the performance trace file being saved in a traces folder](./share-traces-images/saving-perf-trace.png) - - The trace is a `.json` file if you set the default trace type to normal, and it is a `.devtools` file if you set the default trace type to enhanced. - - - -## Export a trace from the Memory tool - -To export memory information from the **Memory** tool: - -1. Open the **Memory** tool. - -1. Choose the type of memory recording you're interested in, such as **Heap Snapshot**. The following instructions are similar if you choose a different memory recording type. To learn more about the different memory recording types, see [Fix memory problems](../memory-problems/index.md). - -1. Click **Take Snapshot**. - -1. When the snapshot is recorded, click the **Save** button in the **Memory** tool sidebar: - - ![Microsoft Edge with DevTools, showing the Memory tool, with the Save button](./share-traces-images/exporting-memory-trace.png) - -1. Choose a location to save the trace file on your disk: - - ![The Windows save dialog, showing the memory trace file being saved in a traces folder](./share-traces-images/saving-memory-trace.png) - - The trace is a `.heapsnapshot`, `.heapprofile`, or `.heaptimeline` file if you set the default trace type to normal, and it is a `.devtools` file if you set the default trace type to enhanced. - - - -## Choose a trace type when exporting - -Traces are exported as normal or enhanced traces, depending on the **Export Enhanced Performance and Memory Traces** option. To change the default trace type, see [Set the default trace type](#set-the-default-trace-type). You can also choose the type of trace you want when exporting. - -To choose a different trace type when exporting: - -1. Right-click (or hold the **Ctrl** key and click) the **Save profile** (![Save profile button](./share-traces-images/export-icon.png)) in the **Performance** tool or the **Save** button in the **Memory** tool. - -1. Click either **.devtools (enhanced format for Microsoft Edge)** if you want to export an enhanced trace, or click **.json (works with Microsoft Edge and Chromium browsers)** if you want a normal trace. - - ![The right-click menu on the Save Profile button in the Performance tool, to select the type of trace](./share-traces-images/choose-trace-type-on-export.png) - - - -## Import a trace in the Performance tool - -To import a trace in the **Performance** tool: - -1. Open the **Performance** tool. - -1. Click **Load profile** (![Load profile button](./share-traces-images/import-icon.png)): - - ![Microsoft Edge, showing the Performance tool in DevTools, with the Load profile button](./share-traces-images/importing-perf-trace.png) - -1. Locate the trace file on your disk. It's either a `.devtools` file (for enhanced traces) or a `.json` file (for normal traces): - - ![The Windows open dialog, showing a performance trace file](./share-traces-images/opening-perf-trace.png) - -1. Open the file. - - If the file is an enhanced trace, a new DevTools window appears, showing the performance profile and the extra runtime information that was recorded displayed in the **Sources**, **Console**, and **Elements** tools. - - If the file is a normal trace, the performance profile appears in the **Performance** tool, and the rest of the DevTools tabs continue to show information related to the current webpage. - - - -## Import a trace in the Memory tool - -To import a trace in the **Memory** tool: - -1. Open the **Memory** tool. - -1. Click the **Load profile** button: - - ![Microsoft Edge, showing the Memory tool in DevTools, with the Load button](./share-traces-images/importing-memory-trace.png) - -1. Locate the trace file on your disk. It's either a `.devtools` file (for enhanced traces) or a `.heapsnapshot`, `.heaptimeline`, or `.heapprofile` file (for normal traces). - - ![The Windows open dialog, showing a memory trace file](./share-traces-images/opening-memory-trace.png) - -1. Open the file. - - If the file is an enhanced trace, a new DevTools window appears, showing the memory information and the extra runtime information that was recorded displayed in the **Sources**, **Console**, and **Elements** tools. - - If the file is a normal trace, the memory information appears in the **Memory** tool, and the rest of the DevTools tabs continue to show information related to the current webpage. - - - -## Share feedback about enhanced traces - -Enhanced traces is an experimental feature which hopefully makes it easier to collaborate on resolving performance and memory issues by seeing unminified code. - -The Microsoft Edge DevTools team welcomes any feedback you may have about enhanced traces. If you've tried this new feature, please feel free to report any problems or ideas about it on our [GitHub repository](https://github.com/MicrosoftEdge/DevTools/issues/122). diff --git a/microsoft-edge/devtools/javascript/consume-source-maps-from-azure.md b/microsoft-edge/devtools/javascript/consume-source-maps-from-azure.md index d419041117..471390057d 100644 --- a/microsoft-edge/devtools/javascript/consume-source-maps-from-azure.md +++ b/microsoft-edge/devtools/javascript/consume-source-maps-from-azure.md @@ -208,4 +208,4 @@ To learn more about the **Source Maps Monitor** tool and how it can help monitor * [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](publish-source-maps-to-azure.md) * [Map the processed code to your original source code, for debugging](source-maps.md) * [Source Maps Monitor tool](../source-maps-monitor/source-maps-monitor-tool.md) -* [Improvements for connecting DevTools to Azure Artifacts symbol server](../whats-new/2023/07/devtools-115.md#improvements-for-connecting-devtools-to-azure-artifacts-symbol-server) in _What's New in DevTools (Microsoft Edge 115)_. +* [Improvements for connecting DevTools to Azure Artifacts symbol server](../whats-new/2023/07/devtools-115.md#improvements-for-connecting-devtools-to-azure-artifacts-symbol-server) in _What's new in DevTools (Microsoft Edge 115)_. diff --git a/microsoft-edge/devtools/javascript/publish-source-maps-to-azure.md b/microsoft-edge/devtools/javascript/publish-source-maps-to-azure.md index f71015b69c..ba1c699cf3 100644 --- a/microsoft-edge/devtools/javascript/publish-source-maps-to-azure.md +++ b/microsoft-edge/devtools/javascript/publish-source-maps-to-azure.md @@ -198,4 +198,4 @@ The `-n` parameter must be unique. Job names that are repeated will be rejected * [Securely debug original code by using Azure Artifacts symbol server source maps](consume-source-maps-from-azure.md) * [Map the processed code to your original source code, for debugging](source-maps.md) -* [Improvements for connecting DevTools to Azure Artifacts symbol server](../whats-new/2023/07/devtools-115.md#improvements-for-connecting-devtools-to-azure-artifacts-symbol-server) in _What's New in DevTools (Microsoft Edge 115)_. +* [Improvements for connecting DevTools to Azure Artifacts symbol server](../whats-new/2023/07/devtools-115.md#improvements-for-connecting-devtools-to-azure-artifacts-symbol-server) in _What's new in DevTools (Microsoft Edge 115)_. diff --git a/microsoft-edge/devtools/memory-inspector/memory-inspector-tool.md b/microsoft-edge/devtools/memory-inspector/memory-inspector-tool.md index d68953f16f..2f6ac2db97 100644 --- a/microsoft-edge/devtools/memory-inspector/memory-inspector-tool.md +++ b/microsoft-edge/devtools/memory-inspector/memory-inspector-tool.md @@ -43,7 +43,7 @@ The **Memory inspector** tool provides greater ability than the **Sources** tool ## Open Memory inspector while debugging - + For example: diff --git a/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md b/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md index c78d21458c..123e60f8ef 100644 --- a/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md +++ b/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md @@ -127,5 +127,5 @@ Be sure to unmount components. For long-running apps, small memory leaks of onl * [MicrosoftEdge/Demos > detached-elements](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) repo folder - source code. diff --git a/microsoft-edge/devtools/memory-problems/index.md b/microsoft-edge/devtools/memory-problems/index.md index a04a7f3d45..ebe1afde16 100644 --- a/microsoft-edge/devtools/memory-problems/index.md +++ b/microsoft-edge/devtools/memory-problems/index.md @@ -117,7 +117,7 @@ A DOM node is only garbage-collected by the browser when there are no references * [Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type)](./allocation-profiler.md) * [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](./heap-snapshots.md) External: diff --git a/microsoft-edge/devtools/network-conditions/network-conditions-tool.md b/microsoft-edge/devtools/network-conditions/network-conditions-tool.md index ac2a3a3f07..6e0c943e3b 100644 --- a/microsoft-edge/devtools/network-conditions/network-conditions-tool.md +++ b/microsoft-edge/devtools/network-conditions/network-conditions-tool.md @@ -51,7 +51,7 @@ The `content-encoding` header informs the browser whether and how a given HTTP r ## See also -* [Easier customization of User-Agent Client Hints](../whats-new/2021/07/devtools.md#easier-customization-of-user-agent-client-hints) in _What's New in DevTools (Microsoft Edge 93)_. -* [User-Agent Client Hints for devices in the Network conditions tab](../whats-new/2021/05/devtools.md#user-agent-client-hints-for-devices-in-the-network-conditions-tab) in _What's New in DevTools (Microsoft Edge 92)_. -* [New options to configure Content-Encodings in the Network conditions tool](../whats-new/2021/04/devtools.md#new-options-to-configure-content-encodings-in-the-network-conditions-tool) in _What's New in DevTools (Microsoft Edge 91)_. -* [Updated User-Agent strings](../whats-new/2019/12/devtools.md#updated-user-agent-strings) in _What's New in DevTools (Microsoft Edge 80)_. +* [Easier customization of User-Agent Client Hints](../whats-new/2021/07/devtools.md#easier-customization-of-user-agent-client-hints) in _What's new in DevTools (Microsoft Edge 93)_. +* [User-Agent Client Hints for devices in the Network conditions tab](../whats-new/2021/05/devtools.md#user-agent-client-hints-for-devices-in-the-network-conditions-tab) in _What's new in DevTools (Microsoft Edge 92)_. +* [New options to configure Content-Encodings in the Network conditions tool](../whats-new/2021/04/devtools.md#new-options-to-configure-content-encodings-in-the-network-conditions-tool) in _What's new in DevTools (Microsoft Edge 91)_. +* [Updated User-Agent strings](../whats-new/2019/12/devtools.md#updated-user-agent-strings) in _What's new in DevTools (Microsoft Edge 80)_. diff --git a/microsoft-edge/devtools/network-console/network-console-tool.md b/microsoft-edge/devtools/network-console/network-console-tool.md index 381f334f1c..008bd6b4fb 100644 --- a/microsoft-edge/devtools/network-console/network-console-tool.md +++ b/microsoft-edge/devtools/network-console/network-console-tool.md @@ -104,7 +104,7 @@ To define and save a new environment: The **Network Console** tool is compatible with the [Postman v2.1](https://schema.getpostman.com/json/collection/v2.1.0/docs/index.html) and [OpenAPI v2](https://swagger.io/specification/v2) schemas. See also: -* [Save and export using the Network Console](../whats-new/2020/10/devtools.md#save-and-export-using-the-network-console) in _What's New in DevTools (Microsoft Edge 87)_ +* [Save and export using the Network Console](../whats-new/2020/10/devtools.md#save-and-export-using-the-network-console) in _What's new in DevTools (Microsoft Edge 87)_ * [Postman.com](https://www.postman.com/) - A platform for building and testing APIs. diff --git a/microsoft-edge/devtools/performance/overview.md b/microsoft-edge/devtools/performance/overview.md index a4a002b6d7..20ad93e26a 100644 --- a/microsoft-edge/devtools/performance/overview.md +++ b/microsoft-edge/devtools/performance/overview.md @@ -299,7 +299,7 @@ Select the following options from the **Capture settings** menu: * Select the **Enable advanced rendering instrumentation (slow)** checkbox: Captures advanced paint instrumentation. Significantly hinders performance. See [Enable advanced paint instrumentation](../performance/reference.md#enable-advanced-paint-instrumentation) in _Performance features reference_. -* Select the **Enable CSS selector stats (slow)** checkbox: Captures CSS selector statistics. Significantly hinders performance. See [View CSS selector costs in the Performance tool sidebar](../whats-new/2024/11/devtools-131.md#view-css-selector-costs-in-the-performance-tool-sidebar) in _What's New in DevTools (Microsoft Edge 131)_. +* Select the **Enable CSS selector stats (slow)** checkbox: Captures CSS selector statistics. Significantly hinders performance. See [View CSS selector costs in the Performance tool sidebar](../whats-new/2024/11/devtools-131.md#view-css-selector-costs-in-the-performance-tool-sidebar) in _What's new in DevTools (Microsoft Edge 131)_. * CPU throttling: Simulate slower CPU speeds. See [Throttle the CPU while recording](../performance/reference.md#throttle-the-cpu-while-recording) in _Performance features reference_. diff --git a/microsoft-edge/devtools/performance/reference.md b/microsoft-edge/devtools/performance/reference.md index a193404349..f0ab94f703 100644 --- a/microsoft-edge/devtools/performance/reference.md +++ b/microsoft-edge/devtools/performance/reference.md @@ -1077,7 +1077,7 @@ See also: #### View messages between windows, iframes, and dedicated workers The DevTools experiment **Performance panel: show postMessage dispatch and handling flows** 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. @@ -1153,7 +1153,7 @@ See also: * [Track event initiators](#track-event-initiators), above. * [Analyze runtime performance (tutorial)](./index.md) @@ -1263,7 +1263,7 @@ See also: #### Disable local fonts +[Emulate missing local fonts](../whats-new/2020/08/devtools.md#emulate-missing-local-fonts) in _What's new in DevTools (Microsoft Edge 86)_ --> In the **Rendering** tool, use the **Disable local fonts** checkbox to emulate missing `local()` sources in `@font-face` rules. diff --git a/microsoft-edge/devtools/performance/selector-stats.md b/microsoft-edge/devtools/performance/selector-stats.md index cdc5e37eef..5a5d532eb4 100644 --- a/microsoft-edge/devtools/performance/selector-stats.md +++ b/microsoft-edge/devtools/performance/selector-stats.md @@ -153,7 +153,7 @@ Try to change your CSS selectors so they require less time to calculate, and mat ## See also -* [View CSS selector costs in the Performance tool sidebar](../whats-new/2024/11/devtools-131.md#view-css-selector-costs-in-the-performance-tool-sidebar) in _What's New in DevTools (Microsoft Edge 131)_. +* [View CSS selector costs in the Performance tool sidebar](../whats-new/2024/11/devtools-131.md#view-css-selector-costs-in-the-performance-tool-sidebar) in _What's new in DevTools (Microsoft Edge 131)_. * [Analyze runtime performance (tutorial)](./index.md) - An introduction to analyzing runtime performance in DevTools. * [Performance features reference](./reference.md) - Covers many of the features in the **Performance** tool. * [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/) - Windows blog post. diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/devtools-tab.png b/microsoft-edge/devtools/performance/share-performance-traces-images/devtools-tab.png new file mode 100644 index 0000000000..f92c01db33 Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/devtools-tab.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/load-trace-icon.png b/microsoft-edge/devtools/performance/share-performance-traces-images/load-trace-icon.png new file mode 100644 index 0000000000..48579d69d9 Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/load-trace-icon.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/performance-icon.png b/microsoft-edge/devtools/performance/share-performance-traces-images/performance-icon.png new file mode 100644 index 0000000000..191acbac07 Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/performance-icon.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/record-icon.png b/microsoft-edge/devtools/performance/share-performance-traces-images/record-icon.png new file mode 100644 index 0000000000..2ff2a8e86d Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/record-icon.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/save-performance-trace-dialog.png b/microsoft-edge/devtools/performance/share-performance-traces-images/save-performance-trace-dialog.png new file mode 100644 index 0000000000..c2b3e15e30 Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/save-performance-trace-dialog.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/save-trace-icon.png b/microsoft-edge/devtools/performance/share-performance-traces-images/save-trace-icon.png new file mode 100644 index 0000000000..ebb079ac7f Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/save-trace-icon.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/saving-perf-trace.png b/microsoft-edge/devtools/performance/share-performance-traces-images/saving-perf-trace.png new file mode 100644 index 0000000000..84c01bfe6d Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/saving-perf-trace.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces-images/stop-icon.png b/microsoft-edge/devtools/performance/share-performance-traces-images/stop-icon.png new file mode 100644 index 0000000000..f6de64a490 Binary files /dev/null and b/microsoft-edge/devtools/performance/share-performance-traces-images/stop-icon.png differ diff --git a/microsoft-edge/devtools/performance/share-performance-traces.md b/microsoft-edge/devtools/performance/share-performance-traces.md new file mode 100644 index 0000000000..d37b9bd9c0 --- /dev/null +++ b/microsoft-edge/devtools/performance/share-performance-traces.md @@ -0,0 +1,228 @@ +--- +title: Share a performance trace with more data +description: Export and import performance traces in DevTools to resolve slow performance or excess memory usage issues in your webpage. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 11/06/2025 +--- +# Share a performance trace with more data + +The data that's recorded by the **Performance** tool can be exported to files on disk, which can also include annotations, resource content (HTML, CSS, and JavaScript content), and source maps. The exported files are called _traces_. An exported trace is a `.json` file that can be imported in DevTools at any time. + +When you export a trace from the Performance tool, you can choose whether to include additional data: +* Annotations. +* Resource content (such as HTML, CSS, and JavaScript content). +* Script source maps. + +You can also control whether the trace file is compressed. + +The **Performance** tool records runtime data about your webpage. Exploring the recorded data makes it possible to improve your webpage's runtime performance. + +Exporting performance traces is useful when you want to share these files with other people, to get help with investigating issues. + +Traces can be saved to include annotations, resource content (such as scripts), and source maps from the webpage. This additional information makes it easier to analyze an imported trace file, by recreating the environment in which the trace was recorded, and by providing original source files. + +Exported trace files are compatible with other browsers that are based on the Chromium engine. + +When a trace that includes annotations, resource content (such as scripts) or source maps is imported in DevTools, a new DevTools window appears. This new window isn't connected to the webpage that's running in your browser, and instead re-creates part of the environment in which the trace was originally recorded. This DevTools instance contains only the **Performance** and **Sources** tools. + + + +## Export a trace from the Performance tool + +To record performance for aspects of a webpage, and then export a performance recording: + +1. Open a webpage, such as [To do](https://microsoftedge.github.io/Demos/demo-to-do/), in a new window or tab. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. In DevTools, open the **Performance** (![Performance icon](./share-performance-traces-images/performance-icon.png)) tool. + +1. Click the **Record** (![Record icon](./share-performance-traces-images/record-icon.png)) button. + +1. Interact with the webpage, to run the scenario that you want to investigate the performance of. + + For example, in the demo page, in the **Add a task** text box, type `task 1`, and then press **Enter**. + +1. Click the **Stop** (![Stop icon](./share-performance-traces-images/stop-icon.png)) button. + + The performance profile appears. + +1. Click the **Save trace** (![Save trace icon](./share-performance-traces-images/save-trace-icon.png)) button. + + The **Save performance trace** dialog opens (within the **Performance** tool): + + ![The Save performance trace dialog](./share-performance-traces-images/save-performance-trace-dialog.png) + +1. Select or clear the checkboxes, to control what information to include in the trace file: + + * The **Include annotations** checkbox. This checkbox only appears if there are annotations. + + * The **Include resource content** checkbox. + + * The **Include script source maps** checkbox. (Must first select the **Include resource content** checkbox.) + + Optionally, clear the **Compress with gzip** checkbox. + + Details about these checkboxes are below. + +1. Click the **Save** button. + + The small dialog in the **Performance** tool closes, and the **Save As** dialog opens. + +1. Navigate to a folder in which to save the trace file on your disk. + + For example, on Windows, in the `/Downloads/` directory, click the **New folder** button, and then create a `/traces/` directory, in which to save the performance trace file: + + ![Traces folder](./share-performance-traces-images/saving-perf-trace.png) + +1. Accept or modify the file name, such as `Trace-20251103T154500.json`. + +1. Click the **Save** button. + + The performance trace file is saved, such as `C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json`. + + + +## Include annotations + + + +In the **Save performance trace** dialog within the **Performance** tool, the **Include annotations** checkbox controls whether to include annotations that were added to a performance profile. + +Annotations help draw attention to and highlight specific sections of a trace, making it easier to understand details when viewing the trace. + +See also: +* [Annotate a recording and share it](./reference.md#annotate-a-recording-and-share-it) in _Performance features reference_. + + + +## Include resource content + + + +In the **Save performance trace** dialog within the **Performance** tool, selecting the **Include resource content** checkbox includes the contents of HTML files, CSS files, and JavaScript scripts in the exported trace file. All loaded scripts (except extensions) are saved in the trace file. + +When the trace file is subsequently imported into DevTools, these resources can then be viewed in the **Sources** tool. The **Sources** tool resolves source code references that are found in the imported trace, to display the original source code. + + + +#### Extension scripts + +Some Performance insights require resource content (such as scripts) for analysis. The contents of extension scripts are not included in the trace file, even when this checkbox is selected, because extension scripts might contain sensitive information. + +However, the profiling data from extension scripts is still saved in the trace file, because extension scripts can impact performance. + + +See also: +* [JavaScript debugging features](../javascript/reference.md) +* [Run snippets of JavaScript on any webpage](../javascript/snippets.md) +* [Using the Snippets tab to run JavaScript code snippets on any webpage](../sources/index.md#using-the-snippets-tab-to-run-javascript-code-snippets-on-any-webpage) in _Sources tool overview_. +* [Using the Content scripts tab for Microsoft Edge extensions](../sources/index.md#using-the-content-scripts-tab-for-microsoft-edge-extensions) in _Sources tool overview_. + + + +## Include script source maps + + + +In the **Save performance trace** dialog within the **Performance** tool, selecting the **Include script source maps** checkbox includes minified production content files and the mappings back to the original source code files. Source maps are used by DevTools to load your original files and replace minified code with original code. + +When the resulting trace file is subsequently opened, the **Performance** tool will display the original function names, and the **Sources** tool will show the original file names. Caution: This may expose source code to the trace file recipient. + +Some Performance insights require source maps for analysis. See [Get actionable insights](./reference.md#get-actionable-insights) in _Performance features reference_. + +To make this checkbox available instead of dimmed, you must select the **Include resource content** checkbox, which includes script content in the trace file. + +See also: +* [Map the processed code to your original source code, for debugging](../javascript/source-maps.md) + + + +## Compress with gzip + +In the **Save performance trace** dialog within the **Performance** tool, the **Compress with gzip** checkbox is selected by default. This option helps compress large performance traces to save disk space, and makes the importing and processing of trace files faster in DevTools. + +* If this checkbox is selected, the default file name extension is `.gz`. +* If this checkbox is cleared, the default file name extension is `.json`. + + + +## Open a performance trace file in DevTools + +When a trace file is opened (imported) in DevTools, a new, specialized DevTools tab opens in the browser, containing only the **Performance** and **Sources** tools. The trace can include annotations, resource content (such as scripts), and source maps. This new tab isn't connected to the webpage that's running in your browser, and instead re-creates part of the environment in which the trace was originally recorded. + +To open a saved trace file in DevTools: + +1. Open Microsoft Edge or another Chromium-based browser. + +1. Right-click the webpage or empty tab, and then select **Inspect**. + + DevTools opens. + +1. In DevTools, select the **Performance** (![Performance icon](./share-performance-traces-images/performance-icon.png)) tool. + +1. Click the **Load trace** (![Load trace icon](./share-performance-traces-images/load-trace-icon.png)) button. + + The **Open** dialog opens. + +1. Navigate to a shared trace file, such as `C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.gz`. + +1. Select the file, such as the zipped file `Trace-20251103T154500.json.gz`. + +1. Click the **Open** button. + + A special DevTools tab opens in the browser, entirely filled with DevTools, opening the **Sources** and **Performance** tools: + + ![Special DevTools tab](./share-performance-traces-images/devtools-tab.png) + + The Address bar displays a special URL, such as: + * `devtools://devtools/bundled/trace_app.html` + * `devtools://devtools/bundled/rehydrated_devtools_app.html` + + This is a special DevTools-dedicated tab of the browser, rather than the undocked DevTools window. A few other relevant tools that may be useful for analyzing the trace can be accessed by clicking the **More tools** button, such as: + * **Developer resources** + * **Quick source** + * **Rendering** + * **Search** + * **Sensors** + +See also: +* [Performance tool: Analyze your website's performance](./overview.md) +* [Sources tool overview](../sources/index.md) + + + +## See also + + +* [Share a memory trace with more data](../experimental-features/share-memory-traces.md) + +**Sources** tool: +* [Sources tool overview](../sources/index.md) + * [Using the Content scripts tab for Microsoft Edge extensions](../sources/index.md#using-the-content-scripts-tab-for-microsoft-edge-extensions) in _Sources tool overview_. + * [Using the Snippets tab to run JavaScript code snippets on any webpage](../sources/index.md#using-the-snippets-tab-to-run-javascript-code-snippets-on-any-webpage) in _Sources tool overview_. +* [JavaScript debugging features](../javascript/reference.md) +* [Run snippets of JavaScript on any webpage](../javascript/snippets.md) +* [Map the processed code to your original source code, for debugging](../javascript/source-maps.md) + +**Performance** tool: +* [Performance tool: Analyze your website's performance](./overview.md) +* Performance features reference + * [Annotate a recording and share it](./reference.md#annotate-a-recording-and-share-it) in _Performance features reference_. + * [Get actionable insights](./reference.md#get-actionable-insights) in _Performance features reference_. + +GitHub: +* [To do](https://microsoftedge.github.io/Demos/demo-to-do/) demo. + +Chrome docs: +* [Save and share performance traces](https://developer.chrome.com/docs/devtools/performance/save-trace) diff --git a/microsoft-edge/devtools/progressive-web-apps/simulate-window-controls-overlay.md b/microsoft-edge/devtools/progressive-web-apps/simulate-window-controls-overlay.md index 0aef776a64..0e4b42fa31 100644 --- a/microsoft-edge/devtools/progressive-web-apps/simulate-window-controls-overlay.md +++ b/microsoft-edge/devtools/progressive-web-apps/simulate-window-controls-overlay.md @@ -51,4 +51,4 @@ To simulate the WCO feature for Windows, Linux, and macOS in your PWA without ha ## See also * [Display content in the title bar area using Window Controls Overlay](../../progressive-web-apps/how-to/window-controls-overlay.md) - the Window Controls Overlay feature for PWAs. -* [Tooling for PWA Window Controls Overlay](../whats-new/2024/01/devtools-121.md#tooling-for-pwa-window-controls-overlay) in _What's New in DevTools (Microsoft Edge 121)_. +* [Tooling for PWA Window Controls Overlay](../whats-new/2024/01/devtools-121.md#tooling-for-pwa-window-controls-overlay) in _What's new in DevTools (Microsoft Edge 121)_. diff --git a/microsoft-edge/devtools/samples/index.md b/microsoft-edge/devtools/samples/index.md index 2732be6192..5f39c02350 100644 --- a/microsoft-edge/devtools/samples/index.md +++ b/microsoft-edge/devtools/samples/index.md @@ -55,14 +55,14 @@ The following demos demonstrate DevTools features. | **Performance** tool Activity Tabs | Used for [View activities in a table](../performance/reference.md#view-activities-in-a-table) in _Performance features reference_, about the **Performance** tool's **Bottom-up**, **Call tree**, and **Event log** tabs. | [/devtools-performance-activitytabs/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-activitytabs) | [Activity Tabs demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) | | Sluggish Animation | Used for [Analyze runtime performance (tutorial)](../performance/index.md). | [/devtools-performance-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-get-started) | [Sluggish Animation](https://microsoftedge.github.io/Demos/devtools-performance-get-started/) demo | | postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](../performance/reference.md#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. | [/devtools-postmessage-perf-timeline/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) | [postMessage Trace Events demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) | -| CSS :target pseudo-class | Used for [Support forcing the :target CSS state](../whats-new/2021/01/devtools.md#support-forcing-the-target-css-state) in _What's New in DevTools (Microsoft Edge 89)_. | [/devtools-target-pseudo/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-target-pseudo) | [CSS :target pseudo-class demo](https://microsoftedge.github.io/Demos/devtools-target-pseudo/) | +| CSS :target pseudo-class | Used for [Support forcing the :target CSS state](../whats-new/2021/01/devtools.md#support-forcing-the-target-css-state) in _What's new in DevTools (Microsoft Edge 89)_. | [/devtools-target-pseudo/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-target-pseudo) | [CSS :target pseudo-class demo](https://microsoftedge.github.io/Demos/devtools-target-pseudo/) | | Exploring the universe | Used for [Monitor Core Web Vitals metrics](../performance/overview.md#monitor-core-web-vitals-metrics) in _Performance tool: Analyze your website's performance_. | [/exploring-the-universe/](https://github.com/MicrosoftEdge/Demos/tree/main/exploring-the-universe) | [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo | -| Heap Snapshot Visualizer | Used for [Heap Snapshot visualizer extension for DevTools](../whats-new/2023/01/devtools-109.md#heap-snapshot-visualizer-extension-for-devtools) in _What's New in DevTools (Microsoft Edge 109)_. | [/heap-snapshot-visualizer/](https://github.com/MicrosoftEdge/Demos/tree/main/heap-snapshot-visualizer) | n/a | +| Heap Snapshot Visualizer | Used for [Heap Snapshot visualizer extension for DevTools](../whats-new/2023/01/devtools-109.md#heap-snapshot-visualizer-extension-for-devtools) in _What's new in DevTools (Microsoft Edge 109)_. | [/heap-snapshot-visualizer/](https://github.com/MicrosoftEdge/Demos/tree/main/heap-snapshot-visualizer) | n/a | | JSON dummy data | Simple JSON files. Used for [View a JSON file or server response with formatting](../../web-platform/json-viewer.md). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) (Readme) | | Inspect Network Activity | Used for [Inspect network activity](../network/index.md). | [/network-tutorial/](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) | [Inspect Network Activity demo](https://microsoftedge.github.io/Demos/network-tutorial/) | | Network tool reference | Used for [Network features reference](../network/reference.md). | [/devtools-network-reference/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-network-reference) | [Network tool reference demo](https://microsoftedge.github.io/Demos/devtools-network-reference/) | | Photo gallery | Used for [View your custom data in the performance profile](../performance/extension.md#view-your-custom-data-in-the-performance-profile) in _Customize performance profile with extensibility APIs_, and [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/). | [/photo-gallery/](https://github.com/MicrosoftEdge/Demos/tree/main/photo-gallery) | [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) demo | -| Slow Calendar | Simple calendar demo app to test DevTools features such as the **Performance** tool and source map support. Used for [Added source map support in the Coverage tool](../whats-new/2024/01/devtools-121.md#added-source-map-support-in-the-coverage-tool) in _What's New in DevTools (Microsoft Edge 121)_. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow Calendar](https://microsoftedge.github.io/Demos/slow-calendar/public/) demo | +| Slow Calendar | Simple calendar demo app to test DevTools features such as the **Performance** tool and source map support. Used for [Added source map support in the Coverage tool](../whats-new/2024/01/devtools-121.md#added-source-map-support-in-the-coverage-tool) in _What's new in DevTools (Microsoft Edge 121)_. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow Calendar](https://microsoftedge.github.io/Demos/slow-calendar/public/) demo | | Margie's Travel | Demonstrates how to optimize a webpage's resources to make it load, appear, and be interactive faster. Used for [Optimize website speed using Lighthouse](../speed/get-started.md). | [/travel-site/](https://github.com/MicrosoftEdge/Demos/tree/main/travel-site) | [Margie's Travel](https://microsoftedge.github.io/Demos/travel-site/) demo | | Workspaces | Used for [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md). | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces demo](https://microsoftedge.github.io/Demos/workspaces/) | | Idle detection | Used for [Emulate idle detector state](../sensors/index.md#emulate-idle-detector-state) in _Emulate device sensors_. | [/idle-detection/](https://github.com/MicrosoftEdge/Demos/tree/main/idle-detection) | [Idle detection demo](https://microsoftedge.github.io/Demos/idle-detection/) | diff --git a/microsoft-edge/devtools/source-maps-monitor/source-maps-monitor-tool.md b/microsoft-edge/devtools/source-maps-monitor/source-maps-monitor-tool.md index a7ed783816..1e69566164 100644 --- a/microsoft-edge/devtools/source-maps-monitor/source-maps-monitor-tool.md +++ b/microsoft-edge/devtools/source-maps-monitor/source-maps-monitor-tool.md @@ -39,7 +39,7 @@ The **Source Maps Monitor** tool shows which URL lookups have or haven't been at * [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) - * [Improvements for connecting DevTools to Azure Artifacts symbol server](../whats-new/2023/07/devtools-115.md#improvements-for-connecting-devtools-to-azure-artifacts-symbol-server) in _What's New in DevTools (Microsoft Edge 115)_. + * [Improvements for connecting DevTools to Azure Artifacts symbol server](../whats-new/2023/07/devtools-115.md#improvements-for-connecting-devtools-to-azure-artifacts-symbol-server) in _What's new in DevTools (Microsoft Edge 115)_. 1. In the **Filter behavior** text box, enter a domain with wildcard to exclude (or, to include), such as: `https://ryanseddon.com/*` @@ -58,4 +58,4 @@ The **Source Maps Monitor** tool shows which URL lookups have or haven't been at * [Map the processed code to your original source code, for debugging](../javascript/source-maps.md) * [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) -* [Sources tool now notifies you when sourcemaps can't be loaded](../whats-new/2021/11/devtools.md#sources-tool-now-notifies-you-when-sourcemaps-cant-be-loaded) in _What's New in DevTools (Microsoft Edge 96)_. +* [Sources tool now notifies you when sourcemaps can't be loaded](../whats-new/2021/11/devtools.md#sources-tool-now-notifies-you-when-sourcemaps-cant-be-loaded) in _What's new in DevTools (Microsoft Edge 96)_. diff --git a/microsoft-edge/devtools/whats-new/143-images/activity-bar.png b/microsoft-edge/devtools/whats-new/143-images/activity-bar.png new file mode 100644 index 0000000000..ffa27e68b6 Binary files /dev/null and b/microsoft-edge/devtools/whats-new/143-images/activity-bar.png differ diff --git a/microsoft-edge/devtools/whats-new/143-images/memory-icon.png b/microsoft-edge/devtools/whats-new/143-images/memory-icon.png new file mode 100644 index 0000000000..88c6eea08e Binary files /dev/null and b/microsoft-edge/devtools/whats-new/143-images/memory-icon.png differ diff --git a/microsoft-edge/devtools/whats-new/143-images/objects-retained-by-event-handlers-filter.png b/microsoft-edge/devtools/whats-new/143-images/objects-retained-by-event-handlers-filter.png new file mode 100644 index 0000000000..1b6e79bf38 Binary files /dev/null and b/microsoft-edge/devtools/whats-new/143-images/objects-retained-by-event-handlers-filter.png differ diff --git a/microsoft-edge/devtools/whats-new/143-images/save-performance-trace-dialog.png b/microsoft-edge/devtools/whats-new/143-images/save-performance-trace-dialog.png new file mode 100644 index 0000000000..c2b3e15e30 Binary files /dev/null and b/microsoft-edge/devtools/whats-new/143-images/save-performance-trace-dialog.png differ diff --git a/microsoft-edge/devtools/whats-new/143.md b/microsoft-edge/devtools/whats-new/143.md new file mode 100644 index 0000000000..635258b347 --- /dev/null +++ b/microsoft-edge/devtools/whats-new/143.md @@ -0,0 +1,90 @@ +--- +title: What's new in DevTools (Microsoft Edge 143) +description: Activity Bar will only appear horizontally in Edge 144. View objects retained by event handlers in the Memory tool. And more. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 12/04/2025 +--- +# What's new in DevTools (Microsoft Edge 143) + +These are the latest features in the Stable release of Microsoft Edge DevTools. + + + +## View objects retained by event handlers in the Memory tool + + + +In the **Memory tool**, to identify heap snapshot objects that are retained by event handlers, in the **Filter** dropdown list, use the new **Objects retained by event handlers** list item. + +For example: + +1. Go to [To do app](https://microsoftedge.github.io/Demos/demo-to-do/) in a new tab or window. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. Select the **Memory** (![Memory icon](./143-images/memory-icon.png)) tool. + +1. Click the **Take snapshot** button. + +1. In the **Filter** dropdown list, instead of **All objects**, select **Objects retained by event handlers**: + + ![Objects retained by event handlers filter](./143-images/objects-retained-by-event-handlers-filter.png) + + The list of objects in the table becomes shorter. + +The **Objects retained by event handlers** filter makes it easier to debug memory leaks that are related to event listeners, such as when a component calls `addEventListener`, but doesn't call `removeEventListener` afterwards. + + + +## Updated performance trace export options + + + +When you export a performance trace, you can choose to include: +* Annotations. +* Resource content (HTML, CSS, and JavaScript content). +* Script source maps. + +You can also choose whether the trace file is compressed. + +Exporting a trace that includes this additional data is useful when sharing traces with others for debugging. + +![Save performance trace dialog](./143-images/save-performance-trace-dialog.png) + +See also: +* [Share a performance trace with more data](../performance/share-performance-traces.md) +* [Improved trace sharing](https://developer.chrome.com/blog/new-in-devtools-143#trace-sharing) + + + +## Activity Bar always displays horizontally + + + +Upcoming change: + +Starting with Microsoft Edge 144, the **Activity Bar** will always be displayed horizontally, at the top of the DevTools window. Displaying the **Activity Bar** vertically will no longer be supported. + +![Horizontal Activity Bar](./143-images/activity-bar.png) + + + +## Announcements from the Chromium project + +Microsoft Edge 143 also includes the following updates from the Chromium project: + +* [Support for @starting-style](https://developer.chrome.com/blog/new-in-devtools-143#starting-style) +* [Editor widget for display: masonry](https://developer.chrome.com/blog/new-in-devtools-143#masonry) + + + +## See also + +* [What's New in Microsoft Edge DevTools](./whats-new.md) +* [Release notes for Microsoft Edge web platform](../../web-platform/release-notes/index.md) diff --git a/microsoft-edge/devtools/whats-new/2019/12/devtools.md b/microsoft-edge/devtools/whats-new/2019/12/devtools.md index 3913722c94..3f926487b8 100644 --- a/microsoft-edge/devtools/whats-new/2019/12/devtools.md +++ b/microsoft-edge/devtools/whats-new/2019/12/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 80) +title: What's new in DevTools (Microsoft Edge 80) description: Accessibility improvements, using the DevTools in other languages, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 12/13/2021 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# What's New in DevTools (Microsoft Edge 80) +# What's new in DevTools (Microsoft Edge 80) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -246,7 +246,7 @@ DevTools has started to support the DWARF Debugging Standard, which means increa --> See also: -* [Filter Wasm resource type in the Network tool](../../../whats-new/2021/05/devtools.md#filter-wasm-resource-type-in-the-network-tool) in _What's New in DevTools (Microsoft Edge 92)_. +* [Filter Wasm resource type in the Network tool](../../../whats-new/2021/05/devtools.md#filter-wasm-resource-type-in-the-network-tool) in _What's new in DevTools (Microsoft Edge 92)_. diff --git a/microsoft-edge/devtools/whats-new/2020/01/devtools.md b/microsoft-edge/devtools/whats-new/2020/01/devtools.md index 9c092710cf..8aad9cbd7a 100644 --- a/microsoft-edge/devtools/whats-new/2020/01/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/01/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 81) +title: What's new in DevTools (Microsoft Edge 81) description: 3D View, Visual Studio integration with Microsoft Edge, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 05/04/2021 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# What's New in DevTools (Microsoft Edge 81) +# What's new in DevTools (Microsoft Edge 81) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2020/03/devtools.md b/microsoft-edge/devtools/whats-new/2020/03/devtools.md index 208b605199..f845303ab6 100644 --- a/microsoft-edge/devtools/whats-new/2020/03/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/03/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 83) +title: What's new in DevTools (Microsoft Edge 83) description: Emulate color vision deficiencies, Dock To Left in the Command Menu, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 05/04/2021 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# What's New in DevTools (Microsoft Edge 83) +# What's new in DevTools (Microsoft Edge 83) Following the updated Chromium schedule, we are adjusting our schedule for upcoming Microsoft Edge releases and cancelling the Microsoft Edge 82 release. Check out our [blog post](https://blogs.windows.com/msedgedev/2020/03/20) for more info. @@ -298,7 +298,7 @@ To check that your maskable icon looks good on Android Oreo devices, in the **Ma -This feature launched in Microsoft Edge 81. The updates covered here in Microsoft Edge 83 weren't covered in [What's New in DevTools (Microsoft Edge 81)](../01/devtools.md). +This feature launched in Microsoft Edge 81. The updates covered here in Microsoft Edge 83 weren't covered in [What's new in DevTools (Microsoft Edge 81)](../01/devtools.md). See also: * [View, edit, and delete cookies](../../../storage/cookies.md) - Articles about the **Application** tool. diff --git a/microsoft-edge/devtools/whats-new/2020/05/devtools.md b/microsoft-edge/devtools/whats-new/2020/05/devtools.md index c410a08930..a0e07600f4 100644 --- a/microsoft-edge/devtools/whats-new/2020/05/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/05/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 84) +title: What's new in DevTools (Microsoft Edge 84) description: Use DevTools in Windows high contrast mode, match keyboard shortcuts in DevTools to Visual Studio Code, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 12/13/2021 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# What's New in DevTools (Microsoft Edge 84) +# What's new in DevTools (Microsoft Edge 84) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2020/06/devtools.md b/microsoft-edge/devtools/whats-new/2020/06/devtools.md index b088aa0291..9d44a8464e 100644 --- a/microsoft-edge/devtools/whats-new/2020/06/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/06/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 85) +title: What's new in DevTools (Microsoft Edge 85) description: CSS grid debugging features, Edit and Replay requests with the Network Console, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 05/04/2021 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# What's New in DevTools (Microsoft Edge 85) +# What's new in DevTools (Microsoft Edge 85) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2020/08/devtools.md b/microsoft-edge/devtools/whats-new/2020/08/devtools.md index e903eab76f..44e6c2ec76 100644 --- a/microsoft-edge/devtools/whats-new/2020/08/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/08/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 86) +title: What's new in DevTools (Microsoft Edge 86) description: Match keyboard shortcuts to Visual Studio Code, emulate Surface Duo and Samsung Galaxy Fold, CSS grid overlay improvements, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 05/04/2021 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# What's New in DevTools (Microsoft Edge 86) +# What's new in DevTools (Microsoft Edge 86) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -77,7 +77,7 @@ The Microsoft Edge DevTools team and the Chrome DevTools team collaborate on add Update: This feature has been released and is no longer experimental. See also: -* [CSS grid debugging features](../06/devtools.md#css-grid-debugging-features) in _What's New in DevTools (Microsoft Edge 85)_. +* [CSS grid debugging features](../06/devtools.md#css-grid-debugging-features) in _What's new in DevTools (Microsoft Edge 85)_. * [Inspect CSS Grid in Microsoft Edge DevTools](../../../css/grid.md). Chromium issue: [#1047356](https://crbug.com/1047356) @@ -202,7 +202,7 @@ For example, to take a screenshot of the table of contents, right-click the elem Chromium issue: [#1100253](https://crbug.com/1100253) See also: -* [Capture node screenshot beyond viewport](../../2021/01/devtools.md#capture-node-screenshot-beyond-viewport) in _What's New in DevTools (Microsoft Edge 89)_ +* [Capture node screenshot beyond viewport](../../2021/01/devtools.md#capture-node-screenshot-beyond-viewport) in _What's new in DevTools (Microsoft Edge 89)_ diff --git a/microsoft-edge/devtools/whats-new/2020/10/devtools.md b/microsoft-edge/devtools/whats-new/2020/10/devtools.md index 989dac19b8..27aaa33a2b 100644 --- a/microsoft-edge/devtools/whats-new/2020/10/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/10/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 87) +title: What's new in DevTools (Microsoft Edge 87) description: New CSS Grid debugging tools, Webauthn tool, moveable tools, and Computed sidebar panel. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 05/04/2021 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# What's New in DevTools (Microsoft Edge 87) +# What's new in DevTools (Microsoft Edge 87) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -283,7 +283,7 @@ In the **Security & Isolation** section of the frame detail page, view the Cross For real-time updates on this feature in the Chromium open-source project, see Issue [#1051466](https://crbug.com/1051466). See also: -* [Display opener frame details for opened windows](../11/devtools.md#display-opener-frame-details-for-opened-windows) in _What's New in DevTools (Microsoft Edge 88)_ +* [Display opener frame details for opened windows](../11/devtools.md#display-opener-frame-details-for-opened-windows) in _What's new in DevTools (Microsoft Edge 88)_ * [The Application tool, to manage storage](../../../storage/application-tool.md) @@ -299,7 +299,7 @@ The **Security & Isolation** section of the frame detail page now displays the ` For real-time updates on this feature in the Chromium open-source project, see Issue [#1051466](https://crbug.com/1051466). See also: -* [Display opener frame details for opened windows](../11/devtools.md#display-opener-frame-details-for-opened-windows) in _What's New in DevTools (Microsoft Edge 88)_ +* [Display opener frame details for opened windows](../11/devtools.md#display-opener-frame-details-for-opened-windows) in _What's new in DevTools (Microsoft Edge 88)_ * [The Application tool, to manage storage](../../../storage/application-tool.md) @@ -312,7 +312,7 @@ For example, the **CSS overview Accessible Colors Demo** (`https://css-overview- To view a list of elements that have a color contrast issue, on **Contrast issues**, click **Text**. To open the element in the **Elements** tool, click an element in the list. -To help fix contrast issues, Microsoft Edge DevTools automatically provides color suggestions; see [Accessible color suggestion in the Styles pane](../08/devtools.md#accessible-color-suggestion-in-the-styles-pane) in _What's New in DevTools (Microsoft Edge 86)_. +To help fix contrast issues, Microsoft Edge DevTools automatically provides color suggestions; see [Accessible color suggestion in the Styles pane](../08/devtools.md#accessible-color-suggestion-in-the-styles-pane) in _What's new in DevTools (Microsoft Edge 86)_. ![Color contrast issues](./devtools-images/css-overview.png) diff --git a/microsoft-edge/devtools/whats-new/2020/11/devtools.md b/microsoft-edge/devtools/whats-new/2020/11/devtools.md index 3065bb1aad..f8b4d89de2 100644 --- a/microsoft-edge/devtools/whats-new/2020/11/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/11/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 88) +title: What's new in DevTools (Microsoft Edge 88) description: Microsoft Edge on Linux, improved webhint tips in the Issues tool, new service worker debugging features, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 05/04/2021 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# What's New in DevTools (Microsoft Edge 88) +# What's new in DevTools (Microsoft Edge 88) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -304,7 +304,7 @@ The **Network** tool now displays specific status for CORS errors. For example: For real-time updates on this feature in the Chromium open-source project, see Issue [1141824](https://crbug.com/1141824). See also: -* [Enhanced CORS debugging support](../../2021/05/devtools.md#enhanced-cors-debugging-support) in _What's New in DevTools (Microsoft Edge 92)_ +* [Enhanced CORS debugging support](../../2021/05/devtools.md#enhanced-cors-debugging-support) in _What's new in DevTools (Microsoft Edge 92)_ * [Network features reference](../../../network/reference.md) diff --git a/microsoft-edge/devtools/whats-new/2021/01/devtools.md b/microsoft-edge/devtools/whats-new/2021/01/devtools.md index 240f632257..15bace821d 100644 --- a/microsoft-edge/devtools/whats-new/2021/01/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/01/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 89) +title: What's new in DevTools (Microsoft Edge 89) description: The What's New tool is now Welcome, Visual Font Editor in the Styles pane, CSS Flexbox debugging tools, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 05/04/2021 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# What's New in DevTools (Microsoft Edge 89) +# What's new in DevTools (Microsoft Edge 89) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -86,7 +86,7 @@ See also: Grid: * [CSS grids](../../../css/grid.md) -* [Improved CSS Grid tooling](../../2020/10/devtools.md#improved-css-grid-tooling) in _What's New in DevTools (Microsoft Edge 87)_. +* [Improved CSS Grid tooling](../../2020/10/devtools.md#improved-css-grid-tooling) in _What's new in DevTools (Microsoft Edge 87)_. MDN: @@ -249,7 +249,7 @@ In Microsoft Edge version 89, node screenshots are more accurate, capturing the For the history of this feature in the Chromium open-source project, see Issue [1003629](https://crbug.com/1003629). See also: -* [Capture node screenshots using the Elements tool context menu](../../2020/08/devtools.md#capture-node-screenshots-using-the-elements-tool-context-menu) in _What's New in DevTools (Microsoft Edge 86)_ +* [Capture node screenshots using the Elements tool context menu](../../2020/08/devtools.md#capture-node-screenshots-using-the-elements-tool-context-menu) in _What's new in DevTools (Microsoft Edge 86)_ diff --git a/microsoft-edge/devtools/whats-new/2021/02/devtools.md b/microsoft-edge/devtools/whats-new/2021/02/devtools.md index 289ba2b816..d99c937b51 100644 --- a/microsoft-edge/devtools/whats-new/2021/02/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/02/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 90) +title: What's new in DevTools (Microsoft Edge 90) description: Debugging support for CSS Flexbox, performance heads-up display on the webpage, issues tool updates, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 05/04/2021 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# What's New in DevTools (Microsoft Edge 90) +# What's new in DevTools (Microsoft Edge 90) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2021/04/devtools.md b/microsoft-edge/devtools/whats-new/2021/04/devtools.md index 216b047b90..596c36e610 100644 --- a/microsoft-edge/devtools/whats-new/2021/04/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/04/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 91) +title: What's new in DevTools (Microsoft Edge 91) description: Wavy underlines highlight code issues in the Elements tool, service worker update timeline, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 05/06/2021 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -# What's New in DevTools (Microsoft Edge 91) +# What's new in DevTools (Microsoft Edge 91) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -77,7 +77,7 @@ Note: As of May 2022, tooltips aren't supported from the **Activity Bar**. @@ -322,7 +322,7 @@ Now, to display the computed CSS value in the **Styles** tab in the **Elements** See also: * [View only the CSS that is actually applied to an element](../../../css/reference.md#view-only-the-css-that-is-actually-applied-to-an-element) in _CSS features reference_. -* [View the Computed sidebar pane in the Styles pane](../../2020/10/devtools.md#view-the-computed-sidebar-pane-in-the-styles-pane) in _What's New in DevTools (Microsoft Edge 87)_. +* [View the Computed sidebar pane in the Styles pane](../../2020/10/devtools.md#view-the-computed-sidebar-pane-in-the-styles-pane) in _What's new in DevTools (Microsoft Edge 87)_. * [Explore all computed styles](../../../accessibility/navigation.md#explore-all-computed-styles) in _Navigate DevTools with assistive technology_. To view the history of this feature in the Chromium open-source project, see Issue [1076198](https://crbug.com/1076198). diff --git a/microsoft-edge/devtools/whats-new/2021/05/devtools.md b/microsoft-edge/devtools/whats-new/2021/05/devtools.md index aaf62e9528..be0d10d1ac 100644 --- a/microsoft-edge/devtools/whats-new/2021/05/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/05/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 92) +title: What's new in DevTools (Microsoft Edge 92) description: The More Tools button, in-context documentation to get started using the DevTools extension, increased support for screen readers in the Console, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.localizationpriority: high ms.date: 06/02/2021 --- -# What's New in DevTools (Microsoft Edge 92) +# What's new in DevTools (Microsoft Edge 92) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -231,7 +231,7 @@ Cross-origin resource sharing (CORS) errors are now surfaced in the **Issues** t See also: -* [Report CORS errors in the Network tool](../../2020/11/devtools.md#report-cors-errors-in-the-network-tool) in _What's New in DevTools (Microsoft Edge 88)_ +* [Report CORS errors in the Network tool](../../2020/11/devtools.md#report-cors-errors-in-the-network-tool) in _What's new in DevTools (Microsoft Edge 88)_ * [Find and fix problems using the Issues tool](../../../issues/index.md) For the history of this feature in the Chromium open-source project, see Issue [1141824](https://crbug.com/1141824). diff --git a/microsoft-edge/devtools/whats-new/2021/07/devtools.md b/microsoft-edge/devtools/whats-new/2021/07/devtools.md index 5bc7682758..9021ad5e26 100644 --- a/microsoft-edge/devtools/whats-new/2021/07/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/07/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 93) +title: What's new in DevTools (Microsoft Edge 93) description: Apply color themes from Visual Studio Code, debug DOM node memory leaks with the new Detached Elements tool, Microsoft Edge Developer Tools for Visual Studio Code now integrates with the Visual Studio Code Debugger workflow, and more. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 07/30/2021 --- -# What's New in DevTools (Microsoft Edge 93) +# What's new in DevTools (Microsoft Edge 93) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2021/09/devtools.md b/microsoft-edge/devtools/whats-new/2021/09/devtools.md index 635ae2d29e..dc172ad433 100644 --- a/microsoft-edge/devtools/whats-new/2021/09/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/09/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 94) +title: What's new in DevTools (Microsoft Edge 94) description: Easily search the web for console error message strings, DevTools extension for Visual Studio Code now has the newest tools and theme support, breakpoint icons are now displayed when using Visual Studio Code themes, and you can navigate to the More Tools button with the keyboard. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 09/03/2021 --- -# What's New in DevTools (Microsoft Edge 94) +# What's new in DevTools (Microsoft Edge 94) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2021/10/devtools.md b/microsoft-edge/devtools/whats-new/2021/10/devtools.md index 5a3d0a2b76..050ca3116c 100644 --- a/microsoft-edge/devtools/whats-new/2021/10/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/10/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 95) +title: What's new in DevTools (Microsoft Edge 95) description: Changes in the CSS Styles editor now show up in your CSS files inside Visual Studio Code. All console errors and warnings now have a Search Web icon. Improved keyboard access for defining User-Agent Client Hints. Improved filtering for grouped messages in the Console. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 10/20/2021 --- -# What's New in DevTools (Microsoft Edge 95) +# What's new in DevTools (Microsoft Edge 95) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2021/11/devtools.md b/microsoft-edge/devtools/whats-new/2021/11/devtools.md index 4fa3c28c9d..b11eebd769 100644 --- a/microsoft-edge/devtools/whats-new/2021/11/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/11/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 96) +title: What's new in DevTools (Microsoft Edge 96) description: Focus Mode and a vertical Activity Bar. Auto-minimizing of the Console. Display a webpage in Visual Studio Code, emulate devices, and see issues while editing. Sources tool notifies you when sourcemaps can't be loaded. If Sources is open, it's used rather than Visual Studio Code. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 11/16/2021 --- -# What's New in DevTools (Microsoft Edge 96) +# What's new in DevTools (Microsoft Edge 96) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -63,7 +63,7 @@ If you want to only allow the Console tool to open in a single place, you can co See also: * [Activity Bar tools vs. Quick View tools](../../../about-tools.md#activity-bar-tools-vs-quick-view-tools) in _About the list of tools_ -* [Move tools between top and bottom panels](../../2020/10/devtools.md#move-tools-between-top-and-bottom-panels) in _What's New in DevTools (Microsoft Edge 87)_. +* [Move tools between top and bottom panels](../../2020/10/devtools.md#move-tools-between-top-and-bottom-panels) in _What's new in DevTools (Microsoft Edge 87)_. diff --git a/microsoft-edge/devtools/whats-new/2022/01/devtools.md b/microsoft-edge/devtools/whats-new/2022/01/devtools.md index e92919e763..ce33efa669 100644 --- a/microsoft-edge/devtools/whats-new/2022/01/devtools.md +++ b/microsoft-edge/devtools/whats-new/2022/01/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 97) +title: What's new in DevTools (Microsoft Edge 97) description: Detached Elements tool is now on by default. Improvements and bug fixes for Focus Mode. 3D View tool now supports changing color themes in DevTools. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 01/14/2022 --- -# What's New in DevTools (Microsoft Edge 97) +# What's new in DevTools (Microsoft Edge 97) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2022/02/devtools.md b/microsoft-edge/devtools/whats-new/2022/02/devtools.md index 9e28f5d4ba..c6df6432d5 100644 --- a/microsoft-edge/devtools/whats-new/2022/02/devtools.md +++ b/microsoft-edge/devtools/whats-new/2022/02/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 98) +title: What's new in DevTools (Microsoft Edge 98) description: 2021 year-in-review blog post. Automate IE mode with Internet Explorer Driver. Emulate forced-colors mode. Tooltips for Activity icons in the Performance tool Event log. Shallow sizes in the Memory tool now shown as decimal values. Network tool's Search text box can now be resized. And more. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 02/02/2022 --- -# What's New in DevTools (Microsoft Edge 98) +# What's new in DevTools (Microsoft Edge 98) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md b/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md index 12035e797b..34d94395b5 100644 --- a/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md +++ b/microsoft-edge/devtools/whats-new/2022/03/devtools-100.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 100) +title: What's new in DevTools (Microsoft Edge 100) description: New DevTools repo at GitHub, to send feedback. Use filters to focus on parts of a heap snapshot. Czech and Vietnamese UI. Network tool displays how a request was fulfilled. Links in a performance profile map to your original code. Network tool's Waterfall view matches Visual Studio Code themes. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 03/31/2022 --- -# What's New in DevTools (Microsoft Edge 100) +# What's new in DevTools (Microsoft Edge 100) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2022/03/devtools.md b/microsoft-edge/devtools/whats-new/2022/03/devtools.md index 1ece3c7fda..50153ebe85 100644 --- a/microsoft-edge/devtools/whats-new/2022/03/devtools.md +++ b/microsoft-edge/devtools/whats-new/2022/03/devtools.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 99) +title: What's new in DevTools (Microsoft Edge 99) description: Host source maps on Azure DevOps Symbol Server to debug your original source code securely. Use source maps to unminify performance profiles. DevTools extension now for Microsoft Visual Studio. 3D View tool replaces Layers tool. Improved accessibility in Network Console and 3D View tools. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 03/09/2022 --- -# What's New in DevTools (Microsoft Edge 99) +# What's new in DevTools (Microsoft Edge 99) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -96,7 +96,7 @@ See also: -**Update:** In Microsoft Edge 111, this feature has been removed, because the **Performance** tool now automatically provides the original file and function names while profiling production code, as long as sourcemaps are hosted on Azure Artifacts Symbol Server. See [Performance tool unminifies file and function names when profiling production code](../../2023/03/devtools-111.md#performance-tool-unminifies-file-and-function-names-when-profiling-production-code) in _What's New in DevTools (Microsoft Edge 111)_. +**Update:** In Microsoft Edge 111, this feature has been removed, because the **Performance** tool now automatically provides the original file and function names while profiling production code, as long as sourcemaps are hosted on Azure Artifacts Symbol Server. See [Performance tool unminifies file and function names when profiling production code](../../2023/03/devtools-111.md#performance-tool-unminifies-file-and-function-names-when-profiling-production-code) in _What's new in DevTools (Microsoft Edge 111)_. #### Deprecated What's New entry diff --git a/microsoft-edge/devtools/whats-new/2022/04/devtools-101.md b/microsoft-edge/devtools/whats-new/2022/04/devtools-101.md index 01eaa663e0..7259ded3ce 100644 --- a/microsoft-edge/devtools/whats-new/2022/04/devtools-101.md +++ b/microsoft-edge/devtools/whats-new/2022/04/devtools-101.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 101) +title: What's new in DevTools (Microsoft Edge 101) description: Console tool in VS Code. Source maps cached with IndexedDB. Track pending network requests when exporting HAR files. Updated UI and camera controls in 3D View. Switch themes without reloading DevTools. And more. author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 04/28/2022 --- -# What's New in DevTools (Microsoft Edge 101) +# What's new in DevTools (Microsoft Edge 101) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2022/05/devtools-102.md b/microsoft-edge/devtools/whats-new/2022/05/devtools-102.md index 9bcaf1168c..c42d12d547 100644 --- a/microsoft-edge/devtools/whats-new/2022/05/devtools-102.md +++ b/microsoft-edge/devtools/whats-new/2022/05/devtools-102.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 102) +title: What's new in DevTools (Microsoft Edge 102) description: "DevTools extension: browser preview device/mode emulation and sourcemaps to debug/edit Sass/React. Save heap snapshot strings to JSON. Retainers filters in Memory tool. Inspect tooltip persists. Better high-contrast display. Experiments have Help icons. Improved Network tool layout. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 05/24/2022 --- -# What's New in DevTools (Microsoft Edge 102) +# What's new in DevTools (Microsoft Edge 102) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2022/06/devtools-103.md b/microsoft-edge/devtools/whats-new/2022/06/devtools-103.md index 28a12215f7..018f84bd8a 100644 --- a/microsoft-edge/devtools/whats-new/2022/06/devtools-103.md +++ b/microsoft-edge/devtools/whats-new/2022/06/devtools-103.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 103) +title: What's new in DevTools (Microsoft Edge 103) description: "New node types in the Memory tool. DevTools extension for Visual Studio Code: Right-click an HTML file to launch, and Application tool. Focus Mode bug fixes. 3D View tool responsive layout. Fix: The Close button for DevTools is now accessible in high contrast mode. Welcome tool redesign. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 06/23/2022 --- -# What's New in DevTools (Microsoft Edge 103) +# What's new in DevTools (Microsoft Edge 103) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2022/08/devtools-104.md b/microsoft-edge/devtools/whats-new/2022/08/devtools-104.md index 695395239d..4c839f7537 100644 --- a/microsoft-edge/devtools/whats-new/2022/08/devtools-104.md +++ b/microsoft-edge/devtools/whats-new/2022/08/devtools-104.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 104) +title: What's new in DevTools (Microsoft Edge 104) description: "Use Layers in 3D View. Improved display of request URLs in Issues tool. Improving accessibility for the Detached Elements tool. Fix: Arrows representing web socket traffic now render correctly in the Network tool. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 08/02/2022 --- -# What's New in DevTools (Microsoft Edge 104) +# What's new in DevTools (Microsoft Edge 104) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2022/09/devtools-105.md b/microsoft-edge/devtools/whats-new/2022/09/devtools-105.md index c73f7f372d..71a68aaa10 100644 --- a/microsoft-edge/devtools/whats-new/2022/09/devtools-105.md +++ b/microsoft-edge/devtools/whats-new/2022/09/devtools-105.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 105) +title: What's new in DevTools (Microsoft Edge 105) description: "Focus Mode: Improved location controls for DevTools, Activity Bar, Quick View, and Improved reliability in Issues tool. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 09/01/2022 --- -# What's New in DevTools (Microsoft Edge 105) +# What's new in DevTools (Microsoft Edge 105) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2022/09/devtools-106.md b/microsoft-edge/devtools/whats-new/2022/09/devtools-106.md index f1c8d9946a..c877db0ccb 100644 --- a/microsoft-edge/devtools/whats-new/2022/09/devtools-106.md +++ b/microsoft-edge/devtools/whats-new/2022/09/devtools-106.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 106) +title: What's new in DevTools (Microsoft Edge 106) description: "Introducing the Command Palette. Filter and automatically fix code issues in DevTools for Visual Studio Code. DevTools now uses less disk space when caching sourcemaps. Chromium color themes have been deprecated. Accessibility improvements in Focus Mode and high contrast mode. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 09/29/2022 --- -# What's New in DevTools (Microsoft Edge 106) +# What's new in DevTools (Microsoft Edge 106) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -104,7 +104,7 @@ To clear the IndexedDB cache and force DevTools to re-load sourcemaps, run the * For history, see [Issue 89](https://github.com/MicrosoftEdge/DevTools/issues/89). See also: -* [Source maps are now cached with IndexedDB](../../2022/04/devtools-101.md#source-maps-are-now-cached-with-indexeddb) in _What's New in DevTools (Microsoft Edge 101)_ +* [Source maps are now cached with IndexedDB](../../2022/04/devtools-101.md#source-maps-are-now-cached-with-indexeddb) in _What's new in DevTools (Microsoft Edge 101)_ @@ -143,7 +143,7 @@ Screen readers now announce which **Dock location** button or which **Activity B See also: * [Navigate DevTools with assistive technology](../../../accessibility/navigation.md) -* [Focus Mode: Improved location controls for DevTools, Activity Bar, and Quick View](../../../whats-new/2022/09/devtools-105.md#focus-mode-improved-location-controls-for-devtools-activity-bar-and-quick-view) in _What's New in DevTools (Microsoft Edge 105)_. +* [Focus Mode: Improved location controls for DevTools, Activity Bar, and Quick View](../../../whats-new/2022/09/devtools-105.md#focus-mode-improved-location-controls-for-devtools-activity-bar-and-quick-view) in _What's new in DevTools (Microsoft Edge 105)_. #### Computed styles are easier to see in high contrast mode diff --git a/microsoft-edge/devtools/whats-new/2022/10/devtools-107.md b/microsoft-edge/devtools/whats-new/2022/10/devtools-107.md index be0665046e..e1e9e862d9 100644 --- a/microsoft-edge/devtools/whats-new/2022/10/devtools-107.md +++ b/microsoft-edge/devtools/whats-new/2022/10/devtools-107.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 107) +title: What's new in DevTools (Microsoft Edge 107) description: "Automate WebView2 with Playwright. Focus Mode Activity Bar icons have tooltips. New shortcut key for Command Palette. Memory tool loads larger heap snapshots. Links in Application tool render in high contrast mode. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 10/31/2022 --- -# What's New in DevTools (Microsoft Edge 107) +# What's new in DevTools (Microsoft Edge 107) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2022/12/devtools-108.md b/microsoft-edge/devtools/whats-new/2022/12/devtools-108.md index bef8edd134..8d466b417f 100644 --- a/microsoft-edge/devtools/whats-new/2022/12/devtools-108.md +++ b/microsoft-edge/devtools/whats-new/2022/12/devtools-108.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 108) +title: What's new in DevTools (Microsoft Edge 108) description: "Microsoft Edge WebDriver is now available for macOS running on Apple M1. Improved DevTools navigation via Command Palette. Better support for high contrast mode in DevTools. In Focus Mode, disabling JavaScript now produces a warning icon for the Sources tool. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 12/01/2022 --- -# What's New in DevTools (Microsoft Edge 108) +# What's new in DevTools (Microsoft Edge 108) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md b/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md index 3908423011..04d2cb55c1 100644 --- a/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md +++ b/microsoft-edge/devtools/whats-new/2023/01/devtools-109.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 109) +title: What's new in DevTools (Microsoft Edge 109) description: "Export DevTools instances with enhanced traces. Debug Recalculate Styles events in Performance tool with selector stats. Track GC'd objects when Allocation sampling in Memory tool. Heap Snapshot Visualizer. Quick View in Focus Mode has all tools. Navigate directly to Styles in Elements tool. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 01/13/2023 --- -# What's New in DevTools (Microsoft Edge 109) +# What's new in DevTools (Microsoft Edge 109) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -22,6 +22,8 @@ These are the latest features in the Stable release of Microsoft Edge DevTools. ## Import and export your DevTools instances with the new enhanced traces feature + + In Microsoft Edge 109, you can turn on new settings to export enhanced traces from the **Performance** and **Memory** tools. These enhanced traces include more information, such as: @@ -63,7 +65,8 @@ To try the enhanced traces feature: You can also export from the **Memory** tool with the new `.devtools` file format. This is a new feature that the DevTools team is actively experimenting with, so please send us your feedback in [[Feedback] Enhanced Traces experiment #122](https://github.com/MicrosoftEdge/DevTools/issues/122). See also: -* [Share enhanced performance and memory traces](../../../experimental-features/share-traces.md) +* [Share a memory trace with more data](../../../experimental-features/share-memory-traces.md) +* [Share a performance trace with more data](../../../performance/share-performance-traces.md) diff --git a/microsoft-edge/devtools/whats-new/2023/02/devtools-110.md b/microsoft-edge/devtools/whats-new/2023/02/devtools-110.md index bc40d3bb71..88c573f4d9 100644 --- a/microsoft-edge/devtools/whats-new/2023/02/devtools-110.md +++ b/microsoft-edge/devtools/whats-new/2023/02/devtools-110.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 110) +title: What's new in DevTools (Microsoft Edge 110) description: "Faster heap snapshots in Memory tool. Move tools between Activity Bar and Quick View in Focus Mode. Screen readers report when More Tools is expanded. Change Dock and Activity Bar location via keyboard. Screen readers announce which theme is selected. Improved support for contrast themes. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 02/09/2023 --- -# What's New in DevTools (Microsoft Edge 110) +# What's new in DevTools (Microsoft Edge 110) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2023/03/devtools-111.md b/microsoft-edge/devtools/whats-new/2023/03/devtools-111.md index 0542350ba9..ab1d17ab08 100644 --- a/microsoft-edge/devtools/whats-new/2023/03/devtools-111.md +++ b/microsoft-edge/devtools/whats-new/2023/03/devtools-111.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 111) +title: What's new in DevTools (Microsoft Edge 111) description: "Remote debugging of Microsoft Edge, PWAs, and WebView2 controls on HoloLens 2 devices. Device Mode toolbar has emulation controls for themes and vision deficiencies. Performance tool unminifies file and function names while profiling. Styles tab easier to use in Focus Mode. Copy Selector Stats table from Performance tool. In Focus Mode, assistive tech announces tool moved to Quick View. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 03/15/2023 --- -# What's New in DevTools (Microsoft Edge 111) +# What's new in DevTools (Microsoft Edge 111) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -73,7 +73,7 @@ See also: -Microsoft Edge 99 added a new feature to the **Performance** tool called **Unminify**. This **Unminify** feature applied sourcemaps to a profile that was recorded with the **Performance** tool, and then downloaded the unminified profile to your machine. The **Unminify** feature is described in [Use your source maps to display original function names in performance profiles](../../2022/03/devtools.md#use-your-source-maps-to-display-original-function-names-in-performance-profiles) in _What's New in DevTools (Microsoft Edge 99)_. +Microsoft Edge 99 added a new feature to the **Performance** tool called **Unminify**. This **Unminify** feature applied sourcemaps to a profile that was recorded with the **Performance** tool, and then downloaded the unminified profile to your machine. The **Unminify** feature is described in [Use your source maps to display original function names in performance profiles](../../2022/03/devtools.md#use-your-source-maps-to-display-original-function-names-in-performance-profiles) in _What's new in DevTools (Microsoft Edge 99)_. In Microsoft Edge 111, this feature has been removed, because the Performance tool now automatically provides the original file and function names while profiling production code, as long as source maps are loaded. Source maps can be loaded reliably and securely by hosting them on Azure Artifacts Symbol Server. @@ -113,7 +113,7 @@ See also: -Microsoft Edge 109 introduced the **Selector Stats** feature in the **Performance** tool. With the **Enable advanced rendering instrumentation (slow)** setting turned on in the **Performance** tool, selecting any **Recalculate Styles** event in the flame chart adds a **Selector Stats** tab in the bottom pane. See [Debug long-running Recalculate Style events with new selector stats](../../2023/01/devtools-109.md#debug-long-running-recalculate-style-events-with-new-selector-stats) in _What's New in DevTools (Microsoft Edge 109)_. +Microsoft Edge 109 introduced the **Selector Stats** feature in the **Performance** tool. With the **Enable advanced rendering instrumentation (slow)** setting turned on in the **Performance** tool, selecting any **Recalculate Styles** event in the flame chart adds a **Selector Stats** tab in the bottom pane. See [Debug long-running Recalculate Style events with new selector stats](../../2023/01/devtools-109.md#debug-long-running-recalculate-style-events-with-new-selector-stats) in _What's new in DevTools (Microsoft Edge 109)_. In Microsoft Edge 111, you can now export the **Selector Stats** table for each **Recalculate Styles** event to a Microsoft Excel workbook. You can then use Excel to do aggregate selector performance analysis, and identify the most costly selectors over the lifetime of the profile. diff --git a/microsoft-edge/devtools/whats-new/2023/04/devtools-112.md b/microsoft-edge/devtools/whats-new/2023/04/devtools-112.md index d5c796139c..81a5345cfb 100644 --- a/microsoft-edge/devtools/whats-new/2023/04/devtools-112.md +++ b/microsoft-edge/devtools/whats-new/2023/04/devtools-112.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 112) +title: What's new in DevTools (Microsoft Edge 112) description: "The Performance tool can now unminify JavaScript running in out-of-process iframes, the CSS overview tool displays a list of non-simple selectors for quick performance wins, and more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 04/11/2023 --- -# What's New in DevTools (Microsoft Edge 112) +# What's new in DevTools (Microsoft Edge 112) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -44,7 +44,7 @@ In Microsoft Edge 112, the **Performance** tool now loads sourcemaps and applies --> See also: -* [Performance tool unminifies file and function names when profiling production code](../03/devtools-111.md#performance-tool-unminifies-file-and-function-names-when-profiling-production-code) in _What's New in DevTools (Microsoft Edge 111)_. +* [Performance tool unminifies file and function names when profiling production code](../03/devtools-111.md#performance-tool-unminifies-file-and-function-names-when-profiling-production-code) in _What's new in DevTools (Microsoft Edge 111)_. * [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) * [Record performance](../../../performance/reference.md#record-performance) in _Performance features reference_. diff --git a/microsoft-edge/devtools/whats-new/2023/05/devtools-113.md b/microsoft-edge/devtools/whats-new/2023/05/devtools-113.md index 16b619ecd4..fc77417b63 100644 --- a/microsoft-edge/devtools/whats-new/2023/05/devtools-113.md +++ b/microsoft-edge/devtools/whats-new/2023/05/devtools-113.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 113) +title: What's new in DevTools (Microsoft Edge 113) description: "Debug JavaScript error stack traces with the experimental Crash analyzer tool. The Memory tool can now unminify object names in heap snapshots. The Issues tool has better support for keyboard navigation. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 05/25/2023 --- -# What's New in DevTools (Microsoft Edge 113) +# What's new in DevTools (Microsoft Edge 113) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -145,7 +145,7 @@ In the **Containment** and **Statistics** views, the **Node Types** filter is no ![The Node Types filter is not displayed in the Containment view of a heap snapshot](./devtools-113-images/memory-tool-node-filter-containment.png) See also: -* [Filter heap snapshots summary by node type](../../2022/03/devtools-100.md#filter-heap-snapshots-summary-by-node-type) in _What's New in DevTools (Microsoft Edge 100)_ +* [Filter heap snapshots summary by node type](../../2022/03/devtools-100.md#filter-heap-snapshots-summary-by-node-type) in _What's new in DevTools (Microsoft Edge 100)_ * [Take a snapshot](../../../memory-problems/heap-snapshots.md#take-a-snapshot) in _Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)_. diff --git a/microsoft-edge/devtools/whats-new/2023/06/devtools-114.md b/microsoft-edge/devtools/whats-new/2023/06/devtools-114.md index f05b3e12b3..dde6336db3 100644 --- a/microsoft-edge/devtools/whats-new/2023/06/devtools-114.md +++ b/microsoft-edge/devtools/whats-new/2023/06/devtools-114.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 114) +title: What's new in DevTools (Microsoft Edge 114) description: "Aggregate Selector Stats in Performance tool. Issues tool warns when CSS properties trigger Layout. Memory tool loads enhanced traces larger than 1 GB. Memory tool accurately compares heap snapshots. CSS overview accessibility improvements. Debugging Microsoft Edge in VS Code supports high contrast. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 06/15/2023 --- -# What's New in DevTools (Microsoft Edge 114) +# What's new in DevTools (Microsoft Edge 114) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -44,7 +44,7 @@ Thank you for using the **Selector Stats** feature and sharing your feedback wit See also: * [Analyze CSS selector performance during Recalculate Style events](../../../performance/selector-stats.md) * [GitHub Issue #98: \[Feedback\] Selector Performance Tracing Explainer](https://github.com/MicrosoftEdge/DevTools/issues/98) -* [Debug long-running Recalculate Style events with new selector stats](../01/devtools-109.md#debug-long-running-recalculate-style-events-with-new-selector-stats) in _What's New in DevTools (Microsoft Edge 109)_. +* [Debug long-running Recalculate Style events with new selector stats](../01/devtools-109.md#debug-long-running-recalculate-style-events-with-new-selector-stats) in _What's new in DevTools (Microsoft Edge 109)_. @@ -75,6 +75,8 @@ See also: ## The Memory tool can load enhanced traces larger than 1 GB + + In previous versions of Microsoft Edge, loading an enhanced trace larger than 1 GB failed. In Microsoft Edge 114, this issue has been fixed. You can now successfully load enhanced traces of any size. @@ -88,7 +90,8 @@ Enhanced traces is an experimental feature in Microsoft Edge that allows you to ![An enhanced trace](./devtools-114-images/enhanced-trace-1gb.png) See also: -* [Share enhanced performance and memory traces](../../../experimental-features/share-traces.md) +* [Share a memory trace with more data](../../../experimental-features/share-memory-traces.md) +* [Share a performance trace with more data](../../../performance/share-performance-traces.md) * [GitHub Issue #122: \[Feedback\] Enhanced Traces experiment](https://github.com/MicrosoftEdge/DevTools/issues/122) @@ -121,7 +124,7 @@ When you click a selector, or navigate to a selector and then press **Enter**, s ![Navigating the CSS overview tool with the keyboard](./devtools-114-images/non-simple-selectors-css-overview-a11y.png) See also: -* [CSS overview tool displays non-simple selectors for quick performance gains](../04/devtools-112.md#css-overview-tool-displays-non-simple-selectors-for-quick-performance-gains) in _What's New in DevTools (Microsoft Edge 112)_. +* [CSS overview tool displays non-simple selectors for quick performance gains](../04/devtools-112.md#css-overview-tool-displays-non-simple-selectors-for-quick-performance-gains) in _What's new in DevTools (Microsoft Edge 112)_. * [Non-simple selectors](../../../css/css-overview-tool.md#non-simple-selectors) in _Optimize CSS styles with the CSS overview tool_. * [Navigate DevTools with assistive technology](../../../accessibility/navigation.md) diff --git a/microsoft-edge/devtools/whats-new/2023/07/devtools-115.md b/microsoft-edge/devtools/whats-new/2023/07/devtools-115.md index 414936ea93..a5b38b76d8 100644 --- a/microsoft-edge/devtools/whats-new/2023/07/devtools-115.md +++ b/microsoft-edge/devtools/whats-new/2023/07/devtools-115.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 115) +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 @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 08/18/2023 --- -# What's New in DevTools (Microsoft Edge 115) +# What's new in DevTools (Microsoft Edge 115) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2023/08/devtools-116.md b/microsoft-edge/devtools/whats-new/2023/08/devtools-116.md index 169c02ee3c..746ce73f96 100644 --- a/microsoft-edge/devtools/whats-new/2023/08/devtools-116.md +++ b/microsoft-edge/devtools/whats-new/2023/08/devtools-116.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 116) +title: What's new in DevTools (Microsoft Edge 116) description: "Activity Bar has a Move Activity Bar button. React Developer Tools extension works in Focus Mode. A Containment Diff view in the Memory tool when multiple heap snapshots. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 08/17/2023 --- -# What's New in DevTools (Microsoft Edge 116) +# What's new in DevTools (Microsoft Edge 116) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2023/09/devtools-117.md b/microsoft-edge/devtools/whats-new/2023/09/devtools-117.md index e5d32f9bb3..240312a7b1 100644 --- a/microsoft-edge/devtools/whats-new/2023/09/devtools-117.md +++ b/microsoft-edge/devtools/whats-new/2023/09/devtools-117.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 117) +title: What's new in DevTools (Microsoft Edge 117) description: "New Experiment: Explain console errors/warnings with Copilot in Sidebar. Console has content when re-opened in Quick View. Accessibility fixes. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 09/14/2023 --- -# What's New in DevTools (Microsoft Edge 117) +# What's new in DevTools (Microsoft Edge 117) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2023/10/devtools-118.md b/microsoft-edge/devtools/whats-new/2023/10/devtools-118.md index be40b2fa0a..d849a9debb 100644 --- a/microsoft-edge/devtools/whats-new/2023/10/devtools-118.md +++ b/microsoft-edge/devtools/whats-new/2023/10/devtools-118.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 118) +title: What's new in DevTools (Microsoft Edge 118) description: "DevTools defaults to no throttling instead of offline. Updates to the 'Explain console errors/warnings with Copilot in Sidebar' experiment. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 10/12/2023 --- -# What's New in DevTools (Microsoft Edge 118) +# What's new in DevTools (Microsoft Edge 118) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2023/11/devtools-119.md b/microsoft-edge/devtools/whats-new/2023/11/devtools-119.md index d12ac0823f..2dac66c5b7 100644 --- a/microsoft-edge/devtools/whats-new/2023/11/devtools-119.md +++ b/microsoft-edge/devtools/whats-new/2023/11/devtools-119.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 119) +title: What's new in DevTools (Microsoft Edge 119) description: "Increased text color contrast for Error pills (badges) in the Issues tool. Increased text color contrast for tree items on the left side of the Application tool. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 11/02/2023 --- -# What's New in DevTools (Microsoft Edge 119) +# What's new in DevTools (Microsoft Edge 119) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2023/12/devtools-120.md b/microsoft-edge/devtools/whats-new/2023/12/devtools-120.md index ea8686a28e..3613c387db 100644 --- a/microsoft-edge/devtools/whats-new/2023/12/devtools-120.md +++ b/microsoft-edge/devtools/whats-new/2023/12/devtools-120.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 120) +title: What's new in DevTools (Microsoft Edge 120) description: "Edge DevTools has a new user interface. Explain with Copilot in DevTools is generally available. New Recorder tool to record and replay common user flows and measure performance. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 12/07/2023 --- -# What's New in DevTools (Microsoft Edge 120) +# What's new in DevTools (Microsoft Edge 120) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2024/01/devtools-121.md b/microsoft-edge/devtools/whats-new/2024/01/devtools-121.md index 1844bf1bc2..5661ac6757 100644 --- a/microsoft-edge/devtools/whats-new/2024/01/devtools-121.md +++ b/microsoft-edge/devtools/whats-new/2024/01/devtools-121.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 121) +title: What's new in DevTools (Microsoft Edge 121) description: "Z-index and DOM tabs in 3D View tool working correctly. Correct Hide debugger or Show debugger icon in Sources tool. Source map support in Coverage tool. Advanced filtering in Bottom-up, Call tree, and Event log tabs in Performance tool. Window Controls Overlay section for PWAs, in Application tool's Manifest section. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 01/25/2024 --- -# What's New in DevTools (Microsoft Edge 121) +# What's new in DevTools (Microsoft Edge 121) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2024/02/devtools-122.md b/microsoft-edge/devtools/whats-new/2024/02/devtools-122.md index 0211e3d10a..ef5de076cf 100644 --- a/microsoft-edge/devtools/whats-new/2024/02/devtools-122.md +++ b/microsoft-edge/devtools/whats-new/2024/02/devtools-122.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 122) +title: What's new in DevTools (Microsoft Edge 122) description: "Copilot's explanation of Console errors includes a suggested fix. Keyboard shortcut to move through the open tools is working correctly. Icons are displayed correctly in high-contrast mode. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 02/23/2024 --- -# What's New in DevTools (Microsoft Edge 122) +# What's new in DevTools (Microsoft Edge 122) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2024/03/devtools-123.md b/microsoft-edge/devtools/whats-new/2024/03/devtools-123.md index 01b0c51f23..cc9a5b3686 100644 --- a/microsoft-edge/devtools/whats-new/2024/03/devtools-123.md +++ b/microsoft-edge/devtools/whats-new/2024/03/devtools-123.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 123) +title: What's new in DevTools (Microsoft Edge 123) description: "Memory tool reports backing store sizes as part of an object's shallow size. Crash analyzer tool is available by default. Command Palette experimental feature has been removed. Undocked DevTools window is kept focused as the topmost window while inspecting a page. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 03/21/2024 --- -# What's New in DevTools (Microsoft Edge 123) +# What's new in DevTools (Microsoft Edge 123) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -69,10 +69,10 @@ See also: The Command Palette experimental feature has been removed from Microsoft Edge, starting with version 123. See also: -* [Introducing the Command Palette](../../2022/09/devtools-106.md#introducing-the-command-palette) in _What's New in DevTools (Microsoft Edge 106)_. -* [New keyboard shortcut for the Command Palette experiment](../../2022/10/devtools-107.md#new-keyboard-shortcut-for-the-command-palette-experiment) in _What's New in DevTools (Microsoft Edge 107)_. -* [Improved DevTools navigation via Command Palette](../../2022/12/devtools-108.md#improved-devtools-navigation-via-command-palette) in _What's New in DevTools (Microsoft Edge 108)_. -* [Navigate directly to the Styles and Computed Styles tabs of the Elements tool](../../2023/01/devtools-109.md#navigate-directly-to-the-styles-and-computed-styles-tabs-of-the-elements-tool) in _What's New in DevTools (Microsoft Edge 109)_. +* [Introducing the Command Palette](../../2022/09/devtools-106.md#introducing-the-command-palette) in _What's new in DevTools (Microsoft Edge 106)_. +* [New keyboard shortcut for the Command Palette experiment](../../2022/10/devtools-107.md#new-keyboard-shortcut-for-the-command-palette-experiment) in _What's new in DevTools (Microsoft Edge 107)_. +* [Improved DevTools navigation via Command Palette](../../2022/12/devtools-108.md#improved-devtools-navigation-via-command-palette) in _What's new in DevTools (Microsoft Edge 108)_. +* [Navigate directly to the Styles and Computed Styles tabs of the Elements tool](../../2023/01/devtools-109.md#navigate-directly-to-the-styles-and-computed-styles-tabs-of-the-elements-tool) in _What's new in DevTools (Microsoft Edge 109)_. diff --git a/microsoft-edge/devtools/whats-new/2024/04/devtools-124.md b/microsoft-edge/devtools/whats-new/2024/04/devtools-124.md index 376a5cbb07..454f3694ff 100644 --- a/microsoft-edge/devtools/whats-new/2024/04/devtools-124.md +++ b/microsoft-edge/devtools/whats-new/2024/04/devtools-124.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 124) +title: What's new in DevTools (Microsoft Edge 124) description: "postMessage events and handlers are distinguished from other events on the timeline. Move a tab left or right in the Activity bar by right-clicking it. Network tab shows a warning icon when using overrides or throttling. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 04/18/2024 --- -# What's New in DevTools (Microsoft Edge 124) +# What's new in DevTools (Microsoft Edge 124) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2024/05/devtools-125.md b/microsoft-edge/devtools/whats-new/2024/05/devtools-125.md index d935dcb003..d0d35ff8c5 100644 --- a/microsoft-edge/devtools/whats-new/2024/05/devtools-125.md +++ b/microsoft-edge/devtools/whats-new/2024/05/devtools-125.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 125) +title: What's new in DevTools (Microsoft Edge 125) description: "New dedicated setting for CSS Selector Stats in Performance tool. The Edit and Resend function has been restored in the Network tool. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 05/16/2024 --- -# What's New in DevTools (Microsoft Edge 125) +# What's new in DevTools (Microsoft Edge 125) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2024/06/devtools-126.md b/microsoft-edge/devtools/whats-new/2024/06/devtools-126.md index 6de49c94cc..a0ec4aeb00 100644 --- a/microsoft-edge/devtools/whats-new/2024/06/devtools-126.md +++ b/microsoft-edge/devtools/whats-new/2024/06/devtools-126.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 126) +title: What's new in DevTools (Microsoft Edge 126) description: "Icons for browser extensions are displayed instead of blank squares. The DevTools UI in Chinese has changed back to the original font. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 06/13/2024 --- -# What's New in DevTools (Microsoft Edge 126) +# What's new in DevTools (Microsoft Edge 126) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2024/07/devtools-127.md b/microsoft-edge/devtools/whats-new/2024/07/devtools-127.md index a6924b9a1a..990c6be2a5 100644 --- a/microsoft-edge/devtools/whats-new/2024/07/devtools-127.md +++ b/microsoft-edge/devtools/whats-new/2024/07/devtools-127.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 127) +title: What's new in DevTools (Microsoft Edge 127) description: "Use Copilot to explain HTML and CSS in the Elements tool. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 07/26/2024 --- -# What's New in DevTools (Microsoft Edge 127) +# What's new in DevTools (Microsoft Edge 127) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2024/08/devtools-128.md b/microsoft-edge/devtools/whats-new/2024/08/devtools-128.md index 6e27384f10..12538ae761 100644 --- a/microsoft-edge/devtools/whats-new/2024/08/devtools-128.md +++ b/microsoft-edge/devtools/whats-new/2024/08/devtools-128.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 128) +title: What's new in DevTools (Microsoft Edge 128) description: "Updated labels for selector stats. Fixed whitespace in Activity Bar right-click menus. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 08/22/2024 --- -# What's New in DevTools (Microsoft Edge 128) +# What's new in DevTools (Microsoft Edge 128) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2024/09/devtools-129.md b/microsoft-edge/devtools/whats-new/2024/09/devtools-129.md index 9f0086b0f0..40650c790d 100644 --- a/microsoft-edge/devtools/whats-new/2024/09/devtools-129.md +++ b/microsoft-edge/devtools/whats-new/2024/09/devtools-129.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 129) +title: What's new in DevTools (Microsoft Edge 129) description: "Unique breakpoint icons. Fixed CSS selector stats Copy table. Added Activity Bar icons. Fixed Security tool icons and device emulation. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 09/20/2024 --- -# What's New in DevTools (Microsoft Edge 129) +# What's new in DevTools (Microsoft Edge 129) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2024/10/devtools-130.md b/microsoft-edge/devtools/whats-new/2024/10/devtools-130.md index 26d811a18f..fc46952d75 100644 --- a/microsoft-edge/devtools/whats-new/2024/10/devtools-130.md +++ b/microsoft-edge/devtools/whats-new/2024/10/devtools-130.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 130) +title: What's new in DevTools (Microsoft Edge 130) description: "Detached Elements profile in Memory tool. Improved names of JavaScript objects in heap snapshots. Create collection or environment in Network Console. Fixed icon bugs. Performance tab icon when throttled. High-contrast Warning count. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 10/17/2024 --- -# What's New in DevTools (Microsoft Edge 130) +# What's new in DevTools (Microsoft Edge 130) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2024/11/devtools-131.md b/microsoft-edge/devtools/whats-new/2024/11/devtools-131.md index 4c6bb97274..9f33dba0f6 100644 --- a/microsoft-edge/devtools/whats-new/2024/11/devtools-131.md +++ b/microsoft-edge/devtools/whats-new/2024/11/devtools-131.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 131) +title: What's new in DevTools (Microsoft Edge 131) description: "Can disable Edge experiment settings. View CSS selector stats information in Insights tab of sidebar panel in Performance tool. Fixed edit field to exit after pressing tab after auto-completion. Removed Visual Studio Code themes. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 11/14/2024 --- -# What's New in DevTools (Microsoft Edge 131) +# What's new in DevTools (Microsoft Edge 131) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2025/01/devtools-132.md b/microsoft-edge/devtools/whats-new/2025/01/devtools-132.md index 7ba83fbcc9..ccd8446694 100644 --- a/microsoft-edge/devtools/whats-new/2025/01/devtools-132.md +++ b/microsoft-edge/devtools/whats-new/2025/01/devtools-132.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 132) +title: What's new in DevTools (Microsoft Edge 132) description: "CSS selector costs include links in Insights sidebar. Right-click a tab to move it left or right in Quick View. Heap snapshot objects categorized by constructor names and source locations in Memory tool. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 1/16/2025 --- -# What's New in DevTools (Microsoft Edge 132) +# What's new in DevTools (Microsoft Edge 132) These are the latest features in the Stable release of Microsoft Edge DevTools. @@ -25,7 +25,7 @@ Some selectors might have more than one link when they are defined in multiple l ![CSS selector costs links](./devtools-132-images/selector-stats-links.png) See also: -* [View CSS selector costs in the Performance tool sidebar](../../2024/11/devtools-131.md#view-css-selector-costs-in-the-performance-tool-sidebar) in _What's New in DevTools (Microsoft Edge 131)_. +* [View CSS selector costs in the Performance tool sidebar](../../2024/11/devtools-131.md#view-css-selector-costs-in-the-performance-tool-sidebar) in _What's new in DevTools (Microsoft Edge 131)_. diff --git a/microsoft-edge/devtools/whats-new/2025/02/devtools-133.md b/microsoft-edge/devtools/whats-new/2025/02/devtools-133.md index 8a81510925..4d41b5977c 100644 --- a/microsoft-edge/devtools/whats-new/2025/02/devtools-133.md +++ b/microsoft-edge/devtools/whats-new/2025/02/devtools-133.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 133) +title: What's new in DevTools (Microsoft Edge 133) description: "Move a tab left or right within the Elements or Sources tool. Screen reader improvements. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 02/06/2025 --- -# What's New in DevTools (Microsoft Edge 133) +# What's new in DevTools (Microsoft Edge 133) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2025/03/devtools-134.md b/microsoft-edge/devtools/whats-new/2025/03/devtools-134.md index d16c5fe2ab..e8917c508c 100644 --- a/microsoft-edge/devtools/whats-new/2025/03/devtools-134.md +++ b/microsoft-edge/devtools/whats-new/2025/03/devtools-134.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 134) +title: What's new in DevTools (Microsoft Edge 134) description: "Forced reflow in the Performance Insights sidebar. Heap snapshot statistics account for every byte. Simplified DevTools Themes menu. And more." author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 03/06/2025 --- -# What's New in DevTools (Microsoft Edge 134) +# What's new in DevTools (Microsoft Edge 134) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2025/04/devtools-135.md b/microsoft-edge/devtools/whats-new/2025/04/devtools-135.md index e3e5485842..4beb98b218 100644 --- a/microsoft-edge/devtools/whats-new/2025/04/devtools-135.md +++ b/microsoft-edge/devtools/whats-new/2025/04/devtools-135.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 135) +title: What's new in DevTools (Microsoft Edge 135) description: Origin and script links for profile and function calls. 'Network dependency tree' insight. Heaviest stack highlighting. Improved empty tools. And more. # key words before col 158 author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 04/03/2025 --- -# What's New in DevTools (Microsoft Edge 135) +# What's new in DevTools (Microsoft Edge 135) These are the latest features in the Stable release of Microsoft Edge DevTools. Microsoft Edge 135 includes the following updates from the Chromium project: diff --git a/microsoft-edge/devtools/whats-new/2025/05/devtools-136.md b/microsoft-edge/devtools/whats-new/2025/05/devtools-136.md index f9d7e3f770..255ae6f97d 100644 --- a/microsoft-edge/devtools/whats-new/2025/05/devtools-136.md +++ b/microsoft-edge/devtools/whats-new/2025/05/devtools-136.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 136) +title: What's new in DevTools (Microsoft Edge 136) description: DOM tree in Elements tool highlights semantic errors. And more. # key words before col 158 author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 05/05/2025 --- -# What's New in DevTools (Microsoft Edge 136) +# What's new in DevTools (Microsoft Edge 136) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2025/06/devtools-137.md b/microsoft-edge/devtools/whats-new/2025/06/devtools-137.md index 23d25bed31..be11dd80b9 100644 --- a/microsoft-edge/devtools/whats-new/2025/06/devtools-137.md +++ b/microsoft-edge/devtools/whats-new/2025/06/devtools-137.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 137) +title: What's new in DevTools (Microsoft Edge 137) description: The Enable settings sync checkbox lets you sync your DevTools settings across devices. And more. # key words before col 158 author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 05/29/2025 --- -# What's New in DevTools (Microsoft Edge 137) +# What's new in DevTools (Microsoft Edge 137) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2025/06/devtools-138.md b/microsoft-edge/devtools/whats-new/2025/06/devtools-138.md index 94fdf3713f..8de69baa03 100644 --- a/microsoft-edge/devtools/whats-new/2025/06/devtools-138.md +++ b/microsoft-edge/devtools/whats-new/2025/06/devtools-138.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 138) +title: What's new in DevTools (Microsoft Edge 138) description: Server response and redirection times in 'Document request latency' insight. Redirects in Summary of network requests. And more. # key words before col 158 author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 07/01/2025 --- -# What's New in DevTools (Microsoft Edge 138) +# What's new in DevTools (Microsoft Edge 138) These are the latest features in the Stable release of Microsoft Edge DevTools. Microsoft Edge 138 includes the following updates from the Chromium project: diff --git a/microsoft-edge/devtools/whats-new/2025/08/devtools-139.md b/microsoft-edge/devtools/whats-new/2025/08/devtools-139.md index b1cbb739f6..870705020b 100644 --- a/microsoft-edge/devtools/whats-new/2025/08/devtools-139.md +++ b/microsoft-edge/devtools/whats-new/2025/08/devtools-139.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 139) +title: What's new in DevTools (Microsoft Edge 139) description: Added request headers to the table in the Network tool. And more. # key words before col 158 author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 08/07/2025 --- -# What's New in DevTools (Microsoft Edge 139) +# What's new in DevTools (Microsoft Edge 139) These are the latest features in the Stable release of Microsoft Edge DevTools. Microsoft Edge 139 includes the following updates from the Chromium project: diff --git a/microsoft-edge/devtools/whats-new/2025/09/devtools-140.md b/microsoft-edge/devtools/whats-new/2025/09/devtools-140.md index 582eb6f731..94a6ff2b82 100644 --- a/microsoft-edge/devtools/whats-new/2025/09/devtools-140.md +++ b/microsoft-edge/devtools/whats-new/2025/09/devtools-140.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 140) +title: What's new in DevTools (Microsoft Edge 140) description: Invalidation count in CSS selector stats, in the Performance tool. Emulate the 'Save-Data' header in Network conditions. And more. # key words before col 158 author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 09/04/2025 --- -# What's New in DevTools (Microsoft Edge 140) +# What's new in DevTools (Microsoft Edge 140) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2025/10/devtools-141.md b/microsoft-edge/devtools/whats-new/2025/10/devtools-141.md index ffa92528df..8816670345 100644 --- a/microsoft-edge/devtools/whats-new/2025/10/devtools-141.md +++ b/microsoft-edge/devtools/whats-new/2025/10/devtools-141.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 141) +title: What's new in DevTools (Microsoft Edge 141) description: CSS masonry layout support in the Elements tool. Persisted track configuration in the Performance panel. And more. # key words before col 158 author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 10/02/2025 --- -# What's New in DevTools (Microsoft Edge 141) +# What's new in DevTools (Microsoft Edge 141) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools/whats-new/2025/10/devtools-142.md b/microsoft-edge/devtools/whats-new/2025/10/devtools-142.md index 6532f71480..bf04253854 100644 --- a/microsoft-edge/devtools/whats-new/2025/10/devtools-142.md +++ b/microsoft-edge/devtools/whats-new/2025/10/devtools-142.md @@ -1,5 +1,5 @@ --- -title: What's New in DevTools (Microsoft Edge 142) +title: What's new in DevTools (Microsoft Edge 142) description: Activity Bar horizontal in Edge 144. Application tool storage inspection for all worker types. :target-current in Elements tool Styles tab. Network tool filters requests on Is ad-related boolean. # key words before col 158 author: MSEdgeTeam ms.author: msedgedevrel @@ -8,7 +8,7 @@ ms.service: microsoft-edge ms.subservice: devtools ms.date: 10/30/2025 --- -# What's New in DevTools (Microsoft Edge 142) +# What's new in DevTools (Microsoft Edge 142) These are the latest features in the Stable release of Microsoft Edge DevTools. diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 1fe0c552d8..f439f78475 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -120,264 +120,269 @@ - name: What's New items: - name: What's New in Microsoft Edge DevTools - href: ./devtools/whats-new/whats-new.md + href: ./devtools/whats-new/whats-new.md # todo: ought to be index.md displayName: release notes, announcements # latest 10 What's New + - name: Microsoft Edge 143 + href: ./devtools/whats-new/143.md + displayName: What's new in DevTools (Microsoft Edge 143) # page title + - name: Microsoft Edge 142 href: ./devtools/whats-new/2025/10/devtools-142.md - displayName: What's New in DevTools (Microsoft Edge 142) # page title + displayName: What's new in DevTools (Microsoft Edge 142) # page title - name: Microsoft Edge 141 href: ./devtools/whats-new/2025/10/devtools-141.md - displayName: What's New in DevTools (Microsoft Edge 141) # page title + displayName: What's new in DevTools (Microsoft Edge 141) # page title - name: Microsoft Edge 140 href: ./devtools/whats-new/2025/09/devtools-140.md - displayName: What's New in DevTools (Microsoft Edge 140) # page title + displayName: What's new in DevTools (Microsoft Edge 140) # page title - name: Microsoft Edge 139 href: ./devtools/whats-new/2025/08/devtools-139.md - displayName: What's New in DevTools (Microsoft Edge 139) # page title + displayName: What's new in DevTools (Microsoft Edge 139) # page title - name: Microsoft Edge 138 href: ./devtools/whats-new/2025/06/devtools-138.md - displayName: What's New in DevTools (Microsoft Edge 138) # page title + displayName: What's new in DevTools (Microsoft Edge 138) # page title - name: Microsoft Edge 137 href: ./devtools/whats-new/2025/06/devtools-137.md - displayName: What's New in DevTools (Microsoft Edge 137) # page title + displayName: What's new in DevTools (Microsoft Edge 137) # page title - name: Microsoft Edge 136 href: ./devtools/whats-new/2025/05/devtools-136.md - displayName: What's New in DevTools (Microsoft Edge 136) # page title + displayName: What's new in DevTools (Microsoft Edge 136) # page title - name: Microsoft Edge 135 href: ./devtools/whats-new/2025/04/devtools-135.md - displayName: What's New in DevTools (Microsoft Edge 135) # page title + displayName: What's new in DevTools (Microsoft Edge 135) # page title - name: Microsoft Edge 134 href: ./devtools/whats-new/2025/03/devtools-134.md - displayName: What's New in DevTools (Microsoft Edge 134) # page title - - - name: Microsoft Edge 133 - href: ./devtools/whats-new/2025/02/devtools-133.md - displayName: What's New in DevTools (Microsoft Edge 133) # page title + displayName: What's new in DevTools (Microsoft Edge 134) # page title # keep 10 items above # ------------------------------------- - name: Archive items: + + - name: Microsoft Edge 133 + href: ./devtools/whats-new/2025/02/devtools-133.md + displayName: What's new in DevTools (Microsoft Edge 133) # page title + - name: Microsoft Edge 132 href: ./devtools/whats-new/2025/01/devtools-132.md - displayName: What's New in DevTools (Microsoft Edge 132) # page title + displayName: What's new in DevTools (Microsoft Edge 132) # page title - name: Microsoft Edge 131 href: ./devtools/whats-new/2024/11/devtools-131.md - displayName: What's New in DevTools (Microsoft Edge 131) # page title + displayName: What's new in DevTools (Microsoft Edge 131) # page title - name: Microsoft Edge 130 href: ./devtools/whats-new/2024/10/devtools-130.md - displayName: What's New in DevTools (Microsoft Edge 130) # page title + displayName: What's new in DevTools (Microsoft Edge 130) # page title - name: Microsoft Edge 129 href: ./devtools/whats-new/2024/09/devtools-129.md - displayName: What's New in DevTools (Microsoft Edge 129) # page title + displayName: What's new in DevTools (Microsoft Edge 129) # page title - name: Microsoft Edge 128 href: ./devtools/whats-new/2024/08/devtools-128.md - displayName: What's New in DevTools (Microsoft Edge 128) # page title + displayName: What's new in DevTools (Microsoft Edge 128) # page title - name: Microsoft Edge 127 href: ./devtools/whats-new/2024/07/devtools-127.md - displayName: What's New in DevTools (Microsoft Edge 127) # page title + displayName: What's new in DevTools (Microsoft Edge 127) # page title - name: Microsoft Edge 126 href: ./devtools/whats-new/2024/06/devtools-126.md - displayName: What's New in DevTools (Microsoft Edge 126) # page title + displayName: What's new in DevTools (Microsoft Edge 126) # page title - name: Microsoft Edge 125 href: ./devtools/whats-new/2024/05/devtools-125.md - displayName: What's New in DevTools (Microsoft Edge 125) # page title + displayName: What's new in DevTools (Microsoft Edge 125) # page title - name: Microsoft Edge 124 href: ./devtools/whats-new/2024/04/devtools-124.md - displayName: What's New in DevTools (Microsoft Edge 124) # page title + displayName: What's new in DevTools (Microsoft Edge 124) # page title - name: Microsoft Edge 123 href: ./devtools/whats-new/2024/03/devtools-123.md - displayName: What's New in DevTools (Microsoft Edge 123) # page title + displayName: What's new in DevTools (Microsoft Edge 123) # page title - name: Microsoft Edge 122 href: ./devtools/whats-new/2024/02/devtools-122.md - displayName: What's New in DevTools (Microsoft Edge 122) # page title + displayName: What's new in DevTools (Microsoft Edge 122) # page title - name: Microsoft Edge 121 href: ./devtools/whats-new/2024/01/devtools-121.md - displayName: What's New in DevTools (Microsoft Edge 121) # page title + displayName: What's new in DevTools (Microsoft Edge 121) # page title - name: Microsoft Edge 120 href: ./devtools/whats-new/2023/12/devtools-120.md - displayName: What's New in DevTools (Microsoft Edge 120) # page title + displayName: What's new in DevTools (Microsoft Edge 120) # page title - name: Microsoft Edge 119 href: ./devtools/whats-new/2023/11/devtools-119.md - displayName: What's New in DevTools (Microsoft Edge 119) # page title + displayName: What's new in DevTools (Microsoft Edge 119) # page title - name: Microsoft Edge 118 href: ./devtools/whats-new/2023/10/devtools-118.md - displayName: What's New in DevTools (Microsoft Edge 118) # page title + displayName: What's new in DevTools (Microsoft Edge 118) # page title - name: Microsoft Edge 117 href: ./devtools/whats-new/2023/09/devtools-117.md - displayName: What's New in DevTools (Microsoft Edge 117) # page title + displayName: What's new in DevTools (Microsoft Edge 117) # page title - name: Microsoft Edge 116 href: ./devtools/whats-new/2023/08/devtools-116.md - displayName: What's New in DevTools (Microsoft Edge 116) # page title + displayName: What's new in DevTools (Microsoft Edge 116) # page title - name: Microsoft Edge 115 href: ./devtools/whats-new/2023/07/devtools-115.md - displayName: What's New in DevTools (Microsoft Edge 115) # page title + displayName: What's new in DevTools (Microsoft Edge 115) # page title - name: Microsoft Edge 114 href: ./devtools/whats-new/2023/06/devtools-114.md - displayName: What's New in DevTools (Microsoft Edge 114) # page title + displayName: What's new in DevTools (Microsoft Edge 114) # page title - name: Microsoft Edge 113 href: ./devtools/whats-new/2023/05/devtools-113.md - displayName: What's New in DevTools (Microsoft Edge 113) # page title + displayName: What's new in DevTools (Microsoft Edge 113) # page title - name: Microsoft Edge 112 href: ./devtools/whats-new/2023/04/devtools-112.md - displayName: What's New in DevTools (Microsoft Edge 112) # page title + displayName: What's new in DevTools (Microsoft Edge 112) # page title - name: Microsoft Edge 111 href: ./devtools/whats-new/2023/03/devtools-111.md - displayName: What's New in DevTools (Microsoft Edge 111) # page title + displayName: What's new in DevTools (Microsoft Edge 111) # page title - name: Microsoft Edge 110 href: ./devtools/whats-new/2023/02/devtools-110.md - displayName: What's New in DevTools (Microsoft Edge 110) # page title + displayName: What's new in DevTools (Microsoft Edge 110) # page title - name: Microsoft Edge 109 href: ./devtools/whats-new/2023/01/devtools-109.md - displayName: What's New in DevTools (Microsoft Edge 109) # page title + displayName: What's new in DevTools (Microsoft Edge 109) # page title - name: Microsoft Edge 108 href: ./devtools/whats-new/2022/12/devtools-108.md - displayName: What's New in DevTools (Microsoft Edge 108) # page title + displayName: What's new in DevTools (Microsoft Edge 108) # page title - name: Microsoft Edge 107 href: ./devtools/whats-new/2022/10/devtools-107.md - displayName: What's New in DevTools (Microsoft Edge 107) # page title + displayName: What's new in DevTools (Microsoft Edge 107) # page title - name: Microsoft Edge 106 href: ./devtools/whats-new/2022/09/devtools-106.md - displayName: What's New in DevTools (Microsoft Edge 106) # page title + displayName: What's new in DevTools (Microsoft Edge 106) # page title - name: Microsoft Edge 105 href: ./devtools/whats-new/2022/09/devtools-105.md - displayName: What's New in DevTools (Microsoft Edge 105) # page title + displayName: What's new in DevTools (Microsoft Edge 105) # page title - name: Microsoft Edge 104 href: ./devtools/whats-new/2022/08/devtools-104.md - displayName: What's New in DevTools (Microsoft Edge 104) # page title + displayName: What's new in DevTools (Microsoft Edge 104) # page title - name: Microsoft Edge 103 href: ./devtools/whats-new/2022/06/devtools-103.md - displayName: What's New in DevTools (Microsoft Edge 103) # page title + displayName: What's new in DevTools (Microsoft Edge 103) # page title - name: Microsoft Edge 102 href: ./devtools/whats-new/2022/05/devtools-102.md - displayName: What's New in DevTools (Microsoft Edge 102) # page title + displayName: What's new in DevTools (Microsoft Edge 102) # page title - name: Microsoft Edge 101 href: ./devtools/whats-new/2022/04/devtools-101.md - displayName: What's New in DevTools (Microsoft Edge 101) # page title + displayName: What's new in DevTools (Microsoft Edge 101) # page title - name: Microsoft Edge 100 href: ./devtools/whats-new/2022/03/devtools-100.md - displayName: What's New in DevTools (Microsoft Edge 100) # page title + displayName: What's new in DevTools (Microsoft Edge 100) # page title - name: Microsoft Edge 99 href: ./devtools/whats-new/2022/03/devtools.md - displayName: What's New in DevTools (Microsoft Edge 99) # page title + displayName: What's new in DevTools (Microsoft Edge 99) # page title - name: Microsoft Edge 98 href: ./devtools/whats-new/2022/02/devtools.md - displayName: What's New in DevTools (Microsoft Edge 98) # page title + displayName: What's new in DevTools (Microsoft Edge 98) # page title - name: Microsoft Edge 97 href: ./devtools/whats-new/2022/01/devtools.md - displayName: What's New in DevTools (Microsoft Edge 97) # page title + displayName: What's new in DevTools (Microsoft Edge 97) # page title - name: Microsoft Edge 96 href: ./devtools/whats-new/2021/11/devtools.md - displayName: What's New in DevTools (Microsoft Edge 96) # page title + displayName: What's new in DevTools (Microsoft Edge 96) # page title - name: Microsoft Edge 95 href: ./devtools/whats-new/2021/10/devtools.md - displayName: What's New in DevTools (Microsoft Edge 95) # page title + displayName: What's new in DevTools (Microsoft Edge 95) # page title - name: Microsoft Edge 94 href: ./devtools/whats-new/2021/09/devtools.md - displayName: What's New in DevTools (Microsoft Edge 94) # page title + displayName: What's new in DevTools (Microsoft Edge 94) # page title - name: Microsoft Edge 93 href: ./devtools/whats-new/2021/07/devtools.md - displayName: What's New in DevTools (Microsoft Edge 93) # page title + displayName: What's new in DevTools (Microsoft Edge 93) # page title - name: Microsoft Edge 92 href: ./devtools/whats-new/2021/05/devtools.md - displayName: What's New in DevTools (Microsoft Edge 92) # page title + displayName: What's new in DevTools (Microsoft Edge 92) # page title - name: Microsoft Edge 91 href: ./devtools/whats-new/2021/04/devtools.md - displayName: What's New in DevTools (Microsoft Edge 91) # page title + displayName: What's new in DevTools (Microsoft Edge 91) # page title - name: Microsoft Edge 90 href: ./devtools/whats-new/2021/02/devtools.md - displayName: What's New in DevTools (Microsoft Edge 90) # page title + displayName: What's new in DevTools (Microsoft Edge 90) # page title - name: Microsoft Edge 89 href: ./devtools/whats-new/2021/01/devtools.md - displayName: What's New in DevTools (Microsoft Edge 89) # page title + displayName: What's new in DevTools (Microsoft Edge 89) # page title - name: Microsoft Edge 88 href: ./devtools/whats-new/2020/11/devtools.md - displayName: What's New in DevTools (Microsoft Edge 88) # page title + displayName: What's new in DevTools (Microsoft Edge 88) # page title - name: Microsoft Edge 87 href: ./devtools/whats-new/2020/10/devtools.md - displayName: What's New in DevTools (Microsoft Edge 87) # page title + displayName: What's new in DevTools (Microsoft Edge 87) # page title - name: Microsoft Edge 86 href: ./devtools/whats-new/2020/08/devtools.md - displayName: What's New in DevTools (Microsoft Edge 86) # page title + displayName: What's new in DevTools (Microsoft Edge 86) # page title - name: Microsoft Edge 85 href: ./devtools/whats-new/2020/06/devtools.md - displayName: What's New in DevTools (Microsoft Edge 85) # page title + displayName: What's new in DevTools (Microsoft Edge 85) # page title - name: Microsoft Edge 84 href: ./devtools/whats-new/2020/05/devtools.md - displayName: What's New in DevTools (Microsoft Edge 84) # page title + displayName: What's new in DevTools (Microsoft Edge 84) # page title - name: Microsoft Edge 83 href: ./devtools/whats-new/2020/03/devtools.md - displayName: What's New in DevTools (Microsoft Edge 83) # page title + displayName: What's new in DevTools (Microsoft Edge 83) # page title # - name: Microsoft Edge 82 # href: ./devtools/whats-new/2020/02/devtools.md # no such file -# displayName: What's New in DevTools (Microsoft Edge 82) # page title +# displayName: What's new in DevTools (Microsoft Edge 82) # page title - name: Microsoft Edge 81 href: ./devtools/whats-new/2020/01/devtools.md - displayName: What's New in DevTools (Microsoft Edge 81) # page title + displayName: What's new in DevTools (Microsoft Edge 81) # page title - name: Microsoft Edge 80 href: ./devtools/whats-new/2019/12/devtools.md - displayName: What's New in DevTools (Microsoft Edge 80) # page title + displayName: What's new in DevTools (Microsoft Edge 80) # page title # ----------------------------------------------------------------------------- - name: Experimental features items: @@ -385,16 +390,16 @@ href: ./devtools/experimental-features/index.md displayName: Experimental features, settings - - name: Share enhanced performance and memory traces - href: ./devtools/experimental-features/share-traces.md - displayName: Experimental features, Enhanced traces, Memory tool, Performance tool + - name: Share a memory trace with more data + href: ./devtools/experimental-features/share-memory-traces.md + displayName: Experimental features, Memory tool # ----------------------------------------------------------------------------- - name: Samples items: - name: Sample code for DevTools href: ./devtools/samples/index.md displayName: sample code, demo -# ----------------------------------------------------------------------------- +# TOOLS ======================================================================= - name: Tools items: - name: About the list of tools @@ -606,6 +611,10 @@ href: ./devtools/performance/reference.md displayName: Performance tool, Rendering tool + - name: Share a performance trace with more data + href: ./devtools/performance/share-performance-traces.md + displayName: Performance tool + - name: Performance recording event reference # = Performance > Timeline event reference href: ./devtools/performance/performance-reference.md displayName: Performance tool diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/debugging-a-webpage.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/debugging-a-webpage.md index ad08885972..00845a4bc8 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/debugging-a-webpage.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/debugging-a-webpage.md @@ -197,7 +197,7 @@ Which webpage opens is in DevTools is set by `launch.json` if that file exists i * [The launch.json file for the DevTools extension](./launch-json.md) * [Debug Microsoft Edge in Visual Studio Code](../debugger-for-edge.md) * [Microsoft Edge DevTools extension for Visual Studio Code](../microsoft-edge-devtools-extension.md) -* [The Visual Studio Code debugger now integrates with the DevTools extension](../../devtools/whats-new/2021/07/devtools.md#the-visual-studio-code-debugger-now-integrates-with-the-devtools-extension) in _What's New in DevTools (Microsoft Edge 93)_. +* [The Visual Studio Code debugger now integrates with the DevTools extension](../../devtools/whats-new/2021/07/devtools.md#the-visual-studio-code-debugger-now-integrates-with-the-devtools-extension) in _What's new in DevTools (Microsoft Edge 93)_. **External pages:** diff --git a/microsoft-edge/visual-studio/index.md b/microsoft-edge/visual-studio/index.md index 260817a626..5663b55399 100644 --- a/microsoft-edge/visual-studio/index.md +++ b/microsoft-edge/visual-studio/index.md @@ -175,7 +175,7 @@ See also: * [Network conditions tool](../devtools/network-conditions/network-conditions-tool.md) * [Network request blocking tool](../devtools/network-request-blocking/network-request-blocking-tool.md) * [Edge Developer Tools for Visual Studio (Preview)](https://devblogs.microsoft.com/visualstudio/edge-developer-tools-for-visual-studio-preview/), at Visual Studio DevBlogs. -* [Microsoft Edge DevTools extension for Visual Studio](../devtools/whats-new/2022/03/devtools.md#microsoft-edge-devtools-extension-for-visual-studio) in _What's New in DevTools (Microsoft Edge 99)_. +* [Microsoft Edge DevTools extension for Visual Studio](../devtools/whats-new/2022/03/devtools.md#microsoft-edge-devtools-extension-for-visual-studio) in _What's new in DevTools (Microsoft Edge 99)_. @@ -190,7 +190,7 @@ The Microsoft Visual Studio and Microsoft Edge teams wants to learn more about h ## See also -* [Microsoft Edge DevTools extension for Visual Studio](../devtools/whats-new/2022/03/devtools.md#microsoft-edge-devtools-extension-for-visual-studio) in _What's New in DevTools (Microsoft Edge 99)_. +* [Microsoft Edge DevTools extension for Visual Studio](../devtools/whats-new/2022/03/devtools.md#microsoft-edge-devtools-extension-for-visual-studio) in _What's new in DevTools (Microsoft Edge 99)_. * [Find and fix problems using the Issues tool](../devtools/issues/index.md) * [Network conditions tool](../devtools/network-conditions/network-conditions-tool.md) * [Network request blocking tool](../devtools/network-request-blocking/network-request-blocking-tool.md) diff --git a/microsoft-edge/web-platform/release-notes/133.md b/microsoft-edge/web-platform/release-notes/133.md index 5fa7f5de12..86fa9db1f2 100644 --- a/microsoft-edge/web-platform/release-notes/133.md +++ b/microsoft-edge/web-platform/release-notes/133.md @@ -58,7 +58,7 @@ To stay up-to-date and get the latest web platform features, download a preview ## Edge DevTools -See [What's New in DevTools (Microsoft Edge 133)](../../devtools/whats-new/2025/02/devtools-133.md). +See [What's new in DevTools (Microsoft Edge 133)](../../devtools/whats-new/2025/02/devtools-133.md). diff --git a/microsoft-edge/web-platform/release-notes/134.md b/microsoft-edge/web-platform/release-notes/134.md index 0b86b8c2c1..e4f6cb3940 100644 --- a/microsoft-edge/web-platform/release-notes/134.md +++ b/microsoft-edge/web-platform/release-notes/134.md @@ -46,7 +46,7 @@ To stay up-to-date and get the latest web platform features, download a preview ## Edge DevTools -See [What's New in DevTools (Microsoft Edge 134)](../../devtools/whats-new/2025/03/devtools-134.md). +See [What's new in DevTools (Microsoft Edge 134)](../../devtools/whats-new/2025/03/devtools-134.md). diff --git a/microsoft-edge/web-platform/release-notes/135.md b/microsoft-edge/web-platform/release-notes/135.md index c77dacb5c7..f79bfe0567 100644 --- a/microsoft-edge/web-platform/release-notes/135.md +++ b/microsoft-edge/web-platform/release-notes/135.md @@ -60,7 +60,7 @@ To stay up-to-date and get the latest web platform features, download a preview ## Edge DevTools -See [What's New in DevTools (Microsoft Edge 135)](../../devtools/whats-new/2025/04/devtools-135.md). +See [What's new in DevTools (Microsoft Edge 135)](../../devtools/whats-new/2025/04/devtools-135.md). diff --git a/microsoft-edge/web-platform/release-notes/136.md b/microsoft-edge/web-platform/release-notes/136.md index dab07d7c71..805396d22a 100644 --- a/microsoft-edge/web-platform/release-notes/136.md +++ b/microsoft-edge/web-platform/release-notes/136.md @@ -58,7 +58,7 @@ To stay up-to-date and get the latest web platform features, download a preview ## Edge DevTools -See [What's New in DevTools (Microsoft Edge 136)](../../devtools/whats-new/2025/05/devtools-136.md). +See [What's new in DevTools (Microsoft Edge 136)](../../devtools/whats-new/2025/05/devtools-136.md). diff --git a/microsoft-edge/web-platform/release-notes/137.md b/microsoft-edge/web-platform/release-notes/137.md index 180aeac865..5a2dffefb3 100644 --- a/microsoft-edge/web-platform/release-notes/137.md +++ b/microsoft-edge/web-platform/release-notes/137.md @@ -53,7 +53,7 @@ To stay up-to-date and get the latest web platform features, download a preview ## Edge DevTools -See [What's New in DevTools (Microsoft Edge 137)](../../devtools/whats-new/2025/06/devtools-137.md). +See [What's new in DevTools (Microsoft Edge 137)](../../devtools/whats-new/2025/06/devtools-137.md). diff --git a/microsoft-edge/web-platform/release-notes/138.md b/microsoft-edge/web-platform/release-notes/138.md index b58c9063be..3402448831 100644 --- a/microsoft-edge/web-platform/release-notes/138.md +++ b/microsoft-edge/web-platform/release-notes/138.md @@ -51,7 +51,7 @@ To stay up-to-date and get the latest web platform features, download a preview ## Edge DevTools -See [What's New in DevTools (Microsoft Edge 138)](../../devtools/whats-new/2025/06/devtools-138.md). +See [What's new in DevTools (Microsoft Edge 138)](../../devtools/whats-new/2025/06/devtools-138.md). diff --git a/microsoft-edge/web-platform/release-notes/139.md b/microsoft-edge/web-platform/release-notes/139.md index be18f3016a..e8c1acd627 100644 --- a/microsoft-edge/web-platform/release-notes/139.md +++ b/microsoft-edge/web-platform/release-notes/139.md @@ -54,7 +54,7 @@ To stay up-to-date and get the latest web platform features, download a preview ## Edge DevTools -See [What's New in DevTools (Microsoft Edge 139)](../../devtools/whats-new/2025/08/devtools-139.md). +See [What's new in DevTools (Microsoft Edge 139)](../../devtools/whats-new/2025/08/devtools-139.md). diff --git a/microsoft-edge/web-platform/release-notes/140.md b/microsoft-edge/web-platform/release-notes/140.md index 9b9d31e376..099eb08380 100644 --- a/microsoft-edge/web-platform/release-notes/140.md +++ b/microsoft-edge/web-platform/release-notes/140.md @@ -50,7 +50,7 @@ To stay up-to-date and get the latest web platform features, download a preview ## Edge DevTools -See [What's New in DevTools (Microsoft Edge 140)](../../devtools/whats-new/2025/09/devtools-140.md). +See [What's new in DevTools (Microsoft Edge 140)](../../devtools/whats-new/2025/09/devtools-140.md). diff --git a/microsoft-edge/web-platform/release-notes/141.md b/microsoft-edge/web-platform/release-notes/141.md index 6d5f67e5c9..f54abcf5cd 100644 --- a/microsoft-edge/web-platform/release-notes/141.md +++ b/microsoft-edge/web-platform/release-notes/141.md @@ -44,7 +44,7 @@ To stay up-to-date and get the latest web platform features, download a preview ## Edge DevTools -See [What's New in DevTools (Microsoft Edge 141)](../../devtools/whats-new/2025/10/devtools-141.md). +See [What's new in DevTools (Microsoft Edge 141)](../../devtools/whats-new/2025/10/devtools-141.md). diff --git a/microsoft-edge/web-platform/release-notes/142.md b/microsoft-edge/web-platform/release-notes/142.md index cfb110c4f2..57a3d29a8f 100644 --- a/microsoft-edge/web-platform/release-notes/142.md +++ b/microsoft-edge/web-platform/release-notes/142.md @@ -49,7 +49,7 @@ To stay up-to-date and get the latest web platform features, download a preview ## Edge DevTools -See [What's New in DevTools (Microsoft Edge 142)](../../devtools/whats-new/2025/10/devtools-142.md). +See [What's new in DevTools (Microsoft Edge 142)](../../devtools/whats-new/2025/10/devtools-142.md). diff --git a/microsoft-edge/web-platform/release-notes/143.md b/microsoft-edge/web-platform/release-notes/143.md index 87cf346bcb..6ce2fc2cee 100644 --- a/microsoft-edge/web-platform/release-notes/143.md +++ b/microsoft-edge/web-platform/release-notes/143.md @@ -5,10 +5,9 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: article ms.service: microsoft-edge -ms.date: 11/25/2025 +ms.date: 12/04/2025 --- # Microsoft Edge 143 web platform release notes (Dec. 2025) - The following are the new web platform features and updates in Microsoft Edge 143, which releases on December 4, 2025. @@ -55,19 +54,13 @@ To stay up-to-date and get the latest web platform features, download a preview ## Edge DevTools -See [What's New in Microsoft Edge DevTools](../../devtools/whats-new/whats-new.md). - +See [What's new in DevTools (Microsoft Edge 143)](../../devtools/whats-new/143.md). ## WebView2 -See [Release Notes for the WebView2 SDK](../../webview2/release-notes/index.md). - +See [1.0.3650.58](../../webview2/release-notes/index.md#10365058) (December 8, 2025) in _Release Notes for the WebView2 SDK_. diff --git a/microsoft-edge/web-platform/release-notes/144.md b/microsoft-edge/web-platform/release-notes/144.md index 71615afa5f..04d0b8aca6 100644 --- a/microsoft-edge/web-platform/release-notes/144.md +++ b/microsoft-edge/web-platform/release-notes/144.md @@ -5,9 +5,13 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: article ms.service: microsoft-edge -ms.date: 11/24/2025 +ms.date: 01/08/2026 --- # Microsoft Edge 144 web platform release notes (Jan. 2026) + The following are the new web platform features and updates in Microsoft Edge 144, which releases on January 15, 2026. @@ -61,7 +65,7 @@ To stay up-to-date and get the latest web platform features, download a preview See [What's New in Microsoft Edge DevTools](../../devtools/whats-new/whats-new.md). diff --git a/redirects/.openpublishing.redirection.devtools.json b/redirects/.openpublishing.redirection.devtools.json index 359cacc6fe..598fdd793d 100644 --- a/redirects/.openpublishing.redirection.devtools.json +++ b/redirects/.openpublishing.redirection.devtools.json @@ -468,7 +468,12 @@ }, { "source_path": "../microsoft-edge/devtools-guide-chromium/experimental-features/share-traces.md", - "redirect_url": "/microsoft-edge/devtools/experimental-features/share-traces", + "redirect_url": "/microsoft-edge/devtools/performance/share-performance-traces", + "redirect_document_id": false + }, + { + "source_path": "../microsoft-edge/devtools/experimental-features/share-traces.md", + "redirect_url": "/microsoft-edge/devtools/performance/share-performance-traces", "redirect_document_id": false }, {