diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md index ff10558d14..8c87cfc4a0 100644 --- a/microsoft-edge/dev-videos/index.md +++ b/microsoft-edge/dev-videos/index.md @@ -186,7 +186,7 @@ See also: * [What's New in DevTools (Microsoft Edge 109)](../devtools-guide-chromium/whats-new/2023/01/devtools-109.md) * [Share enhanced performance and memory traces](../devtools-guide-chromium/experimental-features/share-traces.md) * [Analyze CSS selector performance during Recalculate Style events](../devtools-guide-chromium/evaluate-performance/selector-stats.md) - selector stats. -* [Reduce garbage with additional settings for allocation sampling](../devtools-guide-chromium/memory-problems/index.md#reduce-garbage-with-additional-settings-for-allocation-sampling) in _Fix memory problems_. +* [Investigate memory allocation, with reduced garbage ("Include objects" checkboxes)](../devtools-guide-chromium/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) * [Heap Snapshot visualizer](https://microsoftedge.microsoft.com/addons/detail/heap-snapshot-visualizer/fceldlhognbemkgfacnffkdanocidgce) extension. @@ -626,12 +626,16 @@ December 9, 2021 [![Thumbnail image for video "Debug memory leaks with the Microsoft Edge Detached Elements tool"](./index-images/detached-elements.png)](https://www.youtube.com/watch?v=v2iy17ptmBk) +To debug DOM memory leaks, use either: +* The **Detached Elements** tool. Detached nodes have a link to the associated JavaScript code. +* The **Detached elements** profiling type in the **Memory** tool. + The **Detached Elements** tool helps you investigate and resolve DOM memory leaks. Memory leaks occur when the JavaScript code of an application retains more and more objects in memory instead of releasing them for the browser to garbage-collect. We built the **Detached Elements** tool with the Microsoft Teams developers, and it has already helped us find and fix memory leaks across many of our own websites and apps. See also: -* [Debug DOM memory leaks with the Detached Elements tool](../devtools-guide-chromium/memory-problems/dom-leaks.md) +* [Debug DOM memory leaks by using the Detached Elements tool](../devtools-guide-chromium/memory-problems/dom-leaks.md) * [Debug memory leaks with the Microsoft Edge Detached Elements tool](https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/) - blog post. diff --git a/microsoft-edge/devtools-guide-chromium/about-tools.md b/microsoft-edge/devtools-guide-chromium/about-tools.md index 7bbb026d3d..f6fa57ddf2 100644 --- a/microsoft-edge/devtools-guide-chromium/about-tools.md +++ b/microsoft-edge/devtools-guide-chromium/about-tools.md @@ -15,7 +15,7 @@ DevTools provides more than 30 tools: * Two icons on the **Activity Bar**, for the **Inspect tool** (![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png)) and **Device Emulation** (![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png)). * Three permanent tool tabs on the **Activity Bar**, for the **Elements**, **Console**, and **Sources** tools. * Optional tabs, for optional tools such as the **Welcome** and **Network** tools. -* More optional tools, on the **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) menu, such as the **3D View** and **Detached Elements** tools. +* More optional tools, on the **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) menu, such as the **3D View** tool. ![The default tools, including two icons and eight tabs in the Activity Bar](./about-tools-images/all-default-tools.png) @@ -41,7 +41,7 @@ Microsoft Edge DevTools includes the following tools. | **Coverage** tool | Help you find unused JavaScript and CSS code, to speed up your page load and save your mobile users cellular data. | [Find unused JavaScript and CSS code with the Coverage tool](coverage/index.md) | | **Crash analyzer** tool | Analyze crashes of your web app. You can input a JavaScript production stack trace, such as for non-fatal JavaScript exceptions, and then have your source maps applied to the stack trace so that you can debug faster. | [Crash analyzer tool](./crash-analyzer/index.md) | | **CSS Overview** tool | Help you better understand your page's CSS and identify potential improvements. | [CSS Overview tool](css/css-overview-tool.md) | -| **Detached Elements** tool | To increase the performance of your page, this tool finds detached elements that the browser cannot garbage-collect, and identifies the JavaScript object that is still referencing the detached element. By changing your JavaScript to release the element, you reduce the number of detached elements on your page, increasing page performance and responsiveness. | [Debug DOM memory leaks with the Detached Elements tool](memory-problems/dom-leaks.md) | +| **Detached Elements** tool | To increase the performance of your webpage, find detached elements that the browser can't garbage-collect, and then identify the JavaScript object that's still referencing the detached element. Then change your JavaScript to release the element, to reduce the number of detached elements on your page, increasing page performance and responsiveness. | [Debug DOM memory leaks by using the Detached Elements tool](memory-problems/dom-leaks.md) | | **Developer Resources** | Shows resource URLs for the webpage. | [Developer Resources tool](developer-resources/developer-resources.md) | | **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) | | **Elements** tool | Inspect, edit, and debug your HTML and CSS. You can edit in the tool while displaying the changes live in the browser. Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements-tool/elements-tool.md) | diff --git a/microsoft-edge/devtools-guide-chromium/console/utilities.md b/microsoft-edge/devtools-guide-chromium/console/utilities.md index 899686d892..ec09c538a6 100644 --- a/microsoft-edge/devtools-guide-chromium/console/utilities.md +++ b/microsoft-edge/devtools-guide-chromium/console/utilities.md @@ -632,7 +632,7 @@ You can also specify a collection of events by using one of the predefined sets `profile([name])` starts a JavaScript CPU profiling session with an optional name. -To complete the profile and display the results in the **Performance** tool, call [profileEnd([name])](#profileendname). +To complete the profile and display the results in the **Performance** tool, call [profileEnd([name])](#profileendname). #### Syntax @@ -671,7 +671,7 @@ profileEnd('A'); `profileEnd([name])` completes a JavaScript CPU profiling session and displays the results in the **Performance** tool. -To call this function, you must be running the [profile([name])](#profilename) function. +To call this function, you must be running the [profile([name])](#profilename) function. #### Syntax diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/performance-memory.png b/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/performance-memory.png new file mode 100644 index 0000000000..b0fb887256 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference-images/performance-memory.png differ diff --git a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md b/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md index 257de2d036..74b2339ef2 100644 --- a/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md +++ b/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md @@ -499,6 +499,9 @@ The colored lines on the chart map to the colored checkboxes above the chart. C The chart only displays the region of the recording that is currently selected. For example, in the previous figure, the **Memory** chart is only showing memory usage from around the 3600 ms mark to the 6200 ms mark. +See also: +* [Visualize memory leaks (Performance tool: Memory checkbox)](#visualize-memory-leaks-performance-tool-memory-checkbox), below. + #### View the duration of a portion of a recording @@ -689,6 +692,57 @@ Use **Disable local fonts** to make it easier to: * Discover differences between local versions installed on your device and a web font. + + + + +## Visualize memory leaks (Performance tool: Memory checkbox) + +As a starting point to investigate webpage memory usage, use the **Performance** tool's **Memory** checkbox. (Or, [Monitor memory use in realtime (Microsoft Edge Browser Task Manager)](../memory-problems/microsoft-edge-browser-task-manager.md).) + +The **Performance** tool helps you visualize the memory use of a page over time. + +1. In DevTools, open the **Performance** tool. + +1. Select the **Memory** checkbox. + +1. Make a recording, per [Record performance](#record-performance), above. + +It's a good practice to start and end your recording with a forced garbage collection. To force garbage collection, click the **collect garbage** ![force garbage collection](./reference-images/collect-garbage-icon.png) button while recording. + +To demonstrate memory recordings, consider the following code: + +```javascript +var x = []; +function grow() { + for (var i = 0; i < 10000; i++) { + document.body.appendChild(document.createElement('div')); + } + x.push(new Array(1000000).join('x')); +} +document.getElementById('grow').addEventListener('click', grow); +``` + +Every time that the button referenced in the code is clicked, 10,000 `div` nodes are appended to the document body, and a string of 1,000,000 `x` characters is pushed onto the `x` array. Running the previous code produces a recording in the **Performance** tool: + +![Simple growth](./reference-images/performance-memory.png) + +First, an explanation of the user interface. The **HEAP** graph in the **Overview** pane (below **NET**) represents the JS heap. Below the **Overview** pane is the **Counter** pane. The memory usage is broken down by JS heap (same as **HEAP** graph in the **Overview** pane), documents, DOM nodes, listeners, and GPU memory. Clear a checkbox to hide it from the graph. + +Now, an analysis of the code compared with the previous figure. If you review the node counter (the green graph), it matches up cleanly with the code. The node count increases in discrete steps. You can presume that each increase in the node count is a call to `grow()`. + +The JS heap graph (the blue graph) is not as straightforward. In keeping with best practices, the first dip is actually a forced garbage collection (click the **collect garbage** ![force garbage collection](./reference-images/collect-garbage-icon.png) button). + +As the recording progresses, the JS heap size spikes are displayed. This is natural and expected: the JavaScript code is creating the DOM nodes on every button you click, and is doing a lot of work when it creates the string of one million characters. + +The key thing here is the fact that the JS heap ends higher than it began (the "beginning" here being the point after the forced garbage collection). In the real world, if you saw this pattern of increasing JS heap size or node size, it would potentially indicate a memory leak. + + + +See also: +* [View memory metrics](#view-memory-metrics), above. + + > [!NOTE] > Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md index f492c86083..08805b433d 100644 --- a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md +++ b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md @@ -216,7 +216,7 @@ Whether to display a checkbox to expose internals in heap snapshots in the **Mem See also: -* [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) +* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../memory-problems/heap-snapshots.md) Status: * This checkbox is present in Microsoft Edge Canary 131. @@ -774,7 +774,7 @@ Controls whether to live-update the heap profile. See also: -* [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) +* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../memory-problems/heap-snapshots.md) Status: * This checkbox is present in Microsoft Edge Canary 131. @@ -789,7 +789,7 @@ Controls whether to show the sampling heap profiler timeline in the **Performanc See also: * [Introduction to the Performance tool](../evaluate-performance/index.md) -* [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md) +* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../memory-problems/heap-snapshots.md) Status: * This checkbox is present in Microsoft Edge Canary 131. diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/share-traces-images/importing-memory-trace.png b/microsoft-edge/devtools-guide-chromium/experimental-features/share-traces-images/importing-memory-trace.png index b84e571b26..9dfd121652 100644 Binary files a/microsoft-edge/devtools-guide-chromium/experimental-features/share-traces-images/importing-memory-trace.png and b/microsoft-edge/devtools-guide-chromium/experimental-features/share-traces-images/importing-memory-trace.png differ diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/share-traces.md b/microsoft-edge/devtools-guide-chromium/experimental-features/share-traces.md index 8e2f372f92..415ea258f1 100644 --- a/microsoft-edge/devtools-guide-chromium/experimental-features/share-traces.md +++ b/microsoft-edge/devtools-guide-chromium/experimental-features/share-traces.md @@ -153,7 +153,7 @@ To import a trace in the **Memory** tool: 1. Open the **Memory** tool. -1. Click **Load**. +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) diff --git a/microsoft-edge/devtools-guide-chromium/landing/index.yml b/microsoft-edge/devtools-guide-chromium/landing/index.yml index 9b88399004..e141b1dbac 100644 --- a/microsoft-edge/devtools-guide-chromium/landing/index.yml +++ b/microsoft-edge/devtools-guide-chromium/landing/index.yml @@ -166,7 +166,7 @@ landingContent: - text: Fix memory problems url: ../memory-problems/index.md - - text: Debug DOM memory leaks with the Detached Elements tool + - text: Debug DOM memory leaks by using the Detached Elements tool url: ../memory-problems/dom-leaks.md - text: Understand security issues using the Security tool diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/allocation-timeline-snapshot-all.png b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/allocation-timeline-snapshot-all.png new file mode 100644 index 0000000000..4e3db1cbeb Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/allocation-timeline-snapshot-all.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/allocation-timeline-snapshot-focused-constructor-expanded.png b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/allocation-timeline-snapshot-focused-constructor-expanded.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/memory-problems/index-images/allocation-timeline-snapshot-focused-constructor-expanded.png rename to microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/allocation-timeline-snapshot-focused-constructor-expanded.png diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/allocation-timeline-snapshot-focused.png b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/allocation-timeline-snapshot-focused.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/memory-problems/index-images/allocation-timeline-snapshot-focused.png rename to microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/allocation-timeline-snapshot-focused.png diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/allocation-timelines-profile.png b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/allocation-timelines-profile.png new file mode 100644 index 0000000000..dc33eef46c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/allocation-timelines-profile.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/instrumentation-on-timeline-selected.png b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/instrumentation-on-timeline-selected.png deleted file mode 100644 index 74425a8378..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/instrumentation-on-timeline-selected.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/memory-tool-allocations-on-timeline-option-button.png b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/memory-tool-allocations-on-timeline-option-button.png new file mode 100644 index 0000000000..1c328173b1 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/memory-tool-allocations-on-timeline-option-button.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/memory-tool-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/memory-tool-icon.png new file mode 100644 index 0000000000..5832399c60 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/memory-tool-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/profiles-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/profiles-icon.png new file mode 100644 index 0000000000..b2bff8996c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/profiles-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/stop-recording-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/stop-recording-icon.png new file mode 100644 index 0000000000..f6de64a490 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler-images/stop-recording-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler.md b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler.md index 036b4e1c21..4e56fc68d6 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler.md @@ -1,6 +1,6 @@ --- -title: Use Allocation instrumentation on timeline -description: Use Allocation instrumentation on timeline to find objects that aren't being properly garbage collected, and continue to retain memory. +title: Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type) +description: Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type) to find objects that aren't being properly garbage collected, and continue to retain memory. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual @@ -21,23 +21,23 @@ ms.date: 07/21/2023 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. --> -# Use Allocation instrumentation on timeline +# Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type) -In the **Memory** tool, use the **Allocation instrumentation on timeline** radio button to find objects that aren't being properly garbage-collected, and continue to retain memory. +In the **Memory** tool, use the **Allocations on timeline** profiling type to find objects that aren't being properly garbage-collected, and continue to retain memory. ## How Allocation instrumentation on timeline works -**Allocation instrumentation on timeline** combines the detailed snapshot information of the [heap profiler](heap-snapshots.md) with the incremental updating and tracking of the **Performance** tool. Similarly, tracking heap allocation for objects involves starting a recording, performing a sequence of actions, and stopping the recording for analysis. +The **Memory** tool's **Allocations on timeline** profiling type combines the detailed snapshot information of the [heap profiler](heap-snapshots.md) with the incremental updating and tracking of the **Performance** tool. Similarly, tracking heap allocation for objects involves starting a recording, performing a sequence of actions, and stopping the recording for analysis. -**Allocation instrumentation on timeline** takes heap snapshots periodically throughout the recording (as frequently as every 50 ms) and one final snapshot at the end of the recording. +**Allocations on timeline** takes heap snapshots periodically throughout the recording (as frequently as every 50 ms) and one final snapshot at the end of the recording. ![Allocation instrumentation on timeline](./allocation-profiler-images/timeline-snapshot-highlighted.png) @@ -47,19 +47,81 @@ The number after the `@` is an object ID that persists across the multiple snaps ## Enable Allocation Instrumentation on Timeline -To begin using **Allocation instrumentation on timeline**: +To begin using **Allocations on timeline**: -1. To open DevTools, right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). DevTools opens. +1. Open a webpage, such as the [Detached Elements demo webpage](https://microsoftedge.github.io/Demos/detached-elements/), in a new window or tab. -1. In DevTools, in the **Activity Bar**, select the **Memory** tab. If that tab isn't visible, click the **More Tools** (![More Tools icon](./allocation-profiler-images/more-tools-icon.png)) button. +1. Right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). -1. Select the **Allocation instrumentation on timeline** radio button. + DevTools opens. -1. Start recording. +1. In DevTools, in the **Activity Bar**, select the **Memory** (![Memory tool icon](./allocation-profiler-images/memory-tool-icon.png)) tool. -The record heap allocations profiler: + If that tab isn't visible, click the **More Tools** (![More Tools icon](./allocation-profiler-images/more-tools-icon.png)) button, and then select **Memory**. The **Memory** tool opens: -![Record heap allocations profiler. Use the 'Allocation instrumentation on timeline' radio button in the Memory tool](./allocation-profiler-images/instrumentation-on-timeline-selected.png) + ![Open the Memory tool](./allocation-profiler-images/memory-tool-allocations-on-timeline-option-button.png) + +1. Select the **Allocations on timeline** option button. + + If the **Allocations on timeline** option button isn't shown, because a profile is already displayed, in the upper left, click **Profiles** (![the Profiles icon](./allocation-profiler-images/profiles-icon.png)). + +1. At the bottom of the **Memory** tool, click the **Start** button. + +1. Interact with the webpage; for example, click the **Fast traffic** button and then the **Stop** button in the demo webpage. Depending on what you are trying to analyze, you can either refresh the page, interact with the page, or just let the page run. + +1. In the upper left of the **Memory** tool, click the **Stop recording heap profile** (![The "Stop recording heap profile" icon](./allocation-profiler-images/stop-recording-icon.png)) button. + + A new **Snapshot** is created in the **Allocation timelines** section of the **Profiles** list: + + ![The new Snapshot listed in the "Allocation timelines" section of the Profiles list](./allocation-profiler-images/allocation-timelines-profile.png) + + + + +## Record allocations on the timeline + +In the **Memory** tool, use the **Allocations on timeline** profiling type. This is one of the DevTools features to track down memory leaks in your JS heap. + +Given the following code: + +```javascript +var x = []; +function grow() { + x.push(new Array(1000000).join('x')); +} +document.getElementById('grow').addEventListener('click', grow); +``` + +Every time that the button that's referenced in the code is clicked, a string of one million characters is added to the `x` array. + + +To record allocations on the timeline: + +1. Open a webpage, such as a demo webpage. + +1. Open DevTools, and select the **Memory** tool. + +1. Click the **Allocations on timeline** option button, then click the **Start** button. + +1. Perform the action that you suspect is causing the memory leak. + +1. When you are done, click the **Stop recording heap profile** ![stop recording](./allocation-profiler-images/stop-recording-icon.png) button. + +1. As you are recording, notice whether any blue bars show up on the Allocation instrumentation on the timeline: + + ![New allocations](./allocation-profiler-images/allocation-timeline-snapshot-all.png) + + Those blue bars represent new memory allocations. Those new memory allocations are your candidates for memory leaks. + +1. Zoom on a bar to filter the **Constructor** pane to only show objects that were allocated during the specified timeframe. + + ![Zoomed allocation timeline](./allocation-profiler-images/allocation-timeline-snapshot-focused.png) + +1. Expand the object and select the value to view more details in the **Object** pane. + + For example, in the details of the newly allocated object indicates that it was allocated to the `x` variable in the `Window` scope: + + ![Object details](./allocation-profiler-images/allocation-timeline-snapshot-focused-constructor-expanded.png) @@ -84,7 +146,7 @@ Clicking on a specific object in the heap shows the retaining tree in the bottom ## View memory allocation by function -You can view memory allocation by JavaScript function. See [Investigate memory allocation by function](index.md#investigate-memory-allocation-by-function). +You can view memory allocation by JavaScript function. See [Speed up JavaScript runtime ("Allocation sampling" profiling type)](../rendering-tools/js-runtime.md). diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/after-click-detach-elements.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/after-click-detach-elements.png new file mode 100644 index 0000000000..7ce20a649d Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/after-click-detach-elements.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/analyze-detached-elements.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/analyze-detached-elements.png index 4910b23e60..847c8ff3e9 100644 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/analyze-detached-elements.png and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/analyze-detached-elements.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/demo-app.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/demo-app.png index 3a37c73556..a5b70842cc 100644 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/demo-app.png and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/demo-app.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/detached-elements-tool-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/detached-elements-tool-icon.png new file mode 100644 index 0000000000..e9e1eba73d Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/detached-elements-tool-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/detached-elements-tool.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/detached-elements-tool.png new file mode 100644 index 0000000000..26ec7ffdc4 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/detached-elements-tool.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/get-detached-elements.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/get-detached-elements.png index eb5b6ae6b6..201141fe93 100644 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/get-detached-elements.png and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/get-detached-elements.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/heap-snapshot.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/heap-snapshot.png index 47a8dc47e2..7846c3fa7e 100644 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/heap-snapshot.png and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/heap-snapshot.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/javascript-retainers.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/javascript-retainers.png index 54307b0561..8ca6d7e2f7 100644 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/javascript-retainers.png and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/javascript-retainers.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/open-detached-elements.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/open-detached-elements.png index 9170c00dff..47339a0129 100644 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/open-detached-elements.png and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/open-detached-elements.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/reattached.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/reattached.png deleted file mode 100644 index 78e33b039d..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/reattached.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/remove-links.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/remove-links.png index 1c7f7b97e4..98dc763c38 100644 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/remove-links.png and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/remove-links.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/room-2-initial-view.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/room-2-initial-view.png new file mode 100644 index 0000000000..6cc7d60773 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/room-2-initial-view.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/room-js-line-13.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/room-js-line-13.png new file mode 100644 index 0000000000..5fa8f764e0 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/room-js-line-13.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/target-dropdown.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/target-dropdown.png index 4806460e74..5d9fbdf44e 100644 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/target-dropdown.png and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/target-dropdown.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/detached-dom-node-expanded.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/detached-dom-node-expanded.png new file mode 100644 index 0000000000..e7ed45954a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/detached-dom-node-expanded.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/detached-dom-nodes.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/detached-dom-nodes.png new file mode 100644 index 0000000000..f94f52d88c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/detached-dom-nodes.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/generate-messages.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/generate-messages.png new file mode 100644 index 0000000000..e2e03a2eba Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/generate-messages.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/memory-tool-detached-elements-option-button.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/memory-tool-detached-elements-option-button.png new file mode 100644 index 0000000000..0d5105a0b2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/memory-tool-detached-elements-option-button.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/memory-tool-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/memory-tool-icon.png new file mode 100644 index 0000000000..5832399c60 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/memory-tool-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/more-tools-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/more-tools-icon.png new file mode 100644 index 0000000000..71ff8ed5a2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/more-tools-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/profiles-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/profiles-icon.png new file mode 100644 index 0000000000..b2bff8996c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/profiles-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/room-2-initial-view.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/room-2-initial-view.png new file mode 100644 index 0000000000..1db2758e1c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements-images/room-2-initial-view.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements.md b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements.md new file mode 100644 index 0000000000..ff5651c80b --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements.md @@ -0,0 +1,131 @@ +--- +title: Debug DOM memory leaks ("Detached elements" profiling type) +description: Find and fix DOM memory leaks by using the Memory tool's Detached Elements profiling type, in Microsoft Edge DevTools. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 10/20/2024 +--- +# Debug DOM memory leaks ("Detached elements" profiling type) + +Use the **Memory** tool's **Detached elements** profiling type to find and display all of the detached elements on a webpage. For a comparison of tools to view detached elements, see [Tools for investigating detached elements](./index.md#tools-for-investigating-detached-elements) in _Fix memory problems_. + +The **Detached elements** profiling type helps you fix memory leaks due to detached DOM elements. The resulting profile lists the detached objects that are retained by references in your JavaScript code. This profiling type shows a view of the detached nodes to help you identify possible memory leaks on your webpage. + + + +## Analyze a webpage's detached elements + +To use the **Detached elements** profiling type to analyze a webpage's detached elements: + +1. Open a webpage, such as the [Detached Elements demo webpage](https://microsoftedge.github.io/Demos/detached-elements/), in a new window or tab. + +1. Right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). + + DevTools opens. + +1. In DevTools, in the **Activity Bar**, select the **Memory** (![Memory tool icon](./dom-leaks-memory-tool-detached-elements-images/memory-tool-icon.png)) tool. + + If that tab isn't visible, click the **More Tools** (![More Tools icon](./dom-leaks-memory-tool-detached-elements-images/more-tools-icon.png)) button, and then select **Memory**. The **Memory** tool opens: + + ![Open the Memory tool](./dom-leaks-memory-tool-detached-elements-images/memory-tool-detached-elements-option-button.png) + + If the **Detached elements** option button isn't shown, because a profile is already displayed, in the upper left, click **Profiles** (![the Profiles icon](./dom-leaks-memory-tool-detached-elements-images/profiles-icon.png)). + + You don't need to select the **Detached elements** option button at this point, because the webpage hasn't generated any detached elements yet. + + + **Generate messages, which will be stored by the JavaScript instance of the Room class:** + + The **Room 1** button is initially selected. In the JavaScript code of the demo webpage, an instance of the `Room` class is used to manage the messages in Room 1. + +1. In the demo webpage, click the **Fast traffic** button. + + The demo webpage begins generating messages and displaying them in the webpage: + + ![Generating some messages in the demo webpage](./dom-leaks-memory-tool-detached-elements-images/generate-messages.png) + +1. After some messages are displayed, click the **Stop** button in the demo webpage. + + Each message is a `
` element that's referenced by the Room 1 instance of the `Room` class. There are no detached elements in the webpage DOM tree, because all of the message elements are attached to the present, Room 1 instance of the **Room** class. + + + + **Change to a different instance of the Room class, so elements become detached:** + +1. In the demo webpage, click the **Room 2** button, which corresponds to another instance of the `Room` class. + + In the webpage, the messages disappear: + + ![Room 2 initial view](./dom-leaks-memory-tool-detached-elements-images/room-2-initial-view.png) + + The messages that were generated for the Room 1 instance of the **Room** class (`
` elements) are no longer attached to the DOM, but they're still referenced by the Room 1 instance of the **Room** class. They are detached elements, which can cause memory leaks, unless they are going to be used again by the webpage. + + + + **Get the list of detached elements:** + +1. In DevTools, in the **Memory** tool, select the **Detached elements** option button, and then click the **Start** button. + + The list of detached nodes is displayed in the **Detached nodes** column of the generated **Detached elements** profile: + + ![List of detached nodes in the Detached nodes column of the generated Detached elements profile](./dom-leaks-memory-tool-detached-elements-images/detached-dom-nodes.png) + + The detached elements are displayed, as DOM nodes like in the DOM tree in the **Elements** tool. In the **Profiles** list, in the **Detached elements** section, the profile is listed. + +1. Expand a DOM node to display its child elements (DOM nodes): + + ![An expanded detached DOM node](./dom-leaks-memory-tool-detached-elements-images/detached-dom-node-expanded.png) + + These detached elements (DOM nodes) are memory leaks, if they aren't going to be reused by the application. + + +If you want to return to the list of option buttons for profiling types, in the upper left of the **Memory** tool, click **Profiles** (![the Profiles icon](./dom-leaks-memory-tool-detached-elements-images/profiles-icon.png)). + +For additional ways to assess memory leaks, see [Tools for investigating detached elements](./index.md#tools-for-investigating-detached-elements) in _Fix memory problems_. + + + +## About detached elements and memory leaks + +Detached elements aren't always an indication of a memory leak, and memory leaks aren't always caused by detached elements. Memory leaks depend on the context of your application. + +A memory leak can occur in your application when an element is no longer attached to the Document Object Model (DOM) tree, but is still referenced by some JavaScript running on the webpage. These elements are called *detached elements*. For the browser to garbage-collect (GC) the detached element, the element must not be referenced from the DOM tree or from JavaScript code. + +Memory issues affect webpage performance, including memory leaks, memory bloat, and frequent garbage collections. Symptoms for your users include: + +* The performance of a webpage gets progressively worse over time. +* The performance of a webpage is consistently bad. +* The performance of a webpage is delayed or appears to pause frequently. + +To increase the performance of your webpage, find the elements that are detached from the DOM tree and which you didn't expect to still be referenced by JavaScript code. Find the detached elements that the browser can't garbage-collect because your code still references them, and then release the JavaScript code references to the detached elements. + + + +## Re-attaching elements + +For the Detached Elements demo webpage, it makes sense to retain the list of chat messages, so that if a user switches back to **Room 1**, the message log is preserved. Similarly, a feed in social media might detach elements as users scroll past them, and reattach them to the DOM when users scroll back up. + +When the **Detached elements** tool reports detached elements, it's not necessarily a memory leak. It's up to you to decide what's a memory leak and what's not. Maybe your app will re-attach those elements later (instead of having to re-create them, which could be slower). + +Detaching DOM nodes is a useful approach, as long as you eventually reuse those detached elements (or delete them). The value of the **Detached elements** tool is, when you suspect a memory leak, you can check whether there's an increasing number of unexpected detached DOM elements being reported by the tool. + + + +## Long-running apps and unmounting components + +Be sure to unmount components. For long-running apps, small memory leaks of only a few kilobytes can noticeably degrade performance over time. For webpages that use the React framework, React maintains a virtualized copy of the DOM. Failing to properly unmount components can potentially lead to an application leaking large parts of the virtual DOM. + + + +## See also + +* [Tools for investigating detached elements](./index.md#tools-for-investigating-detached-elements) in _Fix memory problems_. +* [Detached Elements demo webpage](https://microsoftedge.github.io/Demos/detached-elements/) + * [MicrosoftEdge/Demos > detached-elements](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) repo folder - source code. + + diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md index 04ab767054..78640c7333 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md @@ -1,37 +1,31 @@ --- -title: Debug DOM memory leaks with the Detached Elements tool -description: Use the Detached Elements tool in the Microsoft Edge DevTools to find and fix DOM memory leaks. +title: Debug DOM memory leaks by using the Detached Elements tool +description: Find and fix DOM memory leaks by using the Detached Elements tool, in Microsoft Edge DevTools. author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: devtools -ms.date: 09/18/2023 +ms.date: 10/17/2024 --- -# Debug DOM memory leaks with the Detached Elements tool +# Debug DOM memory leaks by using the Detached Elements tool + +The **Detached Elements** tool is one way to find and display all of the detached elements on a webpage. For additional ways to assess memory leaks, see, see [Tools for investigating detached elements](./index.md#tools-for-investigating-detached-elements) in _Fix memory problems_. + > [!IMPORTANT] > The **Detached Elements** tool is being deprecated. Starting with Microsoft Edge 130, the **Detached Elements** tool has a message stating that the tool is deprecated; instead, in the **Memory** tool, in the initial **Select profiling type** screen, select the **Detached elements** option button. The Edge-only Chrome DevTools Protocol (CDP) function `EdgeDOMMemory.getDetachedNodesIds` continues to work, but use `DOM.getDetachedDomNodes` instead. > > In Microsoft Edge 133, the **Detached Elements** tool will be removed; instead, in the **Memory** tool, in the initial **Select profiling type** screen, select the **Detached elements** option button. The CDP function `EdgeDOMMemory.getDetachedNodesIds` will be removed; use `DOM.getDetachedDomNodes` instead. - - -Use the **Detached Elements** tool to find detached elements that the browser cannot garbage-collect, and locate the JavaScript object that is still referencing the detached element. By changing your JavaScript to release the element, you reduce the number of detached elements on your page. -A memory leak can occur in your application when an element is no longer attached to the Document Object Model (DOM) tree, but is still referenced by some JavaScript running on the page. These elements are called *detached elements*. For the browser to garbage-collect (GC) the detached element, the element must not be referenced from the DOM tree or from JavaScript code. +To increase the performance of your webpage, find the elements that are detached from the DOM tree and which you didn't expect to still be referenced by JavaScript code. Find the detached elements that the browser can't garbage-collect because your code still references them, and then release the JavaScript code references to the detached elements. -For more information about heap snapshots and detached elements, read [Discover detached DOM tree memory leaks with Heap Snapshots](index.md#discover-detached-dom-tree-memory-leaks-with-heap-snapshots). +![The Detached Elements tool, showing list of detached elements](./dom-leaks-images/detached-elements-tool.png) -As explained in [Fix memory problems](index.md), memory issues affect page performance, including memory leaks, memory bloat, and frequent garbage collections. Symptoms for your users include: +The **Detached Elements** tool, showing retainers in the **Memory** tool, with links to open the JavaScript code in the **Sources** tool: -* The performance of a page gets progressively worse over time. -* The performance of a page is consistently bad. -* The performance of a page is delayed or appears to pause frequently. +![The Detached Elements tool, showing retainers](./dom-leaks-images/heap-snapshot.png) @@ -40,92 +34,116 @@ As explained in [Fix memory problems](index.md), memory issues affect page perfo [![Thumbnail image for video "Debug memory leaks with the Microsoft Edge Detached Elements tool"](./dom-leaks-images/detached-elements.png)](https://www.youtube.com/watch?v=v2iy17ptmBk) + +#### Strategy to fix memory leaks by using the Detached Elements tool + +1. Open a webpage to analyze. +1. Open the **Detached Elements** tool. +1. Run garbage collection, removing all nodes that are no longer referenced by a JavaScript object. +1. Get all detached elements, which couldn't be garbage-collected. +1. Analyze a particular detached element and its JavaScript, to identify the culprit node in a detached tree that is causing the entire tree to be retained. + + -## Open the Detached Elements tool +## Get detached elements and analyze a detached element's JavaScript + +To analyze a detached element by using the **Detached Elements** demo webpage: -To open the **Detached Elements** tool and load the demo page: +1. Open the [Detached Elements demo webpage](https://microsoftedge.github.io/Demos/detached-elements/) in a new window or tab. -1. Open the [Detached Elements demo application](https://microsoftedge.github.io/Demos/detached-elements/) in a new window or tab. + The **Room 1** button is initially selected. In the JavaScript code of the demo webpage, an instance of the `Room` class is used to manage the messages in Room 1. - +1. Right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). -1. To open DevTools, right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). DevTools opens. + DevTools opens. -1. In DevTools, in the **Activity Bar**, select the **Detached Elements** tab. If that tab isn't visible, click the **More Tools** (![More Tools icon](./dom-leaks-images/more-tools-icon.png)) button: +1. In DevTools, in the **Activity Bar**, select the **Detached Elements** (![The Detached Elements tool icon](./dom-leaks-images/detached-elements-tool-icon.png)) tab. If that tab isn't visible, click the **More Tools** (![More Tools icon](./dom-leaks-images/more-tools-icon.png)) button, or make DevTools wider. The **Detached Elements** tool opens: ![Open the Detached Elements tool](./dom-leaks-images/open-detached-elements.png) - -## Get detached elements + + **Generate messages, which will be stored by the JavaScript instance of the Room class:** -The **Get Detached Elements** (![The Get Detached Elements icon](./dom-leaks-images/get-detached-elements-icon.png)) button in the **Detached Elements** tool finds and displays all of the detached elements on a web page. +1. In the demo webpage, click the **Fast traffic** button. -To find detached elements: + The demo webpage begins generating messages and displaying them in the webpage: -1. In the demo application, make sure that the **Room 1** button is selected. + ![Generating some messages in the demo webpage](./dom-leaks-images/demo-app.png) -1. In the demo application, click the **Fast traffic** button. +1. After some messages are displayed, click the **Stop** button in the demo webpage. -1. After some messages are generated and displayed in the demo application, click the demo's **Stop** button: + Each message is a `
` element that's referenced by the Room 1 instance of the `Room` class. There are no detached elements in the webpage DOM tree, because all of the message elements are attached to the present, Room 1 instance of the **Room** class. - ![Generating some messages in the demo application](./dom-leaks-images/demo-app.png) -1. Click the **Room 2** button: + + **Change to a different instance of the Room class, so elements become detached:** -1. In the **Detached Elements** tool, click the **Get Detached Elements** (![The Get Detached Elements icon](./dom-leaks-images/get-detached-elements-icon.png)) icon. +1. In the demo webpage, click the **Room 2** button, which corresponds to another instance of the `Room` class. - The **Detached Elements** tool displays all of the detached elements of the page. When you switch to **Room 2** in the demo application, the messages that were generated in **Room 1** are no longer attached to the DOM, but they are still referenced by JavaScript: + In the webpage, the messages disappear: - ![Get Detached Elements using the Detached Elements tool](./dom-leaks-images/get-detached-elements.png) + ![Room 2 initial view](./dom-leaks-images/room-2-initial-view.png) + The messages that were generated for the Room 1 instance of the **Room** class (`
` elements) are no longer attached to the DOM, but they're still referenced by the Room 1 instance of the **Room** class. They are detached elements, which can cause memory leaks, unless they are going to be used again by the webpage. - -## Trigger garbage collection -Next, trigger garbage collection (GC) in the browser: + + **Get the list of detached elements:** -1. In the **Detached Elements** tool, click the **Collect garbage** (![The 'Collect garbage' icon](./dom-leaks-images/collect-garbage-icon.png)) icon. +1. In DevTools, in the **Detached Elements** tool, click the **Collect garbage** (![The 'Collect garbage' icon](./dom-leaks-images/collect-garbage-icon.png)) icon. -1. Click the **Get Detached Elements** (![The Get Detached Elements icon](./dom-leaks-images/get-detached-elements-icon.png)) icon. + The browser runs garbage collection, removing any nodes that are no longer referenced by a JavaScript object. -When you select **Collect garbage**, the browser runs garbage collection. When you select **Get Detached Elements**, the **Detached Elements** tool displays all detached elements that cannot be garbage collected. These detached elements may be memory leaks if they aren't going to be reused by the application. +1. In the **Detached Elements** tool, click the **Get Detached Elements** (![The Get Detached Elements icon](./dom-leaks-images/get-detached-elements-icon.png)) button. + The detached DOM elements that can't be garbage-collected are displayed: - -## Identify the JavaScript code that retains detached elements + ![The Get Detached Elements button](./dom-leaks-images/get-detached-elements.png) -Once you have found a detached element that cannot be garbage-collected, you can use the **Analyze** (![The Analyze icon](./dom-leaks-images/analyze-icon.png)) button in the **Detached Elements** tool to identify the JavaScript code running on the page that is still referencing the detached element. The **Analyze** button takes a heap snapshot and populates the **ID** of the detached element with its location in the heap. + These detached elements are memory leaks, if they aren't going to be reused by the application. -For more information about heap snapshots, read [Record heap snapshots using the Memory tool](heap-snapshots.md). -To identify the JavaScript code that references a detached element: + + **Identify the JavaScript code that references a particular detached element:** -1. In the **Detached Elements** tool, click the **Analyze** (![The Analyze icon](./dom-leaks-images/analyze-icon.png)) icon. +1. In the **Detached Elements** tool, click the **Analyze** (![The Analyze icon](./dom-leaks-images/analyze-icon.png)) button. - The **Memory** tool opens in the **Quick View** toolbar, at the bottom of DevTools: + A message is briefly displayed at the bottom of the **Detached Elements** tool, **Taking a memory heap snapshot...**, and then the message **All done**. The **Memory** tool opens in the **Quick View** panel at the bottom of DevTools: ![Analyze Detached Elements in the Detached Elements tool](./dom-leaks-images/analyze-detached-elements.png) -1. From the **Detached Elements** tool, select the **Id** field of a detached element. + If **Profiling type** option buttons are displayed in the **Memory** tool instead of a **Summary** and **Retainers** UI, click the **Analyze** (![The Analyze icon](./dom-leaks-images/analyze-icon.png)) button again. + +1. In the **Detached Elements** tool, in the **Id** column, double-click an ID, such as **@21299** or **@21783**. - The **Memory** tool automatically selects the object in the heap that is referencing the detached element. We call these objects **Retainers**: + This is the unique identifier of one of the `
` elements in the memory heap snapshot. The **Memory** tool displays retainers in the **Retainers** tab: ![Referencing a heap snapshot from the Detached Elements tool](./dom-leaks-images/heap-snapshot.png) -1. In the **Memory** tool, select the link **room.js:13**. + The **Memory** tool automatically selects the object in the heap that is referencing the detached element. Such an object is called a _retainer_. + +1. In the **Retainers** tab, in a retainer sub-entry about the `unmounted` member, such as **unmounted in Room @54011**, click the link **room.js:13**. + + The **Sources** tool opens in the **Activity Bar** and shows line 13 of the file **room.js** (the `Room` constructor): + + ![Line 13 in room.js: the Room constructor](./dom-leaks-images/room-js-line-13.png) - The **Sources** tool opens in the **Activity Bar** and shows line 13 of the file **room.js**. + `unmounted` is an array member of the `Room` class, defined in line 19 in the constructor: `this.unmounted = [];`. -1. In the `hide()` function of **room.js**, the JavaScript code of the demo application adds each message in the room to an `unmounted` array. The `unmounted` array is the object that is referencing the detached element: +1. Scroll down to line 49, `this.unmounted.push(el);` within the `hide` method of the `Room` class: ![Identifying the JavaScript that is retaining the detached element](./dom-leaks-images/javascript-retainers.png) -You have now identified the retainer that is preventing the detached element from being garbage-collected by the browser! + The code adds each message in the room to the `unmounted` array. The `unmounted` array is the object that is referencing the detached element. + +In the JavaScript code, you have now identified the retainer object (the `unmounted` array) that's preventing the detached element from being garbage-collected by the browser. + +You've found detached elements that the browser can't garbage-collect, and located the JavaScript object that's still referencing the detached element. You can then change the JavaScript code to release the element, to reduce the number of detached elements on the webpage, increasing webpage performance and responsiveness. -## Identify the DOM node causing others to be retained +## Identify the DOM node that's causing other DOM nodes to be retained Because the DOM is a fully connected graph, when one DOM node is retained in memory by JavaScript it can cause other DOM nodes to be retained with it. @@ -135,7 +153,7 @@ To identify the culprit node in a detached tree that is causing the entire tree 1. Click the **Collect garbage** (![The 'Collect garbage' icon](./dom-leaks-images/collect-garbage-icon.png)) icon. - Parent-child links are removed inside the detached tree: + Parent-child links are removed inside the detached tree, and the remaining item is the DOM node that caused other DOM nodes to be retained: ![The Detach Elements button in the Detached Elements tool](./dom-leaks-images/remove-links.png) @@ -143,11 +161,11 @@ To identify the culprit node in a detached tree that is causing the entire tree ## Change the selected target to a different origin -You can check for detached elements from different origins or frames using the **Selected target** dropdown list. +To check for detached elements from different origins or frames by using the **Selected target** dropdown list: 1. Click the **Selected target** dropdown list: - ![The 'Selected target' dropdown list lets you select different origins](./dom-leaks-images/target-dropdown.png) + ![Use the 'Selected target' dropdown list to select different origins](./dom-leaks-images/target-dropdown.png) 1. Select a different origin. @@ -155,16 +173,54 @@ The new origin is displayed in the **Detached Elements** tool. -## Additional considerations +## About detached elements and memory leaks + +Detached elements aren't always an indication of a memory leak, and memory leaks aren't always caused by detached elements. Memory leaks depend on the context of your application. -When looking for memory leaks, remember that leaks can depend on the context of your application. For the demo application, you found detached elements that could not be garbage collected by the browser, and you identified the JavaScript that's retaining the detached elements. However, in the context of the demo application, it makes sense to retain the list of chat messages, so that if a user switches back to **Room 1**, the message log is preserved. +A memory leak can occur in your application when an element is no longer attached to the Document Object Model (DOM) tree, but is still referenced by some JavaScript running on the webpage. These elements are called *detached elements*. For the browser to garbage-collect (GC) the detached element, the element must not be referenced from the DOM tree or from JavaScript code. -The following image shows detached elements in the form of messages that are reattached when a user navigates from **Room 2** back to **Room 1**: +Memory issues affect webpage performance, including memory leaks, memory bloat, and frequent garbage collections. Symptoms for your users include: -![The detached elements are reattached to the DOM when switching back to Room 1](./dom-leaks-images/reattached.png) +* The performance of a webpage gets progressively worse over time. +* The performance of a webpage is consistently bad. +* The performance of a webpage is delayed or appears to pause frequently. -Similarly, a feed in social media might detach elements as users scroll past them, and reattach them to the DOM when users scroll back up. Detached elements aren't always an indication of a memory leak, and memory leaks aren't always caused by detached elements. -For long-running apps, small memory leaks of only a few kilobytes can noticeably degrade performance over time. Web developers who use the React framework know that React maintains a virtualized copy of the DOM. Failing to properly unmount components can potentially lead to an application leaking large parts of the virtual DOM. + +## Run GC before getting detached elements, to show only elements that can't be GC'd + +To only show the elements that are detached from the DOM tree and that can't be garbage-collected, always click **Collect Garbage** first, and then click **Get Detached Elements**. + +Even though some elements might appear as detached at one point in time, you won't know whether they are actually still referenced by JavaScript code in the webpage until you run GC. When switching between chat rooms in the demo app, the web page removes the elements that are used to display messages from the DOM. But switching to a different instance of the `Room` class doesn't delete these elements entirely and references to these elements still exist, so, these elements stay in memory. + + + +## Re-attaching elements + +For the Detached Elements demo webpage, it makes sense to retain the list of chat messages, so that if a user switches back to **Room 1**, the message log is preserved. Similarly, a feed in social media might detach elements as users scroll past them, and reattach them to the DOM when users scroll back up. + +When the **Detached elements** tool reports detached elements, it's not necessarily a memory leak. It's up to you to decide what's a memory leak and what's not. Maybe your app will re-attach those elements later (instead of having to re-create them, which could be slower). + +Detaching DOM nodes is a useful approach, as long as you eventually reuse those detached elements (or delete them). The value of the **Detached elements** tool is, when you suspect a memory leak, you can check whether there's an increasing number of unexpected detached DOM elements being reported by the tool. + + + +## Long-running apps and unmounting components + +Be sure to unmount components. For long-running apps, small memory leaks of only a few kilobytes can noticeably degrade performance over time. For webpages that use the React framework, React maintains a virtualized copy of the DOM. Failing to properly unmount components can potentially lead to an application leaking large parts of the virtual DOM. + + + +## Reporting issues + +If you find issues with how the **Detached Elements** feature works, [contact the Microsoft Edge DevTools team](../contact.md) to send feedback about the **Detached Elements** feature and memory leak debugging. + + + +## See also + +* [Tools for investigating detached elements](./index.md#tools-for-investigating-detached-elements) in _Fix memory problems_ - comparison of tools to view detached elements. -This demo app and its leaks are artificial. Test the Detached Elements tool on your production website or app. If you find potential problems with the Detached Elements tool, [contact the Microsoft Edge DevTools team](../contact.md) to send feedback about the **Detached Elements** tool and memory leak debugging. +Demo: +* [Detached Elements demo webpage](https://microsoftedge.github.io/Demos/detached-elements/) +* [MicrosoftEdge/Demos > detached-elements](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) repo folder - source code. diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshot-schema.md b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshot-schema.md index 78eff6de1f..1fb36267ce 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshot-schema.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshot-schema.md @@ -30,7 +30,7 @@ To export a `.heapsnapshot` file, first you need to record a heap snapshot in th 1. Select **Heap snapshot** and then click **Take snapshot**. -For more information, see [Record heap snapshots using the Memory tool](heap-snapshots.md). +For more information, see [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](heap-snapshots.md). diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/collect-garbage-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/collect-garbage-icon.png new file mode 100644 index 0000000000..74fc1982f9 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/collect-garbage-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/fast-traffic-stop.png b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/fast-traffic-stop.png new file mode 100644 index 0000000000..93a635d64a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/fast-traffic-stop.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/heap-snapshots.png b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/heap-snapshots.png index 6e61496749..089ae94904 100644 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/heap-snapshots.png and b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/heap-snapshots.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/js-in-sources-tool.png b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/js-in-sources-tool.png new file mode 100644 index 0000000000..7fa15375a2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/js-in-sources-tool.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/memory-heap-snapshot-filter-detached.png b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/memory-heap-snapshot-filter-detached.png new file mode 100644 index 0000000000..fe646d5db1 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/memory-heap-snapshot-filter-detached.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/memory-tool-heap-snapshot-option-button.png b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/memory-tool-heap-snapshot-option-button.png new file mode 100644 index 0000000000..9e6fac42b4 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/memory-tool-heap-snapshot-option-button.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/memory-tool-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/memory-tool-icon.png new file mode 100644 index 0000000000..5832399c60 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/memory-tool-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/profiles-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/profiles-icon.png new file mode 100644 index 0000000000..b2bff8996c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/profiles-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/room-2-initial-view.png b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/room-2-initial-view.png new file mode 100644 index 0000000000..be3a3e4dc0 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/room-2-initial-view.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/room-2-take-snapshot.png b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/room-2-take-snapshot.png new file mode 100644 index 0000000000..b18add5844 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots-images/room-2-take-snapshot.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots.md b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots.md index df43e0e64d..1a913d1d08 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots.md @@ -1,5 +1,5 @@ --- -title: Record heap snapshots using the Memory tool +title: Record heap snapshots using the Memory tool ("Heap snapshot" profiling type) description: How to record heap snapshots with the Microsoft Edge DevTools heap profiler and find memory leaks, using the Memory tool. author: MSEdgeTeam ms.author: msedgedevrel @@ -21,7 +21,7 @@ ms.date: 09/16/2024 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. --> -# Record heap snapshots using the Memory tool +# Record heap snapshots using the Memory tool ("Heap snapshot" profiling type) Use the heap profiler in the **Memory** tool to do the following: @@ -60,7 +60,7 @@ This article uses five demo webpages, all sourced at https://github.com/Microsof ![The Memory tool, the Heap snapshot option is selected, and the Take snapshot button is highlighted](./heap-snapshots-images/heap-snapshots.png) -After the newly recorded heap snapshot has been loaded into DevTools and has been parsed, the snapshot is displayed and a new entry appears in the **Profiles** sidebar under **HEAP SNAPSHOTS**: +After the newly recorded heap snapshot has been loaded into DevTools and has been parsed, the snapshot is displayed and a new entry appears in the **Profiles** sidebar under **Heap snapshots**: ![Total size of reachable objects](./heap-snapshots-images/heap-snapshots-all.png) @@ -264,7 +264,10 @@ To find an object in the collected heap, you can search using **Ctrl+F** and giv ## Uncover DOM leaks -The **Memory** tool has the ability to show the bidirectional dependencies that sometimes exist between browser native objects (DOM nodes, CSS rules) and JavaScript objects. This helps to discover memory leaks that happen because of forgotten detached DOM nodes that remain in memory. +The **Memory** tool has the ability to show the bidirectional dependencies that sometimes exist between browser native objects (DOM nodes, CSS rules) and JavaScript objects. This helps to discover memory leaks that happen because of forgotten, detached DOM nodes that remain in memory. + +For detached elements, see also [Find DOM tree memory leaks ("Heap snapshot" profiling type > Detached)](#find-dom-tree-memory-leaks-heap-snapshot-profiling-type--detached), below. + Consider the following DOM tree: @@ -312,6 +315,7 @@ To understand where DOM nodes might leak, and how to detect such leakage, open t + #### Demo webpage: Example 9: DOM leaks bigger than expected @@ -412,11 +416,136 @@ The **Memory** tool exports a JSON file that contains all of the string objects ![Strings from the heap snapshot, in the JSON file](heap-snapshots-images/heap-snapshot-strings-json-file.png) + + +## Find DOM tree memory leaks ("Heap snapshot" profiling type > Detached) + +One way to find and display all of the detached elements on a webpage is to use the **Memory** tool's **Heap snapshot** profiling type, then type **Detached** in the **Filter by class** text box, as follows. See also [Tools for investigating detached elements](./index.md#tools-for-investigating-detached-elements) in _Fix memory problems_. + +The following code produces detached DOM nodes: + +```javascript +var detachedTree; + +function create() { + var ul = document.createElement('ul'); + for (var i = 0; i < 10; i++) { + var li = document.createElement('li'); + ul.appendChild(li); + } + detachedTree = ul; +} +document.getElementById('create').addEventListener('click', create); +``` + +This code creates a `ul` node with ten `li` children. The nodes are referenced by the code, but they don't exist in the DOM tree, so each node is detached. + +Heap snapshots are one way to identify detached nodes. A heap snapshot shows how memory is distributed among the JS objects and DOM nodes for your page at the point of time of the snapshot. + + + +#### Use the "Heap snapshot" profiling type to find detached elements + +To use the **Heap snapshot** profiling type to find detached elements: + +1. Open a webpage, such as the [Detached Elements demo webpage](https://microsoftedge.github.io/Demos/detached-elements/), in a new window or tab. + +1. Right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). + + DevTools opens. + +1. In DevTools, in the **Activity Bar**, select the **Memory** (![Memory tool icon](./heap-snapshots-images/memory-tool-icon.png)) tool. + + If that tab isn't visible, click the **More Tools** (![More Tools icon](./heap-snapshots-images/more-tools-icon.png)) button, and then select **Memory**. The **Memory** tool opens: + + ![Open the Memory tool](./heap-snapshots-images/memory-tool-heap-snapshot-option-button.png) + + If the **Heap snapshot** option button isn't shown, because a profile is already displayed, in the upper left, click **Profiles** (![the Profiles icon](./heap-snapshots-images/profiles-icon.png)). + + You don't need to select the **Heap snapshot** option button at this point, because the webpage hasn't generated any detached elements yet. + + + **Generate messages, which will be stored by the JavaScript instance of the Room class:** + +1. In the demo webpage, click the **Fast traffic** button. + + The demo webpage begins generating messages and displaying them in the webpage: + + ![Generating some messages in the demo webpage](./heap-snapshots-images/fast-traffic-stop.png) + +1. After some messages are displayed, click the **Stop** button in the demo webpage. + + Each message is a `
` element that's referenced by the Room 1 instance of the `Room` class. There are no detached elements in the webpage DOM tree, because all of the message elements are attached to the present, Room 1 instance of the **Room** class. + + + + **Change to a different instance of the Room class, so elements become detached:** + +1. In the demo webpage, click the **Room 2** button, which corresponds to another instance of the `Room` class. + + In the webpage, the messages disappear: + + ![Room 2 initial view](./heap-snapshots-images/room-2-initial-view.png) + + The messages that were generated for the Room 1 instance of the **Room** class (`
` elements) are no longer attached to the DOM, but they're still referenced by the Room 1 instance of the **Room** class. They are detached elements, which can cause memory leaks, unless they are going to be used again by the webpage. + + + + **Get the list of detached elements:** + +1. In DevTools, in the **Memory** tool, click the **Collect garbage** (![The 'Collect garbage' icon](./heap-snapshots-images/collect-garbage-icon.png)) icon: + + ![Taking a heap snapshot](./heap-snapshots-images/room-2-take-snapshot.png) + + The browser runs garbage collection, removing any nodes that are no longer referenced by a JavaScript object. + +1. In the **Memory** tool, select the **Heap snapshot** option button. + +1. Click the **Take snapshot** button at the bottom of the **Memory** tool. + + The snapshot is processed, loaded, and then listed in the **Profiles** sidebar, in the **Heap snapshots** section. + +1. In the **Filter by class** text box, type **detached**: + + ![Filtering for detached nodes, and expanding a detached node](./heap-snapshots-images/memory-heap-snapshot-filter-detached.png) + + The detached DOM elements that can't be garbage-collected are displayed. + + + + **Identify the JavaScript code that references a particular detached element:** + +1. In the heap snapshot, expand a **Detached** object, such as **Detached \**, and then select a **Detached \
** node. + + Information is displayed in the **Retainers** pane at the bottom of the **Memory** tool. + + + +1. In the **Retainers** pane, click the `room.js:13` link for an **unmounted in Room** item under **Array**. The **Sources** tool opens, displaying `room.js`, scrolled to line 13: + + ![The JavaScript source code in the **Sources** tool](./heap-snapshots-images/js-in-sources-tool.png) + +1. To inspect the possible memory leak, study the code that uses the `unmounted` array and make sure that the reference to the node is removed when it is no longer needed. + +1. To return to the **Memory** tool, in the **Address Bar**, select the **Memory** tool. + + +For additional ways to see detached elements, see [Tools for investigating detached elements](./index.md#tools-for-investigating-detached-elements) in _Fix memory problems_. + + + + ## See also + + +* [Tools for investigating detached elements](./index.md#tools-for-investigating-detached-elements) in _Fix memory problems_. +* [Memory terminology](./memory-101.md) -* [Memory terminology](./memory-101.md). -* [Finding and debugging memory leaks in JavaScript with Chrome DevTools](https://slid.es/gruizdevilla/memory) by Gonzalo Ruiz de Villa, which also applies to Microsoft Edge DevTools. +External: +* [Finding and debugging memory leaks in JavaScript with Chrome DevTools](https://slid.es/gruizdevilla/memory) - slide deck (by Gonzalo Ruiz de Villa), which also applies to Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/allocation-timeline-snapshot-all.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/allocation-timeline-snapshot-all.png deleted file mode 100644 index aa68a5952b..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/allocation-timeline-snapshot-all.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/detached-elements-profile.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/detached-elements-profile.png new file mode 100644 index 0000000000..175bf5c493 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/detached-elements-profile.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/gc-in-performance.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/gc-in-performance.png deleted file mode 100644 index 43d996f259..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/gc-in-performance.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-allocation-sampling-gc-settings.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-allocation-sampling-gc-settings.png deleted file mode 100644 index b7d8d5f6b3..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-allocation-sampling-gc-settings.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-allocation-sampling-heavy-bottom-up.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-allocation-sampling-heavy-bottom-up.png deleted file mode 100644 index 2fb7f2550c..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-allocation-sampling-heavy-bottom-up.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-allocation-sampling.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-allocation-sampling.png deleted file mode 100644 index d361572500..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-allocation-sampling.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot-filter-detached-expanded-selected.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot-filter-detached-expanded-selected.png deleted file mode 100644 index 47132db793..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot-filter-detached-expanded-selected.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot-filter-detached-expanded.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot-filter-detached-expanded.png deleted file mode 100644 index b6bc354567..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot-filter-detached-expanded.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot-filter-detached.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot-filter-detached.png deleted file mode 100644 index 2bbff03ac8..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot-filter-detached.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot.png deleted file mode 100644 index 2fa8566cce..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-heap-snapshot.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-tool.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-tool.png new file mode 100644 index 0000000000..f1e20de1e0 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/memory-tool.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/performance-memory.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/performance-memory.png deleted file mode 100644 index 2a69d85747..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/performance-memory.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/profiles-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/profiles-icon.png new file mode 100644 index 0000000000..b2bff8996c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/profiles-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/stop-recording-icon.png b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/stop-recording-icon.png index a8a3fa3f50..f6de64a490 100644 Binary files a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/stop-recording-icon.png and b/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/stop-recording-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index.md b/microsoft-edge/devtools-guide-chromium/memory-problems/index.md index c3adf9e652..bc9deabbb5 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/index.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/index.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: devtools -ms.date: 07/21/2023 +ms.date: 10/18/2024 --- # Fix memory problems -Learn how to use Microsoft Edge and DevTools to find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections. +To find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections, use the following tools: +* Microsoft Edge Browser Task Manager. +* The **Performance** tool's **Memory** checkbox. +* The **Memory** tool's various profiling types. -* Find out how much memory your page is currently using with the Microsoft Edge Browser Task Manager. -* Visualize memory usage over time with the **Memory** tool. -* Identify detached DOM trees (a common cause of memory leaks) with **Heap snapshot**. -* Find out when new memory is being allocated in your JavaScript heap (JS heap) with **Allocation instrumentation on timeline**. -See also [Debug DOM memory leaks with the Detached Elements tool](dom-leaks.md). + +#### Tools for investigating memory usage + +| Use case | Tool | Article | +|---|---|---| +| Monitor how much memory a webpage uses, in realtime. | Microsoft Edge Browser Task Manager | [Monitor memory use in realtime (Microsoft Edge Browser Task Manager)](./microsoft-edge-browser-task-manager.md) | +| Visualize the memory usage of a webpage over a period of time. | **Performance** tool > **Memory** checkbox | [Visualize memory leaks (Performance tool: Memory checkbox)](../evaluate-performance/reference.md#visualize-memory-leaks-performance-tool-memory-checkbox) in _Performance features reference_. | +| Spot frequent garbage collections. | Microsoft Edge Browser Task Manager, or **Performance** tool > **Memory** checkbox | [Spot frequent garbage collections (Microsoft Edge Browser Task Manager, Performance tool's Memory checkbox)](#spot-frequent-garbage-collections-microsoft-edge-browser-task-manager-performance-tools-memory-checkbox), below. | +| Inspect the contents of the memory used by a webpage. | **Memory** tool > **Heap snapshot** | [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](./heap-snapshots.md) | +| Find out which JavaScript objects get created over a period of time, to isolate memory leaks. | **Memory** tool > **Allocations on timeline** | [Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type)](./allocation-profiler.md) | +| Find out which JavaScript functions allocate memory over a period of time. This profile type has minimal performance overhead and can be used for long-running operations. | **Memory** tool > **Allocation sampling** | [Speed up JavaScript runtime ("Allocation sampling" profiling type)](../rendering-tools/js-runtime.md) | +| Find DOM tree memory leaks. | **Memory** tool > **Detached elements** | [Debug DOM memory leaks ("Detached elements" profiling type)](./dom-leaks-memory-tool-detached-elements.md) | + + + +#### The Memory tool + +The main tool for investigating memory issues is the **Memory** tool: + +![The Memory tool](./index-images/memory-tool.png) + +A Detached Elements profile in the **Memory** tool: + +![A Detached Elements profile](./index-images/detached-elements-profile.png) + +To return to the list of option buttons for profiling types, in the upper left of the **Memory** tool, click **Profiles** (![the Profiles icon](./index-images/profiles-icon.png)). -## Overview +## Overview of fixing memory problems In the spirit of the **RAIL** performance model, the focus of your performance efforts should be your users. - + Memory issues are important because they are often perceivable by users. Users may perceive memory issues in the following ways: @@ -60,239 +84,46 @@ The key here is to use the RAIL model and focus on your users. Find out what de -## Monitor memory use in realtime with the Microsoft Edge Browser Task Manager - -Use the Microsoft Edge Browser Task Manager as a starting point to your memory issue investigation. The Microsoft Edge Browser Task Manager is a realtime monitor that tells you how much memory a page is currently using. - -1. Press **Shift+Esc** or go to the Microsoft Edge main menu and select **More tools** > **Browser Task Manager** to open the Microsoft Edge Browser Task Manager. - - ![Opening the Microsoft Edge Browser Task Manager](./index-images/bing-settings-more-tools-browser-task-manager.png) - -1. Right-click the table header of the Microsoft Edge Browser Task Manager, and then enable **JavaScript memory**. +## Spot frequent garbage collections (Microsoft Edge Browser Task Manager, Performance tool's Memory checkbox) - ![Enabling JavaScript memory](./index-images/bing-browser-task-manager-javascript-memory.png) +If your page appears to pause frequently, then you may have garbage collection issues. To spot frequent garbage collection, you can use either: -These two columns tell you different things about how your page is using memory: +* Microsoft Edge Browser Task Manager. Frequently rising and falling **Memory** or **JavaScript Memory** values represent frequent garbage collection. See [Monitor memory use in realtime (Microsoft Edge Browser Task Manager)](./microsoft-edge-browser-task-manager.md). -* The **Memory** column represents native memory. DOM nodes are stored in native memory. If this value is increasing, DOM nodes are getting created. +* The **Performance** tool's **Memory** checkbox. In Performance memory recordings, frequent changes (rising and falling) to the JS heap or node count graphs indicate frequent garbage collection. See [View memory metrics](../evaluate-performance/reference.md#view-memory-metrics) in _Performance features reference_. -* The **JavaScript Memory** column represents the JS heap. This column contains two values. The value you are interested in is the live number (the number in parentheses). The live number represents how much memory the reachable objects on your page are using. If this number is increasing, either new objects are being created, or the existing objects are growing. - - +After you have identified the problem by using either of those tool, you can then use the **Memory** tool's **Allocations on timeline** profiling type to find out where memory is being allocated, and which functions are causing the allocations. See [Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type)](./allocation-profiler.md). -## Visualize memory leaks with Performance tool - -You can also use the **Performance** tool as another starting point in your investigation. The **Performance** tool helps you visualize the memory use of a page over time. - -1. In DevTools, open the **Performance** tool. - -1. Select the **Memory** checkbox. - -1. [Make a recording](../evaluate-performance/reference.md#record-performance). - -It's a good practice to start and end your recording with a forced garbage collection. To force garbage collection, click the **collect garbage** ![force garbage collection](./index-images/collect-garbage-icon.png) button while recording. - -To demonstrate memory recordings, consider the following code: - -```javascript -var x = []; -function grow() { - for (var i = 0; i < 10000; i++) { - document.body.appendChild(document.createElement('div')); - } - x.push(new Array(1000000).join('x')); -} -document.getElementById('grow').addEventListener('click', grow); -``` - -Every time that the button referenced in the code is clicked, 10,000 `div` nodes are appended to the document body, and a string of 1,000,000 `x` characters is pushed onto the `x` array. Running the previous code sample produces a recording in the **Performance** tool like the following figure: - -![Simple growth](./index-images/performance-memory.png) - -First, an explanation of the user interface. The **HEAP** graph in the **Overview** pane (below **NET**) represents the JS heap. Below the **Overview** pane is the **Counter** pane. The memory usage is broken down by JS heap (same as **HEAP** graph in the **Overview** pane), documents, DOM nodes, listeners, and GPU memory. Clear a checkbox to hide it from the graph. - -Now, an analysis of the code compared with the previous figure. If you review the node counter (the green graph), it matches up cleanly with the code. The node count increases in discrete steps. You can presume that each increase in the node count is a call to `grow()`. - -The JS heap graph (the blue graph) is not as straightforward. In keeping with best practices, the first dip is actually a forced garbage collection (click the **collect garbage** ![force garbage collection](./index-images/collect-garbage-icon.png) button). - -As the recording progresses, the JS heap size spikes are displayed. This is natural and expected: the JavaScript code is creating the DOM nodes on every button you click, and is doing a lot of work when it creates the string of one million characters. - -The key thing here is the fact that the JS heap ends higher than it began (the "beginning" here being the point after the forced garbage collection). In the real world, if you saw this pattern of increasing JS heap size or node size, it would potentially indicate a memory leak. - - - - - -## Discover detached DOM tree memory leaks with Heap Snapshots - - - -A DOM node is only garbage collected when there are no references to the node from either the DOM tree or JavaScript code running on the page. A node is said to be "detached" when it is removed from the DOM tree but some JavaScript still references it. Detached DOM nodes are a common cause of memory leaks. - -This section teaches you how to use the heap profilers in DevTools to identify detached nodes. - -Here's a simple example of detached DOM nodes: - -```javascript -var detachedTree; - -function create() { - var ul = document.createElement('ul'); - for (var i = 0; i < 10; i++) { - var li = document.createElement('li'); - ul.appendChild(li); - } - detachedTree = ul; -} -document.getElementById('create').addEventListener('click', create); -``` - -Clicking the button referenced in the code creates a `ul` node with ten `li` children. The nodes are referenced by the code, but they don't exist in the DOM tree, so each node is detached. - -Heap snapshots are one way to identify detached nodes. As the name implies, heap snapshots show you how memory is distributed among the JS objects and DOM nodes for your page at the point of time of the snapshot. - -To create a snapshot: - -1. Open DevTools and go to the **Memory** tool. - -1. Click the **Heap snapshot** radio button, and then click the **Take snapshot** button at the bottom of the tool. - - ![Taking a heap snapshot](./index-images/memory-heap-snapshot.png) - - The snapshot may take some time to process and load. - -1. After the snapshot is finished, select it from the left-hand panel (it's named **HEAP SNAPSHOTS**). - -1. In the **Class filter** text box, type `Detached`, to search for detached DOM trees: - - ![Filtering for detached nodes](./index-images/memory-heap-snapshot-filter-detached.png) - -1. Expand the carats to investigate a detached tree: - - ![Investigating the detached tree](./index-images/memory-heap-snapshot-filter-detached-expanded.png) - - - -1. Click a node to investigate it further. +## Find DOM tree memory leaks from detached elements - In the **Objects** pane, you can see more information about the code that is referencing the node. For example, in the following figure, the `detachedTree` variable is referencing the node. +A DOM node is only garbage-collected by the browser when there are no references to the node from either the DOM tree or JavaScript code running on the page. A node is said to be "detached" when it is removed from the DOM tree but some JavaScript still references it. Detached DOM nodes are a common cause of memory leaks. -1. To fix the particular memory leak, study the code that uses the `detachedTree` variable and make sure that the reference to the node is removed when it is no longer needed. -![Investigating a node](./index-images/memory-heap-snapshot-filter-detached-expanded-selected.png) - - - - - -## Identify JS heap memory leaks with Allocation instrumentation on timeline - -**Allocation instrumentation on timeline** is another tool that can help you track down memory leaks in your JS heap. - -Demonstrate **Allocation instrumentation on timeline** using the following code: - -```javascript -var x = []; -function grow() { - x.push(new Array(1000000).join('x')); -} -document.getElementById('grow').addEventListener('click', grow); -``` - -Every time that the button referenced in the code is clicked, a string of one million characters is added to the `x` array. - -To record an Allocation instrumentation on timeline: - -1. Open DevTools, and select the **Memory** tool. - -1. Click the **Allocation instrumentation on timeline** radio button, then click the **Start** button. - -1. Perform the action that you suspect is causing the memory leak. - -1. When you are done, click the **Stop recording heap profile** ![stop recording](./index-images/stop-recording-icon.png) button. - -1. As you are recording, notice whether any blue bars show up on the Allocation instrumentation on the timeline, like in the following figure: - - ![New allocations](./index-images/allocation-timeline-snapshot-all.png) - - Those blue bars represent new memory allocations. Those new memory allocations are your candidates for memory leaks. - -1. Zoom on a bar to filter the **Constructor** pane to only show objects that were allocated during the specified timeframe. - - ![Zoomed allocation timeline](./index-images/allocation-timeline-snapshot-focused.png) - -1. Expand the object and select the value to view more details in the **Object** pane. - - For example, in the following figure, in the details of the newly allocated object indicates that it was allocated to the `x` variable in the `Window` scope: - -![Object details](./index-images/allocation-timeline-snapshot-focused-constructor-expanded.png) - - - -## Investigate memory allocation by function - -Use the **Allocation sampling** profiling type to view memory allocation by JavaScript function. - -![Record Allocation sampling](./index-images/memory-allocation-sampling.png) - -1. Click the **Allocation sampling** radio button. - -1. If there is a worker on the page, you can select that as the profiling target, by using the dropdown menu next to the **Start** button. - -1. Click the **Start** button. - -1. On the webpage, perform actions that you want to investigate. - -1. Click the **Stop** button when you have finished all of your actions. - -DevTools shows you a breakdown of memory allocation by function. The default view is **Heavy (Bottom Up)**, which displays the functions that allocated the most memory at the top. - -![Allocation sampling](./index-images/memory-allocation-sampling-heavy-bottom-up.png) - - - -## Reduce garbage with additional settings for allocation sampling - -By default, the **Allocation sampling** profiling type only reports allocations that are still alive at the end of the recording session. Objects that are created, removed, and then garbage collected (GC'd) aren't displayed in the **Memory** tool when profiling using the **Allocation sampling** or **Allocation instrumentation on timeline** types. - -You can trust the browser to clean up garbage from your code. However, it is important to consider that GC itself is an expensive operation and multiple GCs can slow down your user's experience of your website or app. When recording in the **Performance** tool with the **Memory** checkbox turned on, you can see the GC operation happen at the steep cliffs (sudden decreases) in the heap chart. - -![GC operation shown in the Performance tool](./index-images/gc-in-performance.png) - -By reducing the amount of garbage your code is creating, you can reduce the cost of each individual GC and the number of GC operations. To track objects that are discarded by GC, configure the **Allocation sampling** profiling type with settings. - -1. Click the **Allocation sampling** option button. - -1. Click the **Include objects discarded by major GC** and **Include objects discarded by minor GC** settings. - - ![Allocation sampling GC settings](./index-images/memory-allocation-sampling-gc-settings.png) - -1. Click the **Start** button. - -1. On the webpage, perform actions that you want to investigate. - -1. Click the **Stop** button when you have finished all of your actions. + +#### Tools for investigating detached elements -DevTools now tracks all of the objects that were GC'd during the recording. Use these settings to understand how much garbage your website or app is generating. The data reported by **Allocation sampling** will help you identify the functions that are generating the most garbage. +| Use case | Tool | Article | +|---|---|---| +| Show detached elements only, as DOM tree nodes. | **Memory** tool > **Detached elements** profiling type | [Debug DOM memory leaks ("Detached elements" profiling type)](./dom-leaks-memory-tool-detached-elements.md) | +| Show all objects in memory, filtered to display detached elements, with links to the JavaScript source code. | **Memory** tool > **Heap snapshot** profiling type > **Detached** | [Find DOM tree memory leaks ("Heap snapshot" profiling type > Detached)](./heap-snapshots.md#find-dom-tree-memory-leaks-heap-snapshot-profiling-type--detached) in _Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)_. | +| Show detached elements only, as DOM tree nodes, with links to the JavaScript source code. | **Detached Elements** tool | [Debug DOM memory leaks by using the Detached Elements tool](./dom-leaks.md) | -If you are investigating objects that were only GC'd during specific major or minor GC operations, configure the settings appropriately to track the operation you care about. To learn more about the differences between major and minor GC, see [Trash talk: the Orinoco garbage collector | V8 JavaScript engine developer blog](https://v8.dev/blog/trash-talk). -## Spot frequent garbage collections - -If your page appears to pause frequently, then you may have garbage collection issues. - -You can use either the Microsoft Edge Browser Task Manager or Performance memory recordings to spot frequent garbage collection. - -* In the Microsoft Edge Browser Task Manager, frequently rising and falling **Memory** or **JavaScript Memory** values represent frequent garbage collection. - -* In Performance recordings, frequent changes (rising and falling) to the JS heap or node count graphs indicate frequent garbage collection. - -After you have identified the problem, you can use an **Allocation instrumentation on timeline** recording to find out where memory is being allocated and which functions are causing the allocations. +## See also + + +* [Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type)](./allocation-profiler.md) +* [Debug DOM memory leaks by using the Detached Elements tool](./dom-leaks.md) +* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](./heap-snapshots.md) + + +External: +* [Finding and debugging memory leaks in JavaScript with Chrome DevTools](https://slid.es/gruizdevilla/memory) - slide deck (by Gonzalo Ruiz de Villa), which also applies to Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/memory-101.md b/microsoft-edge/devtools-guide-chromium/memory-problems/memory-101.md index d4c238c2eb..b066a67136 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/memory-101.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/memory-101.md @@ -25,7 +25,7 @@ ms.date: 01/30/2024 The following terms are used in the **Memory** tool, which is for investigating memory issues. These memory terms are applicable to memory analysis in general, as well as memory profiling tools for languages such as Java or .NET. -To learn more about using the **Memory** tool, see [Record heap snapshots using the Memory tool](./heap-snapshots.md). +To learn more about using the **Memory** tool, see [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](./heap-snapshots.md). diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/bing-browser-task-manager-javascript-memory.png b/microsoft-edge/devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager-images/bing-browser-task-manager-javascript-memory.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/memory-problems/index-images/bing-browser-task-manager-javascript-memory.png rename to microsoft-edge/devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager-images/bing-browser-task-manager-javascript-memory.png diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/index-images/bing-settings-more-tools-browser-task-manager.png b/microsoft-edge/devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager-images/bing-settings-more-tools-browser-task-manager.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/memory-problems/index-images/bing-settings-more-tools-browser-task-manager.png rename to microsoft-edge/devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager-images/bing-settings-more-tools-browser-task-manager.png diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager-images/javascript-memory-column.png b/microsoft-edge/devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager-images/javascript-memory-column.png new file mode 100644 index 0000000000..9175d0b1c7 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager-images/javascript-memory-column.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager.md b/microsoft-edge/devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager.md new file mode 100644 index 0000000000..6e6beaae36 --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager.md @@ -0,0 +1,39 @@ +--- +title: Monitor memory use in realtime (Microsoft Edge Browser Task Manager) +description: A starting point to inspect webpage memory issues. A realtime monitor that tells you how much memory a webpage is currently using. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 10/21/2024 +--- +# Monitor memory use in realtime (Microsoft Edge Browser Task Manager) + +Use the Microsoft Edge Browser Task Manager as a starting point to your memory issue investigation. The Microsoft Edge Browser Task Manager is a realtime monitor that tells you how much memory a page is currently using. + +1. In Microsoft Edge, press **Shift+Esc**. Or, select **Settings and more** (**...**) > **More tools** > **Browser Task Manager**: + + ![Opening the Microsoft Edge Browser Task Manager](./microsoft-edge-browser-task-manager-images/bing-settings-more-tools-browser-task-manager.png) + + Microsoft Edge Browser Task Manager opens. + +1. Right-click the table header, and then enable **JavaScript memory**: + + ![Enabling JavaScript memory](./microsoft-edge-browser-task-manager-images/bing-browser-task-manager-javascript-memory.png) + + The **JavaScript memory** column is displayed: + + ![The JavaScript memory column](./microsoft-edge-browser-task-manager-images/javascript-memory-column.png) + + * The **Memory** column represents native memory. DOM nodes are stored in native memory. If this value is increasing, DOM nodes are getting created. + + * The **JavaScript memory** column represents the JS heap. This column contains two values. The value you are interested in is the live number (the number in parentheses). The live number represents how much memory the reachable objects on your page are using. If this number is increasing, either new objects are being created, or the existing objects are growing. + + + + + +## See also + +* [Fix memory problems](./index.md) diff --git a/microsoft-edge/devtools-guide-chromium/overview.md b/microsoft-edge/devtools-guide-chromium/overview.md index 8640ed78e0..973ba2468e 100644 --- a/microsoft-edge/devtools-guide-chromium/overview.md +++ b/microsoft-edge/devtools-guide-chromium/overview.md @@ -479,9 +479,13 @@ The **Customize and control DevTools** (![Customize and control DevTools](./over #### Help button -The **Help** (![Help icon](./overview-images/help-icon.png)) button opens a dropdown menu that gives access to DevTools documentation, release notes, and to the **Feedback** (![Send Feedback icon](./overview-images/send-feedback-icon-light-theme.png)) tool. +The **Help** (![Help icon](./overview-images/help-icon.png)) button opens a dropdown menu that has the following items: -To send connect with the Microsoft Edge DevTools team to report problems, issues, or suggest ideas, click the **Feedback** button. The **Send Feedback** dialog opens. Enter information to describe what happened and include a screenshot. See [Contact the Microsoft Edge DevTools team](contact.md). +* **Documentation** - Opens [Microsoft Edge DevTools documentation](./landing/index.yml). + +* **Release notes** - Opens [What's New in Microsoft Edge DevTools](./whats-new/whats-new.md). + +* **Feedback** (![Send Feedback icon](./overview-images/send-feedback-icon-light-theme.png)) - Opens the **Send feedback** dialog. To connect with the Microsoft Edge DevTools team to report a problem or issue (or to suggest an idea), describe what happened, and include a screenshot. See [Contact the Microsoft Edge DevTools team](contact.md). diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/image.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/image.png new file mode 100644 index 0000000000..f527e04267 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/rendering-tools/image.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/index.md b/microsoft-edge/devtools-guide-chromium/rendering-tools/index.md index e0930e4e9a..3917a86f51 100644 --- a/microsoft-edge/devtools-guide-chromium/rendering-tools/index.md +++ b/microsoft-edge/devtools-guide-chromium/rendering-tools/index.md @@ -54,7 +54,7 @@ Take a recording in the **Performance** tool and look for suspiciously long `Eva -If you notice quite a bit of jank (interruptions of rendering) in your JavaScript, you may need to take your analysis to the next level and collect a JavaScript CPU profile. CPU profiles show where runtime is spent within the functions of your page. Learn how to create CPU profiles in [Speed up JavaScript runtime](js-runtime.md). +If you notice quite a bit of jank (interruptions of rendering) in your JavaScript, you may need to take your analysis to the next level and collect a JavaScript CPU profile. CPU profiles show where runtime is spent within the functions of your page. Learn how to create CPU profiles in [Speed up JavaScript runtime ("Allocation sampling" profiling type)](js-runtime.md). diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/allocation-sampling-option-button.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/allocation-sampling-option-button.png new file mode 100644 index 0000000000..22a3c9a1d3 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/allocation-sampling-option-button.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/exclude-icon.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/exclude-icon.png index 6c9d14d545..f2f60c1848 100644 Binary files a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/exclude-icon.png and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/exclude-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/focus-icon.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/focus-icon.png deleted file mode 100644 index fdea0e81da..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/focus-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/focus-selected-function-icon.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/focus-selected-function-icon.png new file mode 100644 index 0000000000..e226197536 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/focus-selected-function-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/gc-in-performance.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/gc-in-performance.png new file mode 100644 index 0000000000..613713cbb2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/gc-in-performance.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/memory-allocation-sampling-gc-settings.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/memory-allocation-sampling-gc-settings.png new file mode 100644 index 0000000000..f753a24ec4 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/memory-allocation-sampling-gc-settings.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/memory-tool-icon.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/memory-tool-icon.png new file mode 100644 index 0000000000..5832399c60 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/memory-tool-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/more-tools-icon.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/more-tools-icon.png new file mode 100644 index 0000000000..71ff8ed5a2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/more-tools-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/profiles-icon.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/profiles-icon.png new file mode 100644 index 0000000000..b2bff8996c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/profiles-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart-zoomed.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart-zoomed.png index fcf83a2602..b0837a2eb1 100644 Binary files a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart-zoomed.png and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart-zoomed.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart.png index 5e0349629a..cc5aa1ac63 100644 Binary files a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart.png and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-heavy-bottom-up.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-heavy-bottom-up.png index 1cbd943add..af9852fc17 100644 Binary files a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-heavy-bottom-up.png and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-heavy-bottom-up.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-tree-top-down.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-tree-top-down.png index 88b064e728..59757ec3ae 100644 Binary files a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-tree-top-down.png and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-tree-top-down.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/restore-icon.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/restore-icon.png index 3ced95ec8a..c361a70cc5 100644 Binary files a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/restore-icon.png and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/restore-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/sampling-profile.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/sampling-profile.png new file mode 100644 index 0000000000..118cbba618 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/sampling-profile.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/sort-order-menu.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/sort-order-menu.png new file mode 100644 index 0000000000..be6cfad835 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/sort-order-menu.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/stop-recording-icon.png b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/stop-recording-icon.png new file mode 100644 index 0000000000..f6de64a490 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime-images/stop-recording-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime.md b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime.md index fe5d85894a..6b8ede0e23 100644 --- a/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime.md +++ b/microsoft-edge/devtools-guide-chromium/rendering-tools/js-runtime.md @@ -1,5 +1,5 @@ --- -title: Speed up JavaScript runtime +title: Speed up JavaScript runtime ("Allocation sampling" profiling type) description: Identify expensive, inefficient functions by using the Memory panel of Microsoft Edge DevTools. 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. --> -# Speed up JavaScript runtime +# Speed up JavaScript runtime ("Allocation sampling" profiling type) To identify expensive functions, use the **Memory** tool: @@ -33,45 +33,80 @@ Visualize your profiles as a flame chart. -## Record a Sampling Profile +## Use the "Allocation sampling" profiling type to view memory allocation by JavaScript function -If you notice jank (interruptions of rendering) in your JavaScript, collect a Sampling Profile. Sampling Profiles show where running time is spent on functions in your page. +If you notice jank (interruptions of rendering) in your JavaScript, collect a memory allocation sampling profile, by using the **Allocation sampling** profiling type. A sampling profile shows which functions allocated the most memory. -1. In DevTools, go to the **Memory** tool. +To use the **Allocation sampling** profiling type to view memory allocation by JavaScript function: -1. Click the **Allocation sampling** option button. +1. Open a webpage, such as the [Detached Elements demo webpage](https://microsoftedge.github.io/Demos/detached-elements/), in a new window or tab. -1. Click **Start**. +1. Right-click the webpage, and then select **Inspect**. -1. Depending on what you are trying to analyze, you can either refresh the page, interact with the page, or just let the page run. + Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). DevTools opens. -1. When you're finished, click the **Stop** button. +1. In DevTools, in the **Activity Bar**, select the **Memory** (![Memory tool icon](./js-runtime-images/memory-tool-icon.png)) tool: + + ![The "Allocation sampling" option button in the Memory tool](./js-runtime-images/allocation-sampling-option-button.png) + + If the **Memory** tool isn't visible, click the **More tools** (![More tools icon](./js-runtime-images/more-tools-icon.png)) button, and then select **Memory**. + +1. Select the **Allocation sampling** option button. + + If the **Allocation sampling** option button isn't shown, because a profile is already displayed, in the upper left, click **Profiles** (![the Profiles icon](./js-runtime-images/profiles-icon.png)). + +1. In the **Select JavaScript VM instance** section, if there is a worker on the page, you can select that as the profiling target. + +1. At the bottom of the **Memory** tool, click the **Start** button. + +1. Interact with the webpage. For example, click the **Fast traffic** button and then the **Stop** button in the demo webpage. + + Depending on what you are trying to analyze, you can either refresh the page, interact with the page, or just let the page run. + +1. In the upper left of the **Memory** tool, click the **Stop heap profiling** (![The "Stop heap profiling" icon](./js-runtime-images/stop-recording-icon.png)) button. + + Or, at the bottom of the **Memory** tool, click the **Stop** button. A new **Profile** is added in the **Sampling profiles** section in the **Profiles** sidebar: + + ![The new Profile listed in the "Sampling profiles" section of the Profiles list](./js-runtime-images/sampling-profile.png) + + The sampling profile shows a breakdown of memory allocation by function. The default view is **Heavy (Bottom Up)**. You can switch to the **Chart** or **Tree (Top Down)** view, per the section below. You can also use the [Console Utilities API](../console/utilities.md) to record and group profiles from the command line. -## View Sampling Profile +## Change the view of a sampling profile -When you finish recording, DevTools automatically populates the **Memory** panel under **SAMPLING PROFILES** with the data from your recording. +To change the sort order in a memory allocation sampling profile, use the **Profile view mode** dropdown list, which initially says **Heavy (Bottom Up)**: -The default view is **Heavy (Bottom Up)**. This view allows you to review which functions had the most impact on performance and examine the requesting path for each function. +![Sort order menu](./js-runtime-images/sort-order-menu.png) +Menuitems: +* **Chart** - Chronological chart of the recording. +* **Heavy (Bottom Up)** - Lists the app's called functions in order of memory allocation, and shows the call path for each function. The default view. +* **Tree (Top Down)** - Shows the calling structure, starting at the top of the call stack. - -#### Change sort order -To change the sorting order, select the dropdown menu next to the **focus selected function** (![focus selected function](./js-runtime-images/focus-icon.png)) icon and then select one of the following options: + +###### Chart -**Chart**. Displays a chronological chart of the recording. +The **Chart** view mode displays a chronological chart of the recording: ![Flame chart](./js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart.png) -**Heavy (Bottom Up)**. Lists functions by impact on performance and enables you to examine the calling paths to the functions. This is the default view. + + +###### Heavy (Bottom Up) + +The **Heavy (Bottom Up)** view mode lists functions by impact on performance and enables you to examine the calling paths to the functions. This is the default view: ![Heavy chart](./js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-heavy-bottom-up.png) -**Tree (Top Down)**. Shows an overall picture of the calling structure, starting at the top of the call stack. + + +###### Tree (Top Down) + +The **Tree (Top Down)** view mode shows an overall picture of the calling structure, starting at the top of the call stack: ![Tree chart](./js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-tree-top-down.png) @@ -79,17 +114,22 @@ To change the sorting order, select the dropdown menu next to the **focus select #### Exclude functions -To exclude a function from your Sampling Profile, select it and then click the **exclude selected function** (![exclude selected function](./js-runtime-images/exclude-icon.png)) button. The requesting function (parent) of the excluded function (child) is charged with the allocated memory assigned to the excluded function (child). +When **Heavy (Bottom Up)** or **Tree (Top Down)** is selected (not **Chart**), there are several buttons, that are available (not dimmed) when you select a row: +* **Focus selected function** (![The "Focus selected function" icon](./js-runtime-images/focus-selected-function-icon.png)) +* **Exclude selected function** (![Exclude selected function](./js-runtime-images/exclude-icon.png)) +* **Restore all functions** (![Restore all functions](./js-runtime-images/restore-icon.png)) -Click the **restore all functions** (![restore all functions](./js-runtime-images/restore-icon.png)) button to restore all excluded functions back into the recording. +To exclude a function from a memory allocation sampling profile, select the sampling profile and then click the **Exclude selected function** (![Exclude selected function](./js-runtime-images/exclude-icon.png)) button. The requesting function (parent) of the excluded function (child) is charged with the allocated memory assigned to the excluded function (child). + +Click the **Restore all functions** (![Restore all functions](./js-runtime-images/restore-icon.png)) button to restore all excluded functions back into the recording. -## View Sampling Profile as Chart +## View a memory allocation sampling profile as a Chart The **Chart** view provides a visual representation of the Sampling Profile over time. -After you [record a Sampling Profile](#record-a-sampling-profile), view the recording as a flame chart by [changing the sort order](#change-sort-order) to **Chart**. +After you record a memory allocation sampling profile, view the recording as a flame chart. Select **Chart** in the the **Profile view mode** dropdown list (which initially says **Heavy (Bottom Up)**): ![Flame chart view](./js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart.png) @@ -135,6 +175,40 @@ Hover on a function to display the name and timing data: ![View functions details in the profiles chart](./js-runtime-images/rendering-tools-gh-nodejs-benchmarks-run-memory-sampling-profiles-chart-hover.png) + +## Investigate memory allocation, with reduced garbage ("Include objects" checkboxes) + +By default, the **Allocation sampling** profiling type only reports allocations that are still alive at the end of the recording session. Objects that are created, removed, and then garbage collected (GC'd) aren't displayed in the **Memory** tool when profiling using the **Allocation sampling** or **Allocations on timeline** profiling types. + +You can trust the browser to clean up garbage from your code. However, it is important to consider that GC itself is an expensive operation and multiple GCs can slow down your user's experience of your website or app. When recording in the **Performance** tool with the **Memory** checkbox turned on, you can see the GC operation happen at the steep cliffs (sudden decreases) in the heap chart: + +![GC operation shown in the Performance tool](./js-runtime-images/gc-in-performance.png) + +By reducing the amount of garbage your code is creating, you can reduce the cost of each individual GC and the number of GC operations. + + + +#### Track objects that are discarded by GC + +To track objects that are discarded by garbage collection: + +1. In the **Memory** tool, select the **Allocation sampling** option button. + +1. Click the **Include objects discarded by major GC** and **Include objects discarded by minor GC** settings. + + ![Allocation sampling GC settings](./js-runtime-images/memory-allocation-sampling-gc-settings.png) + +1. Click the **Start** button. + +1. On the webpage, perform actions that you want to investigate. + +1. Click the **Stop** button when you have finished all of your actions. + +DevTools now tracks all of the objects that were GC'd during the recording. Use these settings to understand how much garbage your website or app is generating. The data reported by **Allocation sampling** will help you identify the functions that are generating the most garbage. + +If you are investigating objects that were only GC'd during specific major or minor GC operations, configure the settings appropriately to track the operation you care about. To learn more about the differences between major and minor GC, see [Trash talk: the Orinoco garbage collector | V8 JavaScript engine developer blog](https://v8.dev/blog/trash-talk). + + > [!NOTE] > Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md index a575f8f3e3..4dc25015fc 100644 --- a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md +++ b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md @@ -38,7 +38,7 @@ last sync'd April 16, 2024 |:---|:---|:---|:---| | CSS mirroring sourcemaps | Used for [Update .css files from within the Styles tab (CSS mirror editing)](../../visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md) for the DevTools extension for Visual Studio Code. | [/css-mirroring-sourcemaps-demo/](https://github.com/MicrosoftEdge/Demos/tree/main/css-mirroring-sourcemaps-demo) | n/a | | TODO app | Simple To Do app with vanilla JavaScript. Used for screenshots in the [Microsoft Edge DevTools documentation](/microsoft-edge/devtools-guide-chromium/landing/), and for [Opening DevTools and the DevTools browser](../../visual-studio-code/microsoft-edge-devtools-extension/open-devtools-and-embedded-browser.md) for the DevTools extension for Visual Studio Code. | [/demo-to-do/](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do) | [My tasks](https://microsoftedge.github.io/Demos/demo-to-do/) | -| Detached elements | Chat-like demo. Used for [Debug DOM memory leaks with the Detached Elements tool](../memory-problems/dom-leaks.md). | [/detached-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) | [Simulate traffic](https://microsoftedge.github.io/Demos/detached-elements/) | +| Detached elements | Chat-like demo. Used for [Debug DOM memory leaks by using the Detached Elements tool](../memory-problems/dom-leaks.md). | [/detached-elements/](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) | [Simulate traffic](https://microsoftedge.github.io/Demos/detached-elements/) | | 3D View | Used for [Navigate webpage layers, z-index, and DOM using the 3D View tool](../3d-view/index.md). | [/devtools-3d/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-3d) | [Microsoft Edge DevTools 3D View tool demo](https://microsoftedge.github.io/Demos/devtools-3d/) | | Accessibility testing | Used for [Accessibility-testing features](../accessibility/reference.md). | [/devtools-a11y-testing/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-a11y-testing) | [Animal shelter](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) | | DevTools issue: animating a CSS property that requires layout | Illustrates the **Issues** and **Elements** tools warning when CSS properties that require layout are animated. | [/devtools-animated-property-issue/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-animated-property-issue) | [Animated CSS property demo](https://microsoftedge.github.io/Demos/devtools-animated-property-issue/) | @@ -50,7 +50,7 @@ last sync'd April 16, 2024 | Explain Console errors and warnings in Copilot in Edge | Generates errors in the Console that can then be explained by using Copilot in Edge. | [/devtools-explain-error/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-explain-error) | [Explaining console errors demo](https://microsoftedge.github.io/Demos/devtools-explain-error/) | | Inspect tool | Used for [Analyze pages using the Inspect tool](../css/inspect.md). | [/devtools-inspect/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Inspect Demo](https://microsoftedge.github.io/Demos/devtools-inspect/) | | Debugging JavaScript that adds two numbers | Used for [Get started debugging JavaScript](../javascript/index.md). | [/devtools-js-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) | [Demo: Debugging JavaScript with Microsoft Edge DevTools](https://microsoftedge.github.io/Demos/devtools-js-get-started/) | -| Memory heap snapshot | Used for [Record heap snapshots using the Memory tool](../memory-problems/heap-snapshots.md). | [/devtools-memory-heap-snapshot/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) | n/a | +| Memory heap snapshot | Used for [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../memory-problems/heap-snapshots.md). | [/devtools-memory-heap-snapshot/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) | n/a | | Performance Activity Tabs | Used for [View activities in a table](../evaluate-performance/reference.md#view-activities-in-a-table), 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 [Introduction to the Performance tool](../evaluate-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/) | | postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](../evaluate-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/) | diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/02/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/02/devtools.md index a98b439789..0277577695 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/02/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/02/devtools.md @@ -47,6 +47,7 @@ To turn on the experiment, see [Turning an experiment on or off](../../../experi The DevTools Tooltips feature helps you learn about all the different tools and panes. Hover over each outlined region of DevTools to learn more about how to use the tool. To turn on Tooltips, do one of the following: + * Select **Customize and control DevTools** (`...`) > **Help** > **Toggle the DevTools Tooltips**. * Press **Ctrl+Shift+H** (Windows, Linux) or **Command+Shift+H** (macOS). * [Open the Command Menu](../../../command-menu/index.md#open-the-command-menu) and then type **tooltips**. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md index 8dced98fd2..7524e83762 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/04/devtools.md @@ -60,6 +60,7 @@ See also: The DevTools Tooltips feature helps you learn about all the different tools and panes. Hover over each outlined region of DevTools to learn more about how to use the tool. To turn on Tooltips, do any of the following: + * Select **Customize and control DevTools** (`...`) > **Help** > **Toggle the DevTools Tooltips**. * Press **Ctrl+Shift+H** (Windows, Linux) or **Command+Shift+H** (macOS). * [Open the Command Menu](../../../command-menu/index.md#open-the-command-menu) and then type **tooltips**. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/07/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/07/devtools.md index 8ac20d664d..ef7179782e 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/07/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/07/devtools.md @@ -53,16 +53,20 @@ See [Apply color themes to DevTools](../../../customize/theme.md). +October 2024 update: To debug DOM memory leaks, use either: +* The **Detached Elements** tool. Detached nodes have a link to the associated JavaScript code. +* The **Detached elements** profiling type in the **Memory** tool. + A DOM node is considered "detached" when it is no longer attached to any element of the DOM but is still being retained in memory by Microsoft Edge. The browser cannot garbage-collect the element, because some JavaScript is still referencing the element even though it's no longer on the page or a part of the DOM. -The new **Detached Elements** tool finds all of the detached elements on your page and displays them. You can expand and collapse a detached element to see the parent and child nodes that are also being retained. You can trigger the browser's garbage collection by selecting **Collect garbage** and validate that you have a memory leak when a detached element cannot be garbage-collected. Finally, you can jump into JavaScript that's referencing the detached element by taking a heap snapshot with the **Analyze** button. +The **Detached Elements** profiling type in the **Memory** tool finds all of the detached elements on your page and displays them. You can expand and collapse a detached element to see the parent and child nodes that are also being retained. You can trigger the browser's garbage collection by selecting **Collect garbage** and validate that you have a memory leak when a detached element cannot be garbage-collected. Finally, you can jump into JavaScript that's referencing the detached element by taking a heap snapshot with the **Analyze** button. ![The Detached Elements tool](./devtools-images/detached-elements-tool.png) Update: This feature has been released and is no longer experimental. See also: -* [Debug DOM memory leaks with the Detached Elements tool](../../../memory-problems/dom-leaks.md) +* [Debug DOM memory leaks by using the Detached Elements tool](../../../memory-problems/dom-leaks.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md index 489c88c3ad..01bea70b3a 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md @@ -27,17 +27,18 @@ ms.date: 01/14/2022 A DOM node is considered _detached_ when it's no longer attached to any element of the DOM, but is still being retained in memory by Microsoft Edge. The browser cannot garbage-collect the detached element, because some JavaScript object is still referencing the element, even though the element is no longer on the page or is no longer a part of the DOM. -The new **Detached Elements** tool finds all of the detached elements on your page and displays them. You can expand and collapse a detached element to see the parent and child nodes that are also being retained. You can trigger the browser's garbage collection by clicking the **Collect garbage** icon, and then confirm that you have a memory leak when a detached element cannot be garbage-collected. To jump into the JavaScript code that's referencing the detached element, click the **Analyze** button to take a heap snapshot. +The new **Detached Elements** feature finds all of the detached elements on your page and displays them. You can expand and collapse a detached element to see the parent and child nodes that are also being retained. You can trigger the browser's garbage collection by clicking the **Collect garbage** icon, and then confirm that you have a memory leak when a detached element cannot be garbage-collected. To jump into the JavaScript code that's referencing the detached element, click the **Analyze** button to take a heap snapshot. -The **Detached Elements** tool was initially available as an experiment in [Microsoft Edge version 93](../../2021/07/devtools.md#debug-dom-node-memory-leaks-with-the-new-detached-elements-tool). The tool is now available by default in Microsoft Edge version 97. +The **Detached Elements** feature was initially available as an experiment in [Microsoft Edge version 93](../../2021/07/devtools.md#debug-dom-node-memory-leaks-with-the-new-detached-elements-tool). The feature is now available by default in Microsoft Edge version 97. - + -![The Detached Elements tool](./devtools-images/detached-elements-tool.png) +![The Detached Elements feature](./devtools-images/detached-elements-tool.png) See also: -* [Debug DOM memory leaks with the Detached Elements tool](../../../memory-problems/dom-leaks.md) +* [Tools for investigating detached elements](../../../memory-problems/index.md#tools-for-investigating-detached-elements) in _Fix memory problems_. +* [Debug DOM memory leaks by using the Detached Elements tool](../../../memory-problems/dom-leaks.md) * [Debug memory leaks with the Microsoft Edge Detached Elements tool - YouTube](https://www.youtube.com/watch?v=v2iy17ptmBk&ab_channel=MicrosoftEdge) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-100.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-100.md index c16d6b9e10..3d56bb7811 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-100.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-100.md @@ -43,7 +43,7 @@ When looking at all the objects in a heap snapshot in the **Memory** tool, it ca ![Node Types in a heap snapshot in the Memory tool](devtools-100-images/node-types-heap-snapshot.png) See also: -* [Record heap snapshots using the Memory tool](../../../memory-problems/heap-snapshots.md) - taking a heap snapshot and analyzing the heap. +* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../../../memory-problems/heap-snapshots.md) - taking a heap snapshot and analyzing the heap. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/05/devtools-102.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/05/devtools-102.md index 4f6c0110a6..f27c55c23c 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/05/devtools-102.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/05/devtools-102.md @@ -59,7 +59,7 @@ The **Memory** tool exports a JSON file that contains all of the string objects ![Strings from the heap snapshot, in the JSON file](devtools-102-images/heap-snapshot-strings-json-file.png) See also: -* [Save and export strings from a heap snapshot to JSON](../../../memory-problems/heap-snapshots.md#save-and-export-strings-from-a-heap-snapshot-to-json) in _Record heap snapshots using the Memory tool_. +* [Save and export strings from a heap snapshot to JSON](../../../memory-problems/heap-snapshots.md#save-and-export-strings-from-a-heap-snapshot-to-json) in _Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)_. @@ -89,7 +89,7 @@ The second and potentially subsequent appearances of the node are still displaye _Internal nodes_ are objects that are specific to V8 (the JavaScript engine in Microsoft Edge). Internal nodes are also displayed in the **Retainers** section. See also: -* [Hide cycles](../../../memory-problems/heap-snapshots.md#hide-cycles) in _Record heap snapshots using the Memory tool_. +* [Hide cycles](../../../memory-problems/heap-snapshots.md#hide-cycles) in _Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)_. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/06/devtools-103.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/06/devtools-103.md index 1d6140179a..19f26fa768 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/06/devtools-103.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/06/devtools-103.md @@ -34,7 +34,7 @@ In Microsoft Edge 103, when taking a heap snapshot in the **Memory** tool, there For history, see [Issue 12769: Improve categorization of objects in heap snapshots](https://bugs.chromium.org/p/v8/issues/detail?id=12769). See also: -* [Constructor entries](../../../memory-problems/heap-snapshots.md#constructor-entries) in _Record heap snapshots using the Memory tool_. +* [Constructor entries](../../../memory-problems/heap-snapshots.md#constructor-entries) in _Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)_. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/08/devtools-104.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/08/devtools-104.md index 1ca57aeae0..eb8be5bbf5 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/08/devtools-104.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/08/devtools-104.md @@ -64,12 +64,13 @@ See also: -In previous versions of Microsoft Edge, when selecting the table of detached elements in the **Detached Elements** tool, assistive technology only announced "Table" and the number of rows and columns. In Microsoft Edge version 104, this issue has been fixed. When selecting the table of detached elements in the **Detached Elements** tool, assistive technology now announces "Detached Elements List, Table" and the number of rows and columns. +In previous versions of Microsoft Edge, when selecting the table of detached elements in the **Detached Elements** feature, assistive technology only announced "Table" and the number of rows and columns. In Microsoft Edge version 104, this issue has been fixed. When selecting the table of detached elements in the **Detached Elements** feature, assistive technology now announces "Detached Elements List, Table" and the number of rows and columns. ![Detached Elements List, Table, 5 rows, 3 columns](./devtools-104-images/a11y-detached-elements.png) See also: -* [Debug DOM memory leaks with the Detached Elements tool](../../../memory-problems/dom-leaks.md) +* [Tools for investigating detached elements](../../../memory-problems/index.md#tools-for-investigating-detached-elements) in _Fix memory problems_. +* [Debug DOM memory leaks by using the Detached Elements tool](../../../memory-problems/dom-leaks.md) * [Navigate DevTools with assistive technology](../../../accessibility/navigation.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/10/devtools-107.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/10/devtools-107.md index 92cc58fb2a..51ffbd8893 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/10/devtools-107.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/10/devtools-107.md @@ -79,7 +79,7 @@ In Microsoft Edge 107, this issue has been fixed. The **Memory** tool can now s If you still encounter issues when loading large heap snapshots, please open an issue in the [DevTools repo](https://github.com/MicrosoftEdge/DevTools/issues/new?assignees=&labels=bug&template=bug.md)! See also: -* [Record heap snapshots using the Memory tool](../../../memory-problems/heap-snapshots.md) +* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../../../memory-problems/heap-snapshots.md) * [Issue 9126: Hardcoded memory limits of Map (backed by FixedArray)](https://bugs.chromium.org/p/v8/issues/detail?id=9126) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md index fe96db8f43..b57b2d13d9 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md @@ -113,8 +113,7 @@ Select both options if you want to track garbage that is being generated by your ![Allocation sampling profiling options](./devtools-109-images/allocation-sampling-profiling-options.png) See also: -* [Investigate memory allocation by function](../../../memory-problems/index.md#investigate-memory-allocation-by-function) in _Fix memory problems_. -* [Reduce garbage with additional settings for allocation sampling](../../../memory-problems/index.md#reduce-garbage-with-additional-settings-for-allocation-sampling) in _Fix memory problems_. +* [Investigate memory allocation, with reduced garbage ("Include objects" checkboxes)](../../../rendering-tools/js-runtime.md#investigate-memory-allocation-with-reduced-garbage-include-objects-checkboxes) in _Speed up JavaScript runtime ("Allocation sampling" profiling type)_. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110.md index e726cf962c..cfcf8449c2 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110.md @@ -31,7 +31,7 @@ In Microsoft Edge 110, the **Memory** tool is now 70% to 86% faster at taking he ![Taking a heap snapshot in the Memory tool](./devtools-110-images/faster-heap-snapshot.png) See also: -* [Record heap snapshots using the Memory tool](../../../memory-problems/heap-snapshots.md#take-a-snapshot) +* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../../../memory-problems/heap-snapshots.md#take-a-snapshot) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/05/devtools-113.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/05/devtools-113.md index f6d4637e6d..3d8da9be02 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/05/devtools-113.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/05/devtools-113.md @@ -83,7 +83,7 @@ Now in Microsoft Edge 113, the **Memory** tool automatically unminifies object n See also: * [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](../../../javascript/publish-source-maps-to-azure.md) * [Securely debug original code by using Azure Artifacts symbol server source maps](../../../javascript/consume-source-maps-from-azure.md) -* [Take a snapshot](../../../memory-problems/heap-snapshots.md#take-a-snapshot) in _Record heap snapshots using the Memory tool_. +* [Take a snapshot](../../../memory-problems/heap-snapshots.md#take-a-snapshot) in _Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)_. @@ -143,7 +143,7 @@ In the **Containment** and **Statistics** views, the **Node Types** filter is no 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)_ -* [Take a snapshot](../../../memory-problems/heap-snapshots.md#take-a-snapshot) in _Record heap snapshots using the Memory tool_. +* [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-guide-chromium/whats-new/2023/06/devtools-114.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/06/devtools-114.md index eb5f0cffe7..abcf3bcce3 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/06/devtools-114.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/06/devtools-114.md @@ -104,7 +104,7 @@ In Microsoft Edge 114, this issue has been fixed, by ensuring that consistent ob ![Comparing two heap snapshots in Microsoft Edge 114](./devtools-114-images/snapshot-comparison-114.png) See also: -* [View snapshots](../../../memory-problems/heap-snapshots.md#view-snapshots) in _Record heap snapshots using the Memory tool_. +* [View snapshots](../../../memory-problems/heap-snapshots.md#view-snapshots) in _Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)_. * [Change List 4278992: Produce consistent IDs for Oilpan objects in heap snapshots](https://chromium-review.googlesource.com/c/v8/v8/+/4278992) * [Issue 1286500: Heap snapshot comparison incorrectly reports large numbers of new and deleted objects](https://bugs.chromium.org/p/chromium/issues/detail?id=1286500) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md index 19fb04326b..0353c48c5e 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md @@ -72,7 +72,7 @@ See also: -In previous versions of Microsoft Edge, in the **Memory** tool, when using the **Allocation instrumentation on timeline** option, the **Memory** tool takes a sample of the heap every 50 milliseconds. However, taking a sample of the heap scales with the size of the heap, so with a heap size of 200 MB, the sample actually takes 1.5 seconds to generate. As a result, there's little time left on the main thread for your website, outside of generating heap samples. When **Allocation instrumentation on timeline** is running, it might look like your web content is hanging or blocked. +In previous versions of Microsoft Edge, in the **Memory** tool, when using the **Allocation instrumentation on timeline** profiling type (later re-labelled as the **Allocations on timeline** option button), the **Memory** tool takes a sample of the heap every 50 milliseconds. However, taking a sample of the heap scales with the size of the heap, so with a heap size of 200 MB, the sample actually takes 1.5 seconds to generate. As a result, there's little time left on the main thread for your website, outside of generating heap samples. When **Allocation instrumentation on timeline** is running, it might look like your web content is hanging or blocked. In Microsoft Edge 115, the sample rate for the heap now scales to the time it takes to generate a sample, freeing up the main thread so that you can interact with your web content while profiling. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/08/devtools-116.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/08/devtools-116.md index 00b30d681e..6c22c618e8 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/08/devtools-116.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/08/devtools-116.md @@ -74,8 +74,8 @@ For example: 1. In the **Object** column, expand an entry. See also: -* [Record heap snapshots using the Memory tool](../../../memory-problems/heap-snapshots.md) -* [Demo webpage: Example 9: DOM leaks bigger than expected](../../../memory-problems/heap-snapshots.md#demo-webpage-example-9-dom-leaks-bigger-than-expected) in _Record heap snapshots using the Memory tool_. +* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../../../memory-problems/heap-snapshots.md) +* [Demo webpage: Example 9: DOM leaks bigger than expected](../../../memory-problems/heap-snapshots.md#demo-webpage-example-9-dom-leaks-bigger-than-expected) in _Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)_. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/03/devtools-123.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/03/devtools-123.md index 7f061765f8..dbfe9c4be0 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/03/devtools-123.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/03/devtools-123.md @@ -43,7 +43,7 @@ Heap snapshots with the new experiment enabled: This experiment is helpful because heap snapshots in the Memory tool show a complete list of everything allocated in the V8 and Blink heaps. Sometimes that list is a little too fine-grained, breaking out an item as if it is multiple items. For example, the list in the heap snapshot represents each JavaScript `Array` instance separately from the contents of that `Array`, which are called `(object elements)[]`. However, in JavaScript code, an `Array` is a single entity, rather than an array instance and separate contents of the array. See also: -* [Record heap snapshots using the Memory tool](../../../memory-problems/heap-snapshots.md) +* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../../../memory-problems/heap-snapshots.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md index 8a0ece22f9..12efc1f773 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/08/devtools-128.md @@ -64,7 +64,7 @@ In the **Memory** tool, there are several improvements for heap snapshots: * The **Include numerical values in capture** checkbox (shown before you take a heap snapshot) has been removed, and heap snapshots now always show numeric values. See also: -* [Record heap snapshots using the Memory tool](../../../memory-problems/heap-snapshots.md) +* [Record heap snapshots using the Memory tool ("Heap snapshot" profiling type)](../../../memory-problems/heap-snapshots.md) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 568c74425c..651663e974 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -500,7 +500,7 @@ # Detached Elements tool ------------------------------------------------------ - name: Detached Elements tool items: - - name: Debug DOM memory leaks with the Detached Elements tool # added article + - name: Debug DOM memory leaks by using the Detached Elements tool # added article href: devtools-guide-chromium/memory-problems/dom-leaks.md displayName: Detached Elements tool # Developer Resources tool ---------------------------------------------------- @@ -544,18 +544,25 @@ href: devtools-guide-chromium/memory-problems/memory-101.md displayName: Memory tool - - name: Record heap snapshots using the Memory tool + - name: Monitor memory use in realtime (Microsoft Edge Browser Task Manager) + href: devtools-guide-chromium/memory-problems/microsoft-edge-browser-task-manager.md + + - name: Record heap snapshots using the Memory tool ("Heap snapshot" profiling type) href: devtools-guide-chromium/memory-problems/heap-snapshots.md - displayName: Memory tool + displayName: Memory tool - - name: Use Allocation instrumentation on timeline + - name: Use Allocation instrumentation on timeline ("Allocations on timeline" profiling type) href: devtools-guide-chromium/memory-problems/allocation-profiler.md displayName: Memory tool - - name: Speed up JavaScript runtime + - name: Speed up JavaScript runtime ("Allocation sampling" profiling type) href: devtools-guide-chromium/rendering-tools/js-runtime.md displayName: Memory tool + - name: Debug DOM memory leaks ("Detached elements" profiling type) + href: devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements.md + displayName: Memory tool + - name: The heap snapshot file format href: devtools-guide-chromium/memory-problems/heap-snapshot-schema.md displayName: Memory tool