Memory Inspector Hands-On 1

Inspect ArrayBuffers in JavaScript

Learn how to inspect and monitor ArrayBuffers using Chrome DevTools.

Instructions

1. Open Chrome DevTools (F12 or right-click > Inspect)
2. Navigate to the Sources Panel
3. Find and open the index.js file
4. Set a breakpoint by clicking on line 18 inside the loop
5. Refresh the page to trigger the breakpoint
6. In the Scope View (right panel), expand the Module Scope section
7. Open the Memory Inspector for each of these variables:
   • buffer: Click the memory icon next to it (or right-click > "Reveal in Memory Inspector panel")
   • b2: Expand the Uint8Array, locate its buffer, and click the memory icon
   • b1: Expand the Uint8Array, locate its buffer, and click the memory icon
8. Use the Step button (F10) to advance through the code and watch the buffer values update in real-time