HeapShot

Inspiration

Modern web applications are increasingly memory-intensive, and debugging memory leaks in browsers can be painful. While browser developer tools provide snapshots, it’s difficult to directly compare them and identify what changed between two points in time. We wanted a lightweight tool that makes this process more intuitive and accessible.

What it does

HeapShot allows developers to take multiple heap snapshots in the browser and view differences in values and memory usage between them. Instead of manually sifting through raw data, users can see clear comparisons of memory allocation trends, growth, and usage patterns over time.

How we built it

We built HeapShot as a browser-based tool that hooks into the JavaScript heap profiler API to capture memory snapshots. The snapshots are parsed and visualized using an interactive UI, showing statistics and comparisons side-by-side. We focused on keeping the tool simple and fast so developers can integrate it into their debugging workflow without friction.

Challenges we ran into

The biggest challenge was the lack of support for deep heap inspection in the browser environment. While we could extract statistics like memory usage, object counts, and growth, it was not possible to drill into individual objects or references the way full debuggers do. This limited how detailed our comparisons could be, so we had to focus on aggregated statistics rather than object-level diffs.

Accomplishments that we're proud of

Building a functional system that captures and compares heap snapshots directly in the browser. Designing a clean interface that makes memory usage differences easy to understand. Creating a foundation that can be extended once deeper heap inspection becomes more accessible.

What we learned

We learned about the limitations of current browser APIs for memory debugging, the trade-offs between performance and detail in heap inspection, and the importance of visualization for making raw data actionable. We also got hands-on experience with memory profiling and browser internals.