Variable in Code doesn't match the Corresponding Screenshot

[abhinavgalodha]

Page Affected: https://developers.google.com/web/tools/chrome-devtools/memory-problems/

What needs to be done?
In the Section Discover detached DOM tree memory leaks with Heap Snapshots, There is an issue with the variable name detachedNodes used in the javascript code and the corresponding variable detachedTree shown in the Image imgs/yellow-node.png

Please provide description of what's needs to be done here. Please be sure to include the link to the original page and any supporting links/data.

In the Section Discover detached DOM tree memory leaks with Heap Snapshots, the variable
var detachedNodes; references the DOM nodes. If we perform a Heap Snaphot to find the detached nodes, we can see the object detachedNodes in the Object View in the Heap Snapshot. In the documentation, however, the variable is shown as detachedTree which is confusing and creates ambuguity.

var detachedNodes;  //<--variable creating detached nodes

function create() {
  var ul = document.createElement('ul');
  for (var i = 0; i < 10; i++) {
    var li = document.createElement('li');
    ul.appendChild(li);
  }
  detachedNodes = ul;
}

document.getElementById('create').addEventListener('click', create);

As per the documentation, the variable referenced is mentioned as detachedTree

Click on a yellow node to investigate it further. In the Objects pane you can see more information about the code that's referencing it. For example, in the screenshot below you can see that the detachedTree variable is referencing the node. To fix this particular memory leak, you would study the code that uses detachedTree and ensure that it removes its reference to the node when it's no longer needed.

What needs to be done to fix?
Update the variable name from detachedNodes to detachedTree in the javascript code to present clear information.