Memory Hands-On 4

Back

Memory Inspector Tool Demo

Welcome to the Memory Inspector tool demo. Use the buttons below to allocate different types of memory and inspect them using the Memory Inspector in DevTools.

Creates a fixed-length raw binary data buffer of 50MB
Creates a 50MB Uint8Array of 8-bit unsigned integers
Creates an object with 1 million entries, each containing index, random value and array data
Creates a string with 10 million 'a' characters
Creates a Map with 1 million entries, each containing index, random value and array data
Creates a Set with 1 million unique objects, each containing index, random value and array data
Creates a WeakMap with 1 million weakly referenced key-value pairs
Creates a WeakSet with 1 million weakly referenced objects

How to Use the Memory Inspector

    Setup:

  1. Open Chrome DevTools by pressing F12 or right-clicking anywhere and selecting "Inspect"
  2. Click on the "Memory" tab in DevTools (if not visible, click >> to show more tabs)

    3. Taking Snapshots:

  3. Click "Take heap snapshot" in the Memory panel
  4. Wait for the initial snapshot to complete - this is your baseline

    5. Testing Memory Allocation:

  5. Click any of the buttons above to allocate different types of memory
  6. Take another heap snapshot after each allocation
  7. Compare snapshots by selecting them from the left panel to see memory changes

    8. Analysis:

  8. Look for your allocated objects in the snapshot comparison
  9. Observe the size and count of allocated objects
  10. Note how different data structures consume memory differently