![Jecelyn Yeen](https://web.dev/images/authors/jecelynyeen.jpg) Jecelyn Yeen [X](https://twitter.com/jecfish) [GitHub](https://github.com/jecfish) [Bluesky](https://bsky.app/profile/jec.fish) [Homepage](https://jec.fish/) ![Sofia Emelianova](https://web.dev/images/authors/sofiayem.jpg) Sofia Emelianova [GitHub](https://github.com/sofiayem)
> [!NOTE] > **Note:** The Memory Inspector panel is available from Chrome 91. You can check your version at `chrome://version/`. Use the **Memory inspector** to inspect `ArrayBuffer`, `TypedArray`, and `DataView` memory in JavaScript as well as `WebAssembly.Memory` of Wasm applications written in C++. ## Overview The **Memory inspector** organizes memory content and helps you navigate large arrays quickly. You can view the ASCII values of memory content directly next to the bytes, and select different endianness. Use the **Memory inspector** while you debug your web app for an efficient workflow. ## Open the Memory Inspector There are a few ways to open the **Memory inspector**. ### Open from the menu 1. [Open DevTools](https://developer.chrome.com/docs/devtools/open.md.txt). 2. Click **More Options** ![More](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/more-0d3265891c0d3.png) \> **More tools** \> **Memory inspector** . ![Memory inspector menu](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/memory-inspector-menu-59bf7cfcb0055.png) ### Open during debugging 1. Open a page with JavaScript `ArrayBuffer`. We will be using [this demo page](https://chrome.dev/devtools-memory-inspector/). 2. [Open DevTools](https://developer.chrome.com/docs/devtools/open.md.txt). 3. Open the **demo-js.js** file in the **Sources** panel, set a breakpoint at line 18. 4. Refresh the page. 5. Expand the **Scope** section on the right **Debugger** pane. 6. You can open the **Memory inspector**: - **From the icon** . Clicking on the icon next to the `buffer` property, or - **From the context menu** . Right-click on the `buffer` property and select **Reveal in Memory Inspector panel**. ![Reveal in Memory Inspector panel](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/reveal-memory-inspector-c768cdcb79abf.png) ### Inspect multiple objects 1. You can inspect [DataView](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView) or [TypedArray](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) as well. For example, `b2` is a `TypedArray`. To inspect that, right click on the `b2` property and select **Reveal in Memory Inspector panel** (No icon for `TypedArray` or `DataView` yet). 2. A new tab is opened in the **Memory inspector** . Please note that you can inspect multiple objects at once. ![New tab in the Memory inspector](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/new-tab-the-memory-inspe-a4d6eda41779c.png) ## The Memory inspector ![The Memory inspector](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/the-memory-inspector-70f7e3e68c1c9.jpg) The **Memory inspector** consists of 3 main areas: ### Navigation bar ![Navigation bar](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/navigation-bar-7c8f5070b8dac.jpg) 1. The **address input** shows 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 type `0x00000008`. 2. Memory buffers could be longer than a page. Instead of scrolling through, you can use the **left** and **right** button to navigate. 3. The buttons on the left allow a **forward/backward** navigation. 4. By default, the buffer is automatically updated on stepping. In the case it's not, the **refresh** button gives you the option to refresh the memory and update its contents. ### Memory buffer ![Memory buffer](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/memory-buffer-a7d31525c1a55.jpg) 1. From the left, the **address** is displayed in hex format. 2. The **memory** is 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. An **ASCII representation** of 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 ![Value inspector](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/value-inspector-5c0c254c78f07.jpg) 1. A top toolbar features a button to switch between **big and little endian** and to open the **settings** . Open the **settings** to select which value types they want to see per default in the inspector. ![toolbar button](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/toolbar-button-54ea370aa3da2.png) 2. The main area shows all the **value interpretations** as per the **settings**. By default, all are shown. 3. The **encoding** is clickable. You can switch between dec, hex, oct for integer and sci, dec for floats. ![Encoding switch](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/encoding-switch-f6cf904c7c193.png) ## Inspecting memory Let's inspect the memory together. 1. Follow these steps to [start](https://developer.chrome.com/docs/devtools/memory-inspector.md.txt#open-debug) the debugging. 2. Change the address to `0x00000027` in the **address input** . ![address input](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/address-input-418b7229e3036.png) 3. Observe the **ASCII representation** and the **value interpretations**. All values are empty at the moment. 4. Notice the blue **Jump to address** button next to `Pointer 32-bit` and `Pointer 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. ![Jump to address button](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/jump-address-button-d67529b88b035.png) 5. Click on **Resume script execution** to step through the code. ![Resume script execution](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/resume-script-execution-335bab3a6b807.png) 6. Notice the **ASCII representation** is now updated. All the **value interpretations** are updated as well. ![All value interpretations are updated](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/all-value-interpretations-7031b3861113f.png) 7. Let's customize the **Value inspector** to show only **floating point** . Click on the **settings** button and check only **Float 32-bit** and **Float 64-bit** . ![settings to customize value inspector](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/settings-customize-value-b0cab734b0874.png) 8. Let's change the encoding from `dec` to `sci`. Notice the value representations are updated accordingly. ![Change the encoding.](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/change-encoding-6485e8149b9a6.png) 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 The `WebAssembly.Memory` object is an `ArrayBuffer` that holds the raw bytes of object memory. The **Memory Inspector** panel lets you inspect such objects in Wasm applications written in C++. To take full advantage of `WebAssembly.Memory` inspection: - Use Chrome 107 or later. Check your version at `chrome://version/`. - Install the [C/C++ DevTools Support (DWARF)](https://chrome.google.com/webstore/detail/cc%20%20-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb) extension. This is a plugin for debugging C/C++ WebAssembly applications using DWARF debug information. To inspect the `WebAssembly.Memory` of an object: 1. [Open DevTools](https://developer.chrome.com/docs/devtools/open.md.txt) on [this demo page](https://chrome.dev/devtools-memory-inspector/demo-cpp.html). 2. In the **Sources** panel, open `demo-cpp.cc` and [set a breakpoint](https://developer.chrome.com/docs/devtools/javascript/breakpoints.md.txt#loc) in the `main()` 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 the **Debugger** pane, expand **Scope** \> **Local**. 5. Click the ![Reveal in Memory Inspector.](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/reveal-memory-inspector-c77ee60001d05.png) icon next to the `x: int[10]` array. Alternatively, right-click the array and select **Reveal in Memory Inspector panel**. ![The x array opened in Memory Inspector.](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/the-x-array-opened-memor-0d0231bd45de.png) > [!NOTE] > **Note:** Starting from Chrome version 107, the **Memory Inspector** highlights all the bytes of a C/C++ memory object. This lets you tell them apart from the surrounding memory. To stop highlighting object memory, in the **Memory Inspector** panel, hover over the object badge and click the `x` button. ![Stop highlighting object memory.](https://developer.chrome.com/static/docs/devtools/memory-inspector/image/stop-highlighting-object-3b446e810ccbd.png) To learn more, see: - [Extending the Memory Inspector for C/C++ debugging](https://developer.chrome.com/blog/memory-inspector-extended-cpp.md.txt) - [Debugging WebAssembly with modern tools](https://developer.chrome.com/blog/wasm-debugging-2020.md.txt).