This demo is a DevTools extension to show a visualization of the contents of a *.heapsnapshot file.

* This extension is under development

The DevTools Memory tool produces a *.heapsnapshot file. For information about the schema of the file, see The heap snapshot file format.

• A force directed graph.
• A tree.

• Filter nodes.
• Explore the memory structure starting from GC retainers.
• Isolate the retainer chain for a single node using its object ID.

This extension uses React and D3.

This is a project that uses Typescript and React. To get the outputs that are needed for the extension, build the demo as follows:

npm install

npm run build

1. Open Microsoft Edge.
2. Go to edge://extensions.
3. Enable Developer Mode.
4. Click "Load unpacked" and select the build folder.
5. Go to a webpage, and then open DevTools.
6. Find the Heap Snapshot Visualizer tab.