Memory

Use the Memory panel to measure your use of system resources and compare heap snapshots at different states of code execution. With it, you can:

The Microsoft Edge F12 DevTools Memory panel

Toolbar

  1. Start/Stop profiling session (Ctrl+E): Turning on the profiler enables you to track memory usage and take snapshots of the heap.
  2. Import profiling session (Ctrl+O): Load a saved F12 DevTools memory diagnostic session.
  3. Export profiling session (Ctrl+S): Save the current diagnostic session to disk.
  4. Take heap snapshot (Ctrl+Shift+T): Record current memory allocations for a given point of time.

Memory usage timeline

Memory problems can be a major culprit of performance issues, causing your page to become increasingly unresponsive and laggy over time.

The first step to analyzing the memory usage of your page is to start a profiling session in order to take before/after snapshots of the heap as you repro the steps causing memory bloat or a suspected memory leak.

When you start the memory profiler, you will see a process memory graph that allows you to observe the overall private working set (the amount of memory consumed by the page) over time. The memory graph shows you a live view of the tab's process memory, which includes private bytes, native memory, and the JavaScript heap.

Memory usage timeline

The graph gives you an indication of the memory trend for the page which enables you to judge when it is appropriate to take a heap snapshot for later comparison, such as when you see periods of unexpected memory retention.

Performance.mark()

You can add custom User marks to the timeline to help identify key events during the course of your analysis session by calling the Performance.mark() method from within your code or the F12 DevTools Console.

Console.takeheapSnapshot()

Sometimes you need to take snapshots at very specific points in time, such as immediately before a large mutation of the DOM. In these cases,you can take snapshots programmatically with Console.takeHeapSnapshot().

Snapshot summary

Taking a snapshot will generate a summary tile that indicates the size of the JavaScript heap at the time the snapshot was taken, along with the number of objects allocated and a screenshot of the page. You can continue to take snapshots at any time as you run through the user scenario requiring analysis. The snapshots generate additional tiles, each of which indicates the difference in JavaScript memory from the previous snapshot.

Heap snapshot

Clicking on the values in the summary tile will switch to the pane showing details of the snapshot data. Potential memory issues are indicated with a blue informational ("i") icon.

Snapshot details

The data in the Snapshot pane shows the objects created by your page along with any memory allocated by JavaScript frameworks you may be consuming.

Snapshot details table

The three tabs represent different views of the data:

Types

Shows the instance count and total size of objects on the heap, grouped by object type. By default, these are sorted by instance count.

When you select an object in the upper Types pane, the Object references table in the lower pane will list all the objects that point to that object.

Roots

Shows a hierarchical view of child references to describe how objects are rooted to the global object, thus preventing them from being garbage-collected.

By default, the child nodes are sorted by the retained size column, with the largest at the top.

Dominators

Shows a list of objects on the heap that have exclusive references to other objects. Dominators are sorted by retained size to indicate the the objects consuming the most memory that are potentially easiest to free.

Here's how to interpret the columns in the Types, Roots and Dominators views:

Column Description
Identifier(s) Name that best identifies the object. For example, for HTML elements the snapshot details show the ID attribute value, if one is used.
Type Object type (for example, HTMLDivElement).
Size Object size, not including the size of any referenced objects.
Retained size Object size plus the size of all child objects that have no other parents. For practical purposes, this is the amount of memory retained by the object, so if you delete the object you reclaim the specified amount of memory.
Count Number of object instances. This value appears only in the Types view.

When you select an object in the upper Dominators pane, the Object references table in the lower pane will list all the objects that point to that object.

Filters

You can further adjust data in the table with the following:

Filter for built-ins and object IDs

  1. Identifier filter: Filter out data by searching for a particular object identifier
  2. Group by dominator: Only objects with exclusive references to other objects are shown in the top-level view of objects (this is the default view in the Dominators tab).
  3. Built-ins / IDs filter: By default, JavaScript built-in objects are included in the list. Listing object IDs can be useful if there are multiple anonymous objects which need to be differentiated.

The Types, Roots and Dominators views each has its own filter, so the filter isn't preserved when you switch to another view.

Object references

In the Types and Dominators views, the lower pane contains an Object references list that displays shared references. When you choose an object in the upper pane, this list displays all objects that point to that object--in other words, the objects that are keeping the seleted object alive.

Circular references are shown with an asterisk (*) and informational tooltip, and cannot be expanded. Otherwise, they would prevent you from walking up the reference tree and identifying objects that are retaining memory.

To quickly identify equivalent objects, tick the Display object IDs filter option to display object IDs next to object names in the Identifier(s) column. Objects that have the same ID are shared references.

Snapshot comparison

Clicking on a snapshot comparison tab or comparison link on the snapshot summary tile will show a diff of information between the two snapshots. In the comparison pane, the Dominators, Types and Roots views provide the same snapshot details you would see for a single snapshots, with these additional values:

Column Description
Size diff. Difference between the size of the object in the current snapshot and its size in the previous snapshot, not including the size of any referenced objects.
Retained size diff. Difference between the retained size of the object in the current snapshot and its retained size in the previous snapshot. The retained size includes the object size plus the size of all its child objects that have no other parents. For practical purposes, the retained size is the amount of memory retained by the object, so if you delete the object you reclaim the specified amount of memory.

You can use the Scope dropdown to filter differential info between snapshots:

Scoping filter for snapshot comparisions

  • Objects left over from Snapshot #: Shows the diff between the objects added to the heap and removed from the heap from the baseline snapshot to the previous snapshot. For example, if the snapshot summary shows +205 / -195 in the object count, this filter will show you the ten objects that were added but not removed.

  • Objects added between Snapshot # and #: Shows all objects added to the heap from the previous snapshot.

  • All objects in Snapshot #: Shows all objects on the heap (in other words, an unfiltered view).

By default, the Show non-matching references filter is applied to the comparison view to indicate object references that don't match the current Scope filter. You can turn it off from the dropdown menu:

Non-matching references filter for snapshot comparisons

Shortcuts

Action Shortcut
Start / Stop profiling session Ctrl + E
Import profiling session Ctrl + O
Export profiling session Ctrl + S
Take heap snapshot Ctrl + Shift + T