Geheugeninspecteur: Inspecteer ArrayBuffer, TypedArray, DataView en Wasm-geheugen.

Jecelyn Yeen

Sofia Emelianova

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

1. Open DevTools .
2. Klik op Meer opties > Meer hulpmiddelen > Geheugeninspecteur .

Openen tijdens foutopsporing

1. Open een pagina met JavaScript ArrayBuffer . We zullen deze demopagina gebruiken.
2. Open DevTools .
3. Open het bestand demo-js.js in het paneel Bronnen en stel een breekpunt in op regel 18.
4. Vernieuw de pagina.
5. Vouw de sectie Bereik in het rechter foutopsporingsvenster uit.

6. 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 buffer en selecteer Reveal in Memory Inspector-paneel .

   

Inspecteer meerdere objecten

1. U kunt DataView of TypedArray ook inspecteren. b2 is bijvoorbeeld een TypedArray . Om dat te inspecteren, klikt u met de rechtermuisknop op de eigenschap b2 en selecteert u Reveal in het paneel Memory Inspector (nog geen pictogram voor TypedArray of DataView ).
2. 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

1. 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 0x00000008 te typen.
2. Geheugenbuffers kunnen langer zijn dan een pagina. In plaats van er doorheen te scrollen, kunt u met de linker- en rechterknop navigeren.
3. Met de knoppen aan de linkerkant kunt u vooruit/achteruit navigeren.
4. 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

1. Vanaf de linkerkant wordt het adres weergegeven in hexadecimaal formaat.
2. 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).
3. 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

1. 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.
2. Het hoofdgebied toont alle waarde-interpretaties volgens de instellingen . Standaard worden ze allemaal weergegeven.
3. 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.

1. Volg deze stappen om het foutopsporingsproces te starten .
2. Wijzig het adres in 0x00000027 in de adresinvoer .
3. Let op de ASCII-weergave en de waarde-interpretaties . Alle waarden zijn momenteel leeg.
4. Let op de blauwe knop Ga naar adres naast Pointer 32-bit en Pointer 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.
5. Klik op Scriptuitvoering hervatten om door de code te lopen.
6. Merk op dat de ASCII-weergave nu is bijgewerkt. Alle waarde-interpretaties worden ook bijgewerkt.
7. 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.
8. Laten we de codering wijzigen van dec naar sci . Merk op dat de waardeweergaven dienovereenkomstig worden bijgewerkt.
9. 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:

1. Open DevTools op deze demopagina .
2. Open demo-cpp.cc in het paneel Bronnen en stel een breekpunt in de functie main() in op regel 15: x[i] = n - i - 1; .
3. Laad de pagina opnieuw om de toepassing uit te voeren. De debugger pauzeert bij het breekpunt.
4. Vouw in het foutopsporingsvenster Bereik > Lokaal uit.

5. 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:

• Uitbreiding van de Memory Inspector voor foutopsporing in C/C++
• Debuggen van WebAssembly met moderne tools .