C/C++ WebAssembly debuggen

Sofia Emelianova

WebAssembly bietet die Möglichkeit, beispielsweise C-/C++-Code im Web mit nahezu nativer Geschwindigkeit und neben JavaScript auszuführen. In diesem Dokument erfahren Sie, wie Sie die Chrome-Entwicklertools einrichten und verwenden, um Fehler in solchen Anwendungen zu verbessern.

Nachdem du die Entwicklertools eingerichtet hast, kannst du:

• Überprüfen Sie den ursprünglichen Code unter Quellen > Bearbeiter:
• Halten Sie die Ausführung mit Code-Haltepunkten an und gehen Sie Ihren ursprünglichen C/C++-Quellcode durch, nicht die kompilierte Binärdatei .wasm.

Während die Pausierung pausiert ist, kannst du Folgendes tun:

• Bewegen Sie den Mauszeiger auf die Variablen in der ursprünglichen Quelldatei, um ihre Werte zu sehen.
• Funktionsnamen im Aufrufstack und Variablen im Bereich verstehen
• Geben Sie tief verschachtelte Eigenschaften und komplexe Objekte an die Console aus.
• Prüfen Sie den Objektspeicher mit dem Memory Inspector.

Einrichten

So aktivieren Sie das C/C++ WebAssembly-Debugging in den Entwicklertools:

1. Kompilieren Sie Ihre Anwendung mit DWARF-Fehlerbehebungsinformationen. Führen Sie den neuesten Emscripten-Compiler aus und übergeben Sie das Flag -g. Beispiel:

   emcc -g source.cc -o app.html
   

   Weitere Informationen finden Sie unter Projekte mit Debug-Informationen erstellen.

2. Installieren Sie die Chrome-Erweiterung für C/C++ DevTools Support (DWARF).

Fehlerbehebung

Wenn die Entwicklertools eingerichtet sind, kannst du Fehler in deinem Code beheben:

1. Öffnen Sie die Entwicklertools, um Ihre Website zu überprüfen. Sie können das Tutorial auf dieser Demoseite ausprobieren, die mit dem erforderlichen -g-Flag kompiliert wurde.
2. Optional können Sie die von Ihnen erstellten Dateien zur einfacheren Navigation gruppieren. Klicken Sie unter Quellen das Kästchen an. Seite > > Gruppieren nach erstellt/bereitgestellt .
3. Wählen Sie Ihre ursprüngliche Quelldatei aus der Dateistruktur aus. In diesem Fall ist das mandelbrot.cc.

4. Wenn Sie einen Haltepunkt für eine Codezeile festlegen möchten, klicken Sie in der Spalte links neben dem Editor auf eine Zeilennummer, z. B. in Zeile 38.

   

5. Führen Sie den Code noch einmal aus. Die Ausführung wird vor der Zeile mit dem Haltepunkt angehalten.

Versuchen Sie Folgendes, während Sie das Video pausiert haben:

• Gehen Sie unter Quellen > Editor: Bewegen Sie den Mauszeiger auf eine Variable, um ihren Wert in einer Kurzinfo zu sehen.

• Gehen Sie unter Quellen > Aufrufstack: Sehen Sie sich die Funktionsnamen so an, wie sie in der Quelle vorhanden sind.

• Gehen Sie unter Quellen > Umfang: Hier sehen Sie lokale und globale Variablen sowie ihre Typen und Werte.

• Ausgabevariablen und -objekte in Console, die im Umfang nur schwer zugänglich sind:

  • Tief verschachtelte Variablen, z. B. indexierte Elemente in großen Arrays
  • Komplexe Objekte, einschließlich der Objekte, auf die Sie mit Cursorn zugreifen können (->). Maximieren Sie sie, um sie zu prüfen.

• Gehen Sie unter Quellen > Bereich: Klicken Sie auf das Symbol , um den Memory Inspector zu öffnen und die Rohbyte des Objektspeichers zu überprüfen. Weitere Informationen finden Sie unter WebAssembly-Arbeitsspeicherinspektion.

Profilleistung

Wenn die Entwicklertools eingerichtet und geöffnet sind, ist der von Chrome ausgeführte Code nicht optimiert. Sie ist gestaffelt, damit Sie Fehler leichter beheben können.

In diesem Fall können Sie sich in Ihrem Code nicht auf console.time() und performance.now() verlassen, um ein Leistungsprofil zu erstellen. Verwenden Sie stattdessen den Bereich Leistung, um ein Profil zu erstellen.

Alternativ können Sie Ihren Profilerstellungscode ausführen, ohne die Entwicklertools zu öffnen, und ihn dann öffnen, um die Nachrichten in der Console zu prüfen.

Debug-Informationen trennen

Um den Ladevorgang zu beschleunigen und die Fehlerbehebung dennoch zu vereinfachen, kannst du die Informationen zur Fehlerbehebung in eine separate .wasm-Datei aufteilen. Weitere Informationen finden Sie unter Schnelleres Debugging in WebAssembly.

Sie können diese Datei entweder lokal speichern oder auf einem separaten Server hosten. Um dies mit Emscripten zu tun, übergeben Sie das Flag -gseparate-dwarf=<filename> und geben Sie den Pfad zur Datei an:

emcc -g source.cc -o app.html \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]

Auf verschiedenen Computern Builds erstellen und Fehler beheben

Wenn Sie auf einem Computer mit einem anderen Betriebssystem (Container, VM oder Remote-Server) arbeiten als auf dem Computer, auf dem Sie Chrome ausführen, müssen Sie die Pfade der Fehlerbehebungsdateien möglicherweise manuell zuordnen.

Wenn sich Ihr Projekt beispielsweise lokal unter C:\src\project befindet, aber in einem Docker-Container mit dem Pfad /mnt/c/src/project erstellt wurde, gehen Sie so vor:

1. Gehen Sie zu chrome://extensions/, suchen Sie nach der Erweiterung C/C++ DevTools Support (DWARF) und klicken Sie auf Details > Erweiterungsoptionen.
2. Geben Sie den alten und den neuen Dateipfad an.

Weitere Informationen

Weitere Informationen zum WebAssembly-Debugging finden Sie im Chrome DevTools Engineering-Blog:

• WebAssembly mit modernen Tools debuggen
• Schnellere Fehlerbehebung in WebAssembly
• Der Memory Inspector
• Memory Inspector für C/C++-Debugging erweitern