The DevTools docs have moved! For the latest tutorials, docs and updates head over to the new home of Chrome DevTools.

Finding Accumulation Points

This page demonstrates how accumulation points can be detected using the Heap Profiler.

Below is the source code of the script, for reference:

function CollectionItem(s)
{
  this.s = s;
}

function Collection()
{
  this.items = [];
}

Collection.prototype = {
  add: function(item)
  {
    this.items.push(item);
  },

  item: function(index)
  {
    return this.items[index];
  }
}

function createCollection(count)
{
  var collection = new Collection();
  for (var i = 0; i < count; ++i)
    collection.add(new CollectionItem(i.toString()));
  return collection;
}

var holder1 = [createCollection(10000), createCollection(15000)];
var holder2 = [holder1[0]];

Using the Dominators view, it's easy to spot collection objects that are small by themselves but retain lots of memory. In the Dominators view, find the DOMWindows node (usually, the topmost one) and expand it. Look at the top two child nodes (by default nodes are sorted by their retained size). The first one is a system wrapper around the holder1 array. The second one is the Collection node. Both of them have small shallow size, but big retained size, due to a fact that they hold lots of CollectionItem objects.

Note that the Dominators reveals dependencies between objects, not their references. For example, one of the Collection objects is shared between two arrays, thus it is not retained by any of them, but by the DOMWindows object.

To see, how an object is actually referenced, click on it, and look at the lower panel that shows retaining paths.