Gebruik de Memory Inspector om ArrayBuffer , TypedArray en DataView geheugen in JavaScript en WebAssembly.Memory van Wasm-applicaties geschreven in C++ te inspecteren.
Overzicht
De Geheugeninspecteur organiseert de geheugeninhoud en helpt u snel door grote arrays te navigeren. U kunt de ASCII-waarden van de geheugeninhoud direct naast de bytes bekijken en verschillende endianness selecteren. Gebruik de Geheugeninspecteur terwijl u fouten in uw web-app opspoort voor een efficiënte workflow.
Open de Geheugeninspecteur
Er zijn een paar manieren om de Geheugeninspecteur te openen.
Openen vanuit het menu
- Open DevTools .
- Klik op Meer opties
> Meer hulpmiddelen > Geheugeninspecteur . 
Openen tijdens foutopsporing
- Open een pagina met JavaScript
ArrayBuffer. We zullen deze demopagina gebruiken. - Open DevTools .
- Open het bestand demo-js.js in het paneel Bronnen en stel een breekpunt in op regel 18.
- Vernieuw de pagina.
- Vouw de sectie Bereik in het rechter foutopsporingsvenster uit.
U kunt de Geheugeninspecteur openen:
- Van het pictogram . Klik op het pictogram naast de
buffer, of - Vanuit het contextmenu . Klik met de rechtermuisknop op de
bufferen selecteer Reveal in Memory Inspector-paneel .
- Van het pictogram . Klik op het pictogram naast de
Inspecteer meerdere objecten
- U kunt DataView of TypedArray ook inspecteren.
b2is bijvoorbeeld eenTypedArray. Om dat te inspecteren, klikt u met de rechtermuisknop op de eigenschapb2en selecteert u Reveal in het paneel Memory Inspector (nog geen pictogram voorTypedArrayofDataView). - Er wordt een nieuw tabblad geopend in de Geheugeninspecteur . Houd er rekening mee dat u meerdere objecten tegelijk kunt inspecteren.
De geheugeninspecteur
De Geheugeninspecteur bestaat uit drie hoofdgebieden:
Navigatiebalk
- De adresinvoer toont het huidige byteadres in hex-formaat. U kunt een nieuwe waarde invoeren om naar een nieuwe locatie in de geheugenbuffer te springen. Probeer bijvoorbeeld
0x00000008te typen. - Geheugenbuffers kunnen langer zijn dan een pagina. In plaats van er doorheen te scrollen, kunt u met de linker- en rechterknop navigeren.
- Met de knoppen aan de linkerkant kunt u vooruit/achteruit navigeren.
- Standaard wordt de buffer automatisch bijgewerkt bij het stappen. Als dit niet het geval is, biedt de knop Vernieuwen u de mogelijkheid om het geheugen te vernieuwen en de inhoud ervan bij te werken.
Geheugenbuffer
- Vanaf de linkerkant wordt het adres weergegeven in hexadecimaal formaat.
- Het geheugen wordt ook weergegeven in hex-formaat, waarbij elke byte wordt gescheiden door een spatie. De momenteel geselecteerde byte wordt gemarkeerd. U kunt op de byte klikken of navigeren met het toetsenbord (links, rechts, omhoog, omlaag).
- Aan de rechterkant wordt een ASCII-weergave van het geheugen weergegeven. Een markering toont de overeenkomstige waarde voor de geselecteerde bits op de byte. Net als bij het geheugen kunt u op de byte klikken of navigeren met het toetsenbord (links, rechts, omhoog, omlaag).
Waarde-inspecteur
- Een bovenste werkbalk bevat een knop om te schakelen tussen big en little endian en om de instellingen te openen. Open de instellingen om te selecteren welke waardetypen ze standaard in de inspecteur willen zien.
- Het hoofdgebied toont alle waarde-interpretaties volgens de instellingen . Standaard worden ze allemaal weergegeven.
- De codering is klikbaar. U kunt schakelen tussen dec, hex, oct voor geheel getal en sci, dec voor floats.
Geheugen inspecteren
Laten we samen het geheugen inspecteren.
- Volg deze stappen om het foutopsporingsproces te starten .
- Wijzig het adres in
0x00000027in de adresinvoer .
- Let op de ASCII-weergave en de waarde-interpretaties . Alle waarden zijn momenteel leeg.
- Let op de blauwe knop Ga naar adres naast
Pointer 32-bitenPointer 64-bit. U kunt erop klikken om naar het adres te springen. De knoppen zijn grijs en kunnen niet worden aangeklikt als de adressen niet geldig zijn.
- Klik op Scriptuitvoering hervatten om door de code te lopen.
- Merk op dat de ASCII-weergave nu is bijgewerkt. Alle waarde-interpretaties worden ook bijgewerkt.
- Laten we het infovenster Waarde aanpassen zodat alleen drijvende komma wordt weergegeven. Klik op de knop Instellingen en vink alleen Float 32-bit en Float 64-bit aan.
- Laten we de codering wijzigen van
decnaarsci. Merk op dat de waardeweergaven dienovereenkomstig worden bijgewerkt.
- Probeer met uw toetsenbord of via de navigatiebalk door de geheugenbuffer te navigeren. Herhaal stap 4 om waardenveranderingen waar te nemen.
WebAssembly-geheugeninspectie
Het WebAssembly.Memory object is een ArrayBuffer die de onbewerkte bytes van het objectgeheugen bevat. Met het paneel Memory Inspector kunt u dergelijke objecten inspecteren in Wasm-toepassingen die zijn geschreven in C++.
Om optimaal te profiteren van WebAssembly.Memory -inspectie:
- Gebruik Chrome 107 of hoger. Controleer uw versie op
chrome://version/. - Installeer de C/C++ DevTools Support (DWARF) -extensie. Dit is een plug-in voor het debuggen van C/C++ WebAssembly-applicaties met behulp van DWARF-foutopsporingsinformatie.
Om de WebAssembly.Memory van een object te inspecteren:
- Open DevTools op deze demopagina .
- Open
demo-cpp.ccin het paneel Bronnen en stel een breekpunt in de functiemain()in op regel 15:x[i] = n - i - 1;. - Laad de pagina opnieuw om de toepassing uit te voeren. De debugger pauzeert bij het breekpunt.
- Vouw in het foutopsporingsvenster Bereik > Lokaal uit.
Klik op de
pictogram naast de x: int[10]array.U kunt ook met de rechtermuisknop op de array klikken en Reveal in Memory Inspector-paneel selecteren.
Om te stoppen met het markeren van het objectgeheugen, beweegt u in het deelvenster Geheugeninspectie over de objectbadge en klikt u op de knop x .
Voor meer informatie, zie: