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
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.
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.
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.
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
Example: Inspecting a Array Buffer from Sources Tab
Javascript
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); |
HTML
<!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:
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.
Memory Inspector Tool in Microsoft Edge Browser
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.
Contact Us