Memory Hands-On 2

Back

Find detached elements

  1. Using the Heap Snapshot:
    • Click "Take heap snapshot" in DevTools
    • Perform the exercise actions (click the button)
    • Take another heap snapshot
    • Type "Detached" in the class filter box and observe the detached objects
    • In the dropdown, select "Objects retained by detached DOM nodes" view, and observe the objects
    • In the dropdown, select "Comparison" view
    • Compare the two snapshots to see what changed
    • Look specifically for:
      • Detached DOM elements
    • Wait a few seconds and take another heap snapshot
    • Are these Detached objects these? Or GC collected them?
  2. Using the Memory Timeline:
    • Select "Record allocation timeline" in the Memory tab
    • Click "Start" to begin recording
    • Click that button like it owes you money! 🤑 (many times)
    • Click "Stop" to analyze the timeline
    • Look specifically for:
      • Detached DOM elements
  3. Finding Allocations sampling:
    • Start the Allocations sampling
    • Perform the exercise actions (click the button)
    • Stop and observe the file and the function where allocations come from
  4. Finding Detached Elements:
    • Start the "Detached Elements"
    • Do you see some?
    • Perform the exercise actions (click the button)
    • Start another "Detached Elements"
    • And now? Do you see some?
leaking pipe