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.
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.
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.
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).
Snapshots give you the ability to capture additional metadata that isn't autocaptured by Heap out-of-the-box.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With