A New Way to Debug Memory Issues with Web Apps

It’s been a busy few months, what with getting married, honeymooning, moving, and setting up our apartment. Despite all that real life, I’ve been hard at work building a cool little tool for visualizing Chrome heap profiles. I couldn’t be more excited to announce that HeapViz is live!

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.

It was a lot of fun, and a lot of work, building HeapViz. Check out my articles on my inspiration, how I selected a visualization method, my choice of renderer, using WebWorkers, and speeding up the layout with WebAssembly. I would love feedback on both the app and the code behind it, and hope you get a kick out of seeing memory space laid out in a cool, circular way!