Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome Heap Snapshot -- no colors for detached nodes

I'm following this tutorial under "Discover detached DOM tree memory leaks with Heap Snapshots".

When I search for detached nodes, I see a bunch of "Detached" elements. But when I expand them, none of the contained elements are red or yellow, as described in the tutorial.

Has this behavior changed? I'm using 70.0.3538.77 for Mac.

like image 522
JW. Avatar asked Nov 01 '18 21:11

JW.


People also ask

How do I read Heap snapshots?

In DevTools, open the Memory tool. In the Select profiling type section, select the Heap snapshot option button. Click the Take snapshot button, and then click Start.

How do I check my chrome Heap memory?

To find out how much memory different pages use, you should open the built-in Chrome Task Manager. After opening the Chrome Memory tab, you are introduced with three options to investigate website's memory usage: you can take a heap snapshot, start allocation instrumentation on a timeline, or begin allocation sampling.

How do I screenshot on chrome Heap?

To create a snapshot, open DevTools and go to the Profiles panel, select the Take Heap Snapshot radio button, and then press the Take Snapshot button. The snapshot may take some time to process and load. Once it's finished, select it from the lefthand panel (named HEAP SNAPSHOTS).

What is the purpose of taking a Heap snapshot?

Snapshots give you the ability to capture additional metadata that isn't autocaptured by Heap out-of-the-box.


1 Answers

Following this proposal, the color coding was replaced by icons with tooltips:

JS object that is reachable from window
Was: yellow highlight
Now: icon of a small window

DOM object that is detached from the tree
Was: red highlight
Now: icon with a pair of scissors

like image 72
Xeos Avatar answered Sep 27 '22 22:09

Xeos