Memory Inspector Theoretical 1

Inspect ArrayBuffers in JS

Use the Memory Inspector tool to inspect the ArrayBuffers in JS

In this example, we will create a loop that creates a new ArrayBuffer and fills it with random data. We will then inspect the memory used by the ArrayBuffer in the Memory Inspector.

Steps

1. Open DevTools, and open Sources Panel
2. Open index.js
3. Set a breakpoint in line 18 in the loop body
4. Reload the page
5. Inspect the Scope View and open the Module Scope
6. Open up the memory inspector for the
• buffer by clicking on the memory icon (or through the context menu of buffer by right clicking, then "Reveal in Memory Inspector panel")
• Uint8Array b2 by expanding to see the buffer, and select the memory icon (or through the context menu of b2
• Uint8Array b1 by expanding to see the buffer, and select the memory icon (or through the context menu of b1 (refocuses on the memory tab of the first buffer)
7. Step and see updates to buffers in the memory inspector