HeapViz is a tool that allows you to upload a Chrome heap timeline or heap snapshot and see it visualized using a circle packing algorithm. This means you get insights into what your web app’s memory footprint is and can easily locate outliers or problematic nodes. By playing through your timeline step-by-step you can identify exactly where these issue areas occur, and by viewing edges and retainers you can get insight into the nature of the problematic nodes.

To use HeapViz, generate a timeline or snapshot of the website you would like to profile by using the memory tab in the Chrome DevTools.

Then, upload the heap profile to HeapViz by dragging it onto the main window.

Finally, play around with your profile by hovering and clicking on nodes. You can change the sample that’s displayed by clicking and dragging on the sample selection bar at the top of the window, or by using the arrow keys.

Try changing the filters to only show nodes of a certain size, number of retainers or edges, or type.

Click on the retainers or edges button for a look at the nodes that reference the current node.