Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView und Wasm Memory.

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Mit dem Arbeitsspeicher-Prüftool können Sie den ArrayBuffer-, TypedArray- und DataView-Speicher in JavaScript sowie den WebAssembly.Memory von in C++ geschriebenen Wasm-Anwendungen prüfen.

Übersicht

Der Speicherprüfer organisiert Speicherinhalte und hilft Ihnen, sich schnell in großen Arrays zurechtzufinden. Sie können die ASCII-Werte des Arbeitsspeicherinhalts direkt neben den Bytes anzeigen und eine andere Endianness auswählen. Verwenden Sie den Speicherprüfer, während Sie Ihre Webanwendung debuggen, um einen effizienten Workflow zu ermöglichen.

Memory Inspector öffnen

Es gibt mehrere Möglichkeiten, den Speicherprüfer zu öffnen.

Über das Menü öffnen

  1. Öffnen Sie die Entwicklertools.
  2. Klicken Sie auf Weitere Optionen Mehr > Weitere Tools > Speicherprüftool. Menü „Memory Inspector“

Während des Debuggens öffnen

  1. Öffnen Sie eine Seite mit JavaScript ArrayBuffer. Wir verwenden diese Demoseite.
  2. Öffnen Sie die Entwicklertools.
  3. Öffnen Sie die Datei demo-js.js im Bereich Quellen und setzen Sie einen Haltepunkt in Zeile 18.
  4. Aktualisieren Sie die Seite.
  5. Maximieren Sie den Bereich Umfang im rechten Bereich Debugger.

  6. So öffnen Sie den Arbeitsspeicher-Prüftool:

    • Über das Symbol Klicken Sie auf das Symbol neben der Property buffer oder
    • Über das Kontextmenü Klicken Sie mit der rechten Maustaste auf die Eigenschaft buffer und wählen Sie Im Bereich „Memory Inspector“ anzeigen aus.

    Im Bereich „Arbeitsspeicher-Prüftool“ anzeigen

Mehrere Objekte prüfen

  1. Sie können auch DataView oder TypedArray prüfen. Beispiel: b2 ist ein TypedArray. Klicken Sie dazu mit der rechten Maustaste auf die Eigenschaft b2 und wählen Sie Im Bereich „Memory Inspector“ anzeigen aus. Für TypedArray oder DataView gibt es noch kein Symbol.
  2. Im Memory Inspector wird ein neuer Tab geöffnet. Sie können mehrere Objekte gleichzeitig prüfen. Neuer Tab im Memory Inspector

Arbeitsspeicher-Prüftool

Arbeitsspeicher-Prüftool

Der Arbeitsspeicher-Inspektor besteht aus drei Hauptbereichen:

Navigationsleiste

  1. In der Adresseingabe wird die aktuelle Byteadresse im Hexadezimalformat angezeigt. Sie können einen neuen Wert eingeben, um zu einer neuen Stelle im Speicherbuffer zu springen. Geben Sie beispielsweise 0x00000008 ein.
  2. Arbeitsspeicher-Puffer können länger als eine Seite sein. Anstatt zu scrollen, können Sie die Schaltflächen Links und Rechts verwenden, um sich zu bewegen.
  3. Mit den Schaltflächen auf der linken Seite können Sie vor- und zurück springen.
  4. Standardmäßig wird der Puffer beim Schritten automatisch aktualisiert. Falls nicht, können Sie mit der Schaltfläche Aktualisieren den Speicher aktualisieren und den Inhalt aktualisieren.

Arbeitsspeicherpuffer

Arbeitsspeicherpuffer

  1. Links wird die Adresse im Hexadezimalformat angezeigt.
  2. Der Arbeitsspeicher wird ebenfalls im Hexadezimalformat angezeigt, wobei jedes Byte durch ein Leerzeichen getrennt ist. Das derzeit ausgewählte Byte ist hervorgehoben. Sie können auf das Byte klicken oder mit der Tastatur (links, rechts, oben, unten) navigieren.
  3. Auf der rechten Seite wird eine ASCII-Darstellung des Arbeitsspeichers angezeigt. Ein Highlight zeigt den entsprechenden Wert der ausgewählten Bits im Byte an. Ähnlich wie beim Arbeitsspeicher können Sie auf das Byte klicken oder mit der Tastatur (links, rechts, oben, unten) navigieren.

Wertprüftool

