The Memory Inspector Tool is used to view Array Buffer and also provide the ASCII representation of the data present in the memory. Typed Array. In the tool the developer inspect different types of memory objects and check if correct values are present in correct memory location.
Overview of Memory Inspector Tool
The tool is used to monitor the memory buffer of JS objects. It provides a view of the memory location which when clicked displayed the value of the memory location along with values of different type such as integer, float, pointer values and with different numeric base which can be decimal, octal or hexadecimal. The tool also provides the respective ASCII value of the memory location which is helpful to deal with ASCII characters in memory buffer.
Features of Memory Inspector Tool
The various features of Memory Inspector Tool are:
- Jump to memory location: Using this tool you can check any memory location using the enter address option only if the buffer size permits. This helps to check a specific memory location for fast viewing or debugging purposes.
- Jump to nearest location: If you are in a memory location and there is no active memory location after that then you have an option to jump to the nearest memory location which helps a lot by saving time in search for active memory location.
- Tabbed: For inspecting different buffers you will have different tab that you can drag and arrange accordingly this is very useful to work on multiple buffers at the same time.
Benefits of Memory Inspector Tool
The various benefits of using the Memory Inspector Tool are:
- Easy to check: You can easily view and check for the memory location of different memory objects that you use in JS or WebAssembly. The tools provides easy to use UI for navigating the memory location.
- Different values type: You can select the endianness of the values and its type. This helps you to check the memory location values in different types such as Integer 8-bit and Integer 16-bit and in different base such as octal and hexadecimal.
- ASCII representation: The data in each byte of memory is also displayed in ASCII values which can help developers to confirm that correct text values are present in the memory location as expected.
When to use Memory Inspector Tool?
The various reasons to use this tool are:
- Debugging buffer: You can view and check for problems about the object memory values and make changes to your source code accordingly. The tool provides a very good view of the memory for inspection.
- Inspecting different memory objects: You can inspect array buffer, typed array, data view and WebAssembly memory using this tool. The tool provides access to the addresses of buffer size and cannot be used to access other memory locations.
- Checking ASCII values: The buffer values may represent ASCII values so the values stored in buffer are unsigned integer this values ASCII representation is also displayed in the tool.
How to open Memory Inspector Tool in Edge
The tool is present in DevTools and you can open DevTools by pressing F12 or “Ctrl+Shift+I” or right-clicking in the webpage and then pressing inspect from the context menu that appears. In DevTools there are multiple ways to open the tool which are:
- Using Add button: At the end of the main toolbar or the drawer toolbar you will find a add button. Click that add button and select the Memory Inspector from the list of tools that pops up.
- Using More tools: In the top-right corner of DevTools click the three dots. Then navigate to More Tools > Memory Inspector from the menu that appears.
- Using Run Command: Press the shortcut key “Ctrl+Shift+P” or select Run Command for the menu in the three dots button which is present in the top-right corner of DevTools. The Run Command search menu will appear in that type memory and the select Show Memory Inspector form the list of options that appear.
Opening Memory Inspector Tool in Various Ways
Understanding the UI of Memory Inspector Tool
The UI of the Memory Inspector Tool in divide into 3 sections.
- Opened Buffer Tabs
- Memory Buffer Section
- Values Section
UI of Memory Inspector Tool
Opened Buffer Tabs
All the opened Array Buffer have its own tab in the Memory Inspector Tool. You can close these tab by using the cross button present in each tab or rearrange these tab by dragging to the place you want.
Opened Tabs
Memory Buffer Section
The section provides the respective memory locations used by the buffer. On the left you have all the respective address that follow after the last value which is present in the middle section immediate left of the ASCII section. The ASCII values are representation of the actual value in memory.
The top part contain all buttons of this section. Left move from left to right and understand each button.
- Go back in address history: Use this to view the previous selected address according to the address history.
- Go forward in address history: Use this to view the next selected address according to the address history.
- Previous page: If the addresses are in large amount they are displayed in pages. This less-than option takes you to the previous page of addresses.
- Enter address: Any selected address is displayed in this option and you can also enter custom values of address in hexadecimal.
- Next page: If the addresses are in large amount they are displayed in pages. This greater-than option takes you to the next page of addresses.
- Refresh: To update the memory buffer view after any changes press this button.
Memory Buffer Section
Values Section
The section displays various types of values regarding the selected memory address. These values are different size of Integer, Float and Pointer and by default expressed in Little Endian. The drop down option present along with the value type label is used to change the numeric base of the values that is displayed and the possible numeric base are dec (decimal), hex (hexadecimal) and oct (octal).
The arrow button at it end of pointer values jumps to the next active memory address but if it’s greyed out then there is no next active memory address.
Values Section
Customizing the view:
You can change the Endianness from Little Endian to Big Endian and toggle the type of values to be displayed using the gear icon
Changing Endianness and Toggling Values
Example: Inspecting a Array Buffer from Sources Tab
const buffer = new Int16Array(50);
const copyBuffer = new Int16Array(10);
const str = 'A example for memory inspector';
for (var i = 0; i < 50; i++) {
buffer[i] = str.charCodeAt(i);
copyBuffer[i] = buffer[i];
} console.log(buffer); |
<!DOCTYPE html> <html lang="en">
<head>
<title>Example</title>
<script src="./app.js"></script>
</head>
<body>
<h1>This is an example for Memory Inspector tool</h1>
</body>
</html>
|
Output:
Opening a Array Buffer in Memory Inspect tab from Sources tab
Explanation: You can view a array buffer in Memory Inspector tab from the Sources Tab by adding a breakpoint and then selecting the “Reveal in Memory Inspector panel” button under the Scope section. If the webpage using JS then add breakpoint in the file which name ends with “.js” but in web assembly site add breakpoint in file which name ends with “.wasm”. Always refresh the page after adding breakpoint.
Conclusion
When developers need to check on the memory buffer they can use this tool. The tool provides a good view of the memory and also these values are represented in ASCII representation. You can compare and check different values data type and also change the endianness of the value.