Überprüfen eines JavaScript-ArrayBuffers mithilfe des Speicherinspektors

Verwenden Sie die Speicherprüfung , um die folgenden Objekttypen anzuzeigen und mit ihnen zu interagieren:

• ArrayBuffer
• Typedarray
• DataView
• WebAssembly (Wasm)-Speicher

Mithilfe von Memory Inspector können Sie die verschiedenen Typen von Speicherobjekten anzeigen, navigieren und die Typen auswählen, die zum Interpretieren der Werte verwendet werden sollen. Es zeigt die ASCII-Werte direkt neben den Bytes an und ermöglicht die Auswahl unterschiedlicher Endianitäten.

Das Speicherprüfungstool bietet eine größere Möglichkeit als das Quellentool , das beim Debuggen überprüft ArrayBuffers werden kann. In der Bereichsansicht im Tool "Quellen" wird eine Liste einzelner Werte innerhalb des Arraypuffers angezeigt, wodurch es schwierig wird, alle Daten zu sehen. Darüber hinaus müssen Sie beim Navigieren zu einem bestimmten Bereich innerhalb des Puffers zu einem bestimmten Index scrollen, und die Werte werden immer als einzelnes Byte angezeigt, auch wenn Sie sie in einem anderen Format anzeigen möchten, z. B. 32-Bit-Ganzzahlen.

Öffnen des Speicherinspektors beim Debuggen

1. Starten Sie Microsoft Edge.

2. Öffnen Sie die Testwebsite Inspect ArrayBuffers in JS (Memory in JS).

3. Öffnen Sie DevTools durch Drücken F12 oderShift``I+Ctrl+ (Windows, Linux) oderI Command+Option+(macOS).

4. Klicken Sie auf "Quellen ", und öffnen Sie die demo-js.js Datei.

5. Legen Sie einen Haltepunkt in Zeile 18 fest, wie in der folgenden Abbildung dargestellt.

   

6. Aktualisieren Sie die Webseite. Es wird nicht angezeigt, da javaScript am Haltepunkt angehalten wird.

7. Suchen Sie im rechten Debuggerbereich unter "Bereich" die buffer Zeile.

