Freigeben über

Untersuchen eines JavaScript-Arraybuffers mithilfe des Speicherinspektors

  • Artikel

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

Mithilfe des Speicherinspektors können Sie die verschiedenen Typen von Speicherobjekten anzeigen, navigieren und die Typen auswählen, die zum Interpretieren der Werte verwendet werden sollen. Sie zeigt die ASCII-Werte direkt neben den Bytes an, und Sie können eine andere Endianität auswählen.

Bereich

Das Speicherprüfungstool bietet mehr Möglichkeiten als das Tool Quellen , das beim Debuggen überprüft ArrayBuffers werden kann. Die Ansicht Bereich im Tool Quellen zeigt eine Liste einzelner Werte innerhalb des Arraypuffers an, wodurch es schwierig wird, alle Daten anzuzeigen. Darüber hinaus erfordert die Navigation zu einem bestimmten Bereich innerhalb des Puffers einen Bildlauf zu einem bestimmten Index, 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.

Bereich

Ö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, indem Sie F12 oder STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS) drücken.

  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.

    Festlegen des Haltepunkts des Speicherinspektors in einer JavaScript-Datei

  6. Aktualisieren Sie die Webseite. Es kann nicht angezeigt werden, weil javaScript am Haltepunkt angehalten wird.

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

  8. In der buffer Zeile können Sie die Speicherprüfung mit einer der folgenden Methoden öffnen:

    • Klicken Sie am Ende buffer der Eigenschaftenzeile auf das Panelsymbol Im Speicherinspektorbereich anzeigen (Symbol im Bereich ") oder

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

    Öffnen des Speicherinspektors über das Kontextmenü der Puffereigenschaftszeile

    Der JavaScript ArrayBuffer wird im Arbeitsspeicherinspektor geöffnet.

    ArrayBuffer im Bereich

Überprüfen mehrerer Objekte

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

Während die Demowebseite am Haltepunkt angehalten wurde, ist das Objekt b2 in der Ansicht Bereich ein TypedArray. Klicken Sie mit der rechten Maustaste auf das b2 Objekt, und wählen Sie Im Bereich "Speicherprüfung anzeigen" aus.

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

Zwei ArrayBuffer-Registerkarten, die im Bereich

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

Navigationsleiste des Bereichs

Im Textfeld Adresse eingeben wird die aktuelle Byteadresse im Hexady-Format angezeigt. Sie können den Wert ändern, um zu einem neuen Speicherort 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 durch Vorherige Seite (<) bzw . Nächste Seite (>) zu navigieren. Wenn nur eine Seite mit Speicherpufferdaten vorhanden ist, gelangen Sie mit den Pfeilen zum Anfang und Ende der Seite.

Verwenden Sie die linksseitigen Verlaufspfeile, um im Adressverlauf (Zurück im Adressverlauf) und im Adressverlauf vorwärts (im Adressverlauf vorwärts) zu Zurück.

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

Speicherpuffer

Bereich

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

Der Speicher wird auch im hexadächten Format 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 mit den Pfeiltasten (links, rechts, nach oben und nach 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 mit den Pfeiltasten (links, rechts, nach oben und unten) navigieren.

Wertinspektor

Bereich

Klicken Sie auf den aktuellen Endian-Typ, um zwischen Big Endian und Little Endian zu wechseln.

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

Klicken Sie auf Werttypeinstellungen umschalten (Einstellungen für Werttyp umschalten), um auszuwählen, welche Werttypen im Inspektor angezeigt werden sollen. Dies wird zur neuen Standardwerttypeinstellung.

Werttypeinstellungen

Sie können die Codierungsansicht mithilfe der Dropdownliste ändern. Für ganze Zahlen können Sie zwischen dezimal dec, hexadezimal hexund oktal octwählen. Für Floats können Sie zwischen Dezimalschreibweise dec und wissenschaftlicher Schreibweise sciwählen.

Überprüfen des Arbeitsspeichers

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

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

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

    Änderung der Speicherprüfungsadresse

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

    Die ASCII-Darstellung und die Wertinterpretation werden aktualisiert.

    Speicherinspektor-Adresswerte aktualisiert

  4. Klicken Sie bei Bedarf auf die Schaltfläche Zur Adresse springen (Schaltfläche Zu Adresse springen) für Zeiger 32-Bit oder Zeiger 64-Bit , um zur nächsten aktiven Speicheradresse zu springen. Wenn die nächste Speicheradresse nicht verfügbar ist, wird die Schaltfläche (Adress außerhalb des Speicherbereichs) mit der QuickInfo Adresse außerhalb des Speicherbereichs deaktiviert.

  5. Passen Sie den Wertinspektor so an , dass nur Gleitkommawerte angezeigt werden. Klicken Sie auf Werttypeinstellungen umschalten (Einstellungen für Werttyp grau umschalten), und deaktivieren Sie alle Kontrollkästchen mit Ausnahme der beiden Gleitkommawerte .

    Werttypeinstellungen float

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

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

    Aktualisierte Ansicht der Adresswerte des Speicherinspektors

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

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

WebAssembly-Speicherüberprüfung

Für die WebAssembly-Speicherüberprüfung (Wasm) ähnelt der Prozess der Überprüfung des JavaScript-Arbeitsspeichers.

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

  2. Öffnen Sie DevTools, indem Sie F12 oder STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS) drücken.

  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, den Hexadezimalwert 0x03c.

  5. Aktualisieren Sie die Seite.

  6. Erweitern Sie im Debuggerbereich unter Bereich das Modul.

    Festlegen des Haltepunkts der Speicherprüfung in der Wasm-Datei

  7. Klicken Sie am Ende $imports.memory der Eigenschaftenzeile auf das Panelsymbol Im Speicherinspektorbereich anzeigen (Symbol im Bereich ").

    Der Wasm ArrayBuffer wird im Arbeitsspeicherinspektor geöffnet.

    Speicherinspektorbereich Wasm

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Kim-Anh Tran (Chrome DevTools) geschrieben.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.