Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory.

Use the newMemory inspectorto inspectArrayBuffer,TypedArray,andDataViewmemory in JavaScript as well asWebAssembly.Memoryof Wasm applications written in C++.

Open the Memory Inspector

There are a few ways to open theMemory inspector.

Open from the menu

1. Open DevTools.
2. ClickMore Options>More tools>Memory inspector.

Open during debugging

1. Open a page with JavaScriptArrayBuffer.We will be usingthis demo page.
2. Open DevTools.
3. Open thedemo-js.jsfile in theSourcespanel, set a breakpoint at line 18.
4. Refresh the page.
5. Expand theScopesection on the rightDebuggerpane.

6. You can open theMemory inspector:

   • From the icon.Clicking on the icon next to thebufferproperty, or
   • From the context menu.Right click on thebufferproperty and selectReveal in Memory Inspector panel.

   

Inspect multiple objects

1. You can inspectDataVieworTypedArrayas well. For example,b2is aTypedArray.To inspect that, right click on theb2property and selectReveal in Memory Inspector panel(No icon forTypedArrayorDataViewyet).
2. A new tab is opened in theMemory inspector.Please note that you can inspect multiple objects at once.

The Memory inspector

TheMemory inspectorconsists of 3 main areas:

Navigation bar

1. Theaddress inputshows the current byte address in hex format. You can input a new value to jump to a new location in the memory buffer. For example, try type0x00000008.
2. Memory buffers could be longer than a page. Instead of scrolling through, you can use theleftandrightbutton to navigate.
3. The buttons on the left allow aforward/backwardnavigation.
4. By default, the buffer is automatically updated on stepping. In the case it's not, therefreshbutton gives you the option to refresh the memory and update its contents.

Memory buffer

1. From the left, theaddressis displayed in hex format.
2. Thememoryis also shown in hex format, each byte separated by a space. The currently selected byte is highlighted. You can click on the byte or navigate with keyboard (left, right, up, down).
3. AnASCII representationof the memory is shown on the right side. A highlight shows the corresponding value to the selected bits on the byte. Similar to memory, you can click on the byte or navigate with keyboard (left, right, up, down).

Value inspector

1. A top toolbar features a button to switch betweenbig and little endianand to open thesettings.Open thesettingsto select which value types they want to see per default in the inspector.
2. The main area shows all thevalue interpretationsas per thesettings.By default, all are shown.
3. Theencodingis clickable. You can switch between dec, hex, oct for integer and sci, dec for floats.

Inspecting memory

Let's inspect the memory together.

1. Follow these steps tostartthe debugging.
2. Change the address to0x00000027in theaddress input.
3. Observe theASCII representationand thevalue interpretations.All values are empty at the moment.
4. Notice the blueJump to addressbutton next toPointer 32-bitandPointer 64-bit.You can click on it to jump to the address. The buttons are grayed out and not clickable if the addresses are not valid.
5. Click onResume script executionto step through the code.
6. Notice theASCII representationis now updated. All thevalue interpretationsare updated as well.
7. Let's customize theValue inspectorto show onlyfloating point.Click on thesettingsbutton and check onlyFloat 32-bitandFloat 64-bit.
8. Let's change the encoding fromdectosci.Notice the value representations are updated accordingly.
9. Try to navigate the memory buffer with your keyboard or using the navigation bar. Repeat step 4 to observe values changes.

WebAssembly memory inspection

TheWebAssembly.Memoryobject is anArrayBufferthat holds the raw bytes of object memory. TheMemory Inspectorpanel lets you inspect such objects in Wasm applications written in C++.

To take full advantage ofWebAssembly.Memoryinspection:

• Use Chrome 107 or later. Check your version atchrome://version/.
• Install theC/C++ DevTools Support (DWARF)extension. This is a plugin for debugging C/C++ WebAssembly applications using DWARF debug information.

To inspect theWebAssembly.Memoryof an object:

1. Open DevToolsonthis demo page.
2. In theSourcespanel, opendemo-cpp.ccandset a breakpointin themain()function at line 15:x[i] = n - i - 1;.
3. Reload the page to run the application. The debugger pauses at the breakpoint.
4. In theDebuggerpane, expandScope>Local.

5. Click theicon next to thex: int[10]array.

   Alternatively, right-click the array and selectReveal in Memory Inspector panel.

To stop highlighting object memory, in theMemory Inspectorpanel, hover over the object badge and click thexbutton.

To learn more, see:

• Extending the Memory Inspector for C/C++ debugging
• Debugging WebAssembly with modern tools.