8. In der Zeile können Sie memory buffer Inspector mit einer der folgenden Methoden öffnen:

   • Klicken Sie auf das Symbol " Im Speicherinspektor anzeigen" ( am Ende der buffer Eigenschaftenzeile, oder

   • Aus dem Kontextmenü. Klicken Sie mit der rechten Maustaste auf die buffer Eigenschaft, und wählen Sie im Bereich "Speicherprüfung" die Option "Einblenden" aus.

   

   Der JavaScript ArrayBuffer wird im Memory Inspector geöffnet.

   

Überprüfen mehrerer Objekte

Sie können mehrere Objekte gleichzeitig untersuchen, z. B. DataView und TypedArray.

Wenn die Demowebseite am Haltepunkt angehalten wurde, ist das Objekt b2 in der Bereichsansicht ein TypedArray. Klicken Sie mit der rechten Maustaste auf das b2 Objekt, und wählen Sie im Bereich "Speicherprüfung" die Option "Einblenden" aus.

Neben der b2 ersten Registerkarte wird eine neue Registerkarte für das Objekt geöffnet, die das buffer Objekt im Speicherinspektor darstellt.

Navigieren im Speicherinspektor

Der Bereich "Speicherprüfung" enthält drei Arten von Inhalten:

• Navigationsleiste
• Speicherpuffer
• Wertinspektor

Navigationsleiste

Das Textfeld "Adresse eingeben " zeigt die aktuelle Byteadresse im Hexadezimalformat an. Sie können den Wert ändern, um zu einer neuen Position im Speicherpuffer zu springen. Klicken Sie in das Textfeld, und ändern Sie den Wert in 0x00000008. Der Speicherpuffer springt sofort zu dieser Byteadresse.

Speicherpuffer können länger als eine Seite sein. Verwenden Sie die Nach-links- und nach-rechts-Schaltflächen, um zur vorherigen Seite (<) bzw. zur nächsten Seite (>) zu navigieren. Wenn nur eine Seite mit Speicherpufferdaten vorhanden ist, gelangen Sie mit den Pfeilen an den Anfang und das Ende der Seite.

Verwenden Sie die Pfeile für die linksextremen Verlaufsinformationen, um im Adressverlauf Zurück () und im Adressverlauf vorwärts ( vorwärts).

Wenn der Speicherpuffer beim Durchlaufen von Werten nicht automatisch aktualisiert wird, klicken Sie auf "Aktualisieren" ().

Speicherpuffer

Wenn sie von der linken Seite des Bereichs aus gelesen wird, wird die Adresse im Hexadezimalformat angezeigt. Die aktuell ausgewählte Adresse ist fett formatiert.

Der Speicher wird auch im Hexadezimalformat angezeigt, wobei jedes Byte durch ein Leerzeichen getrennt ist. Das aktuell ausgewählte Byte ist hervorgehoben. Sie können auf ein beliebiges Byte klicken oder mithilfe der Pfeiltasten (links, rechts, oben und unten) navigieren.

Die ASCII-Darstellung des Speichers wird auf der rechten Seite des Panels angezeigt. Das hervorgehobene Zeichen entspricht dem ausgewählten Byte. Sie können auf ein beliebiges Zeichen klicken oder mithilfe der Pfeiltasten (links, rechts, oben und unten) navigieren.

Wertinspektor

Klicken Sie auf den aktuellen Endiantyp, um zwischen big endian und Little endian zu wechseln.

Der Hauptbereich zeigt jeden Wert und jede Interpretation basierend auf den Einstellungen an. Standardmäßig werden alle Werte angezeigt.

Klicken Sie auf " Werttypeinstellungen umschalten " ( für den Umschaltwerttyp), um auszuwählen, welche Werttypen im Inspektor angezeigt werden sollen. Dies wird die neue Einstellung für den Standardwerttyp.

Sie können die Codierungsansicht mithilfe der Dropdownliste ändern. Für ganze Zahlen können Sie aus dezimalen dec, hexadezimalen hexund oktalen octZahlen wählen. Für Floats können Sie zwischen Dezimalnotation dec und wissenschaftlicher Schreibweise sciwählen.

Überprüfen des Arbeitsspeichers

Führen Sie die folgenden Schritte aus, um eine Webseite im Memory Inspector zu debuggen.

1. Ändern Sie in der Navigationsleiste die Adresse in 0x00000027.

2. Zeigen Sie die ASCII-Darstellung und die Wertinterpretationen an. Alle Werte sollten null oder leer sein.

   

3. Klicken Sie auf "Skriptausführung fortsetzen " ( fortsetzen), oder drücken Sie F8 oder STRG+\ , um den Code zu durchlaufen.

   Die ASCII-Darstellung und die Wertinterpretationen werden aktualisiert.

   

4. Klicken Sie bei Bedarf auf die Schaltfläche " Zu Adresse springen " (Zu Adresse springen") für zeigerbasierte 32-Bit- oder Zeiger-64-Bit-Version , um zur nächsten aktiven Speicheradresse zu springen. Wenn die nächste Speicheradresse nicht verfügbar ist, wird die Schaltfläche deaktiviert (), wobei die QuickInfo-Adresse nicht genügend Arbeitsspeicher hat.

5. Passen Sie den Wertinspektor so an, dass nur Gleitkommawerte angezeigt werden. Klicken Sie auf " Werttypeinstellungen umschalten " ( ein/aus), und deaktivieren Sie alle Kontrollkästchen mit Ausnahme der beiden Gleitkommawerte .

   

6. Klicken Sie auf "Werttypeinstellungen umschalten " (), um die Einstellungen für den Werttyp zu schließen.

7. Verwenden Sie die Dropdownmenüs, um die Codierung von dec in zu sciändern. Die Wertdarstellungen werden aktualisiert.

   

8. Erkunden Sie den Speicherpuffer mithilfe der Tastatur oder Navigationsleiste.

9. Wiederholen Sie die Schritte 3 und 4 , um Wertänderungen zu beobachten.

WebAssembly-Speicherüberprüfung

Bei der WebAssembly -Speicherüberprüfung (Wasm) ähnelt der Vorgang der Überprüfung des JavaScript-Speichers.

1. Öffnen Sie die Wasm-Testwebsite Inspect Wasm Memories (Memory in Wasm).

2. Öffnen Sie DevTools durch Drücken F12 oderShift``I+Ctrl+ (Windows, Linux) oderI Command+Option+(macOS).

3. Klicken Sie auf "Quellen ", und öffnen Sie die memory-write.wasm Datei.

4. Legen Sie einen Haltepunkt in der ersten Zeile der Schleife fest, hexadezimaler Wert 0x03c.

5. Aktualisieren Sie die Seite.

6. Erweitern Sie im Debuggerbereich unter "Bereich" das Modul.

   

7. Klicken Sie am Ende $imports.memory der Eigenschaftenzeile auf das Symbol "Im Speicherinspektor anzeigen" ( "Im Speicherprüfungsbereich einblenden").

   Der Wasm ArrayBuffer wird im Memory Inspector geöffnet.

   

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die Originalseite befindet sich hier und wurde von Kim-Anh Tran (Chrome DevTools) verfasst.

Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.