Wertprüftool

  1. In der oberen Symbolleiste befindet sich eine Schaltfläche, mit der Sie zwischen Big- und Little-Endian wechseln und die Einstellungen öffnen können. Öffnen Sie die Einstellungen, um auszuwählen, welche Werttypen standardmäßig im Inspector angezeigt werden sollen. Symbolleistenschaltfläche
  2. Im Hauptbereich werden alle Wertinterpretationen gemäß den Einstellungen angezeigt. Standardmäßig werden alle angezeigt.
  3. Die Codierung ist anklickbar. Sie können zwischen dec, hex und oct für Ganzzahlen und sci und dec für Gleitkommazahlen wechseln. Codierungsschalter

Arbeitsspeicher prüfen

Sehen wir uns das gemeinsam an.

  1. Führen Sie die folgenden Schritte aus, um die Fehlerbehebung zu starten.
  2. Ändern Sie die Adresse in der Adresseingabe in 0x00000027. Adresseingabe
  3. Sehen Sie sich die ASCII-Darstellung und die Wertinterpretationen an. Alle Werte sind derzeit leer.
  4. Beachten Sie die blaue Schaltfläche Zur Adresse springen neben Pointer 32-bit und Pointer 64-bit. Sie können darauf klicken, um zur Adresse zu gelangen. Die Schaltflächen sind ausgegraut und nicht anklickbar, wenn die Adressen ungültig sind. Schaltfläche „Zur Adresse springen“
  5. Klicken Sie auf Skriptausführung fortsetzen, um den Code Schritt für Schritt durchzugehen. Skriptausführung fortsetzen
  6. Die ASCII-Darstellung wurde aktualisiert. Auch alle Wertinterpretationen werden aktualisiert. Alle Wertinterpretationen werden aktualisiert.
  7. Passen wir den Wertinspektor so an, dass nur Gleitkommawerte angezeigt werden. Klicken Sie auf die Schaltfläche Einstellungen und setzen Sie nur ein Häkchen bei Gleitkommazahl (32-Bit) und Gleitkommazahl (64-Bit). Einstellungen für die Anpassung des Wertprüfers
  8. Ändern wir die Codierung von dec in sci. Die Darstellung der Werte wird entsprechend aktualisiert. Ändern Sie die Codierung.
  9. Versuchen Sie, den Speicherpuffer mit der Tastatur oder über die Navigationsleiste zu durchsuchen. Wiederholen Sie Schritt 4, um die Werteänderungen zu beobachten.

WebAssembly-Speicherprüfung

Das WebAssembly.Memory-Objekt ist ein ArrayBuffer, das die Rohbytes des Objektspeichers enthält. Im Bereich Arbeitsspeicher-Prüftool können Sie solche Objekte in C++ geschriebenen Wasm-Anwendungen prüfen.

So nutzen Sie die WebAssembly.Memory-Prüfung optimal:

  • Verwenden Sie Chrome 107 oder höher. Prüfen Sie Ihre Version unter chrome://version/.
  • Installieren Sie die Erweiterung C/C++ DevTools Support (DWARF). Dies ist ein Plug-in zum Debuggen von C/C++-WebAssembly-Anwendungen mit DWARF-Debugging-Informationen.

So prüfen Sie den WebAssembly.Memory eines Objekts:

  1. Öffnen Sie die Entwicklertools auf dieser Demoseite.
  2. Öffnen Sie im Bereich Quellen demo-cpp.cc und setzen Sie in Zeile 15 in der Funktion main() einen Haltepunkt: x[i] = n - i - 1;.
  3. Laden Sie die Seite neu, um die Anwendung auszuführen. Der Debugger pausiert am Haltepunkt.
  4. Maximieren Sie im Bereich Debugger die Option Scope > Local.

  5. Klicken Sie auf das Symbol Im Arbeitsspeicher-Prüftool anzeigen neben dem Array x: int[10].

    Alternativ können Sie mit der rechten Maustaste auf das Array klicken und Im Bereich „Memory Inspector“ anzeigen auswählen.

Das Array „x“, das im Arbeitsspeicher-Prüftool geöffnet wurde.

Wenn Sie das Hervorheben des Objektspeichers beenden möchten, bewegen Sie den Mauszeiger im Bereich Arbeitsspeicher-Inspektion auf das Objektsymbol und klicken Sie auf die Schaltfläche x.

Objektspeicher nicht mehr hervorheben

Weitere Informationen erhalten Sie unter: