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 > Editor.
• Sie können die Ausführung mit Codezeilen-Haltepunkten pausieren und den ursprünglichen C/C++-Quellcode durchgehen, nicht die kompilierte .wasm-Binärdatei.

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

• Bewegen Sie den Mauszeiger auf Variablen in der ursprünglichen Quelldatei, um ihre Werte zu sehen.
• Informationen zu Funktionsnamen im Aufrufstack und zu Variablen im Umfang
• Tief verschachtelte Properties und komplexe Objekte in der Console ausgeben
• 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 aktuellen Emscripten-Compiler aus und übergeben Sie ihm 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 prüfen. In dieser Anleitung können Sie es auf dieser Demoseite ausprobieren, die mit dem erforderlichen Flag -g kompiliert wurde.
2. Optional können Sie die von Ihnen erstellten Dateien zur einfacheren Navigation gruppieren. Klicken Sie unter Quellen auf > 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 die Wiedergabe pausiert ist:

• Bewegen Sie den Mauszeiger unter Quellen > Editor auf eine Variable, um den Wert in einer Kurzinfo aufzurufen.

• Unter Quellen > Aufrufstack sehen Sie die Funktionsnamen, wie sie in der Quelle sind.

• Unter Quellen > Umfang können Sie lokale und globale Variablen, ihre Typen und Werte aufrufen.

• 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 solcher, auf die Sie mit einem Verweis (->) zugreifen können. Maximieren Sie sie, um sie zu untersuchen.

• Klicken Sie unter Sources > Scope (Quellen > Bereich) auf das Symbol , um den Memory Inspector zu öffnen und die Rohbyte des Objektspeichers zu überprüfen. Weitere Informationen finden Sie unter WebAssembly-Speicherprüfung.

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 Profiling-Code ausführen, ohne die Entwicklertools zu öffnen, und sie dann öffnen, um die Nachrichten in der Konsole zu prüfen.

Debug-Informationen trennen

Wenn Sie das Laden beschleunigen und gleichzeitig die Fehlerbehebung verbessern möchten, können Sie die Debug-Informationen 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. Wenn Sie Emscripten verwenden möchten, geben Sie das Flag -gseparate-dwarf=<filename> und 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]

Builds auf verschiedenen Computern erstellen und Fehler beheben

Wenn Sie auf einer Maschine 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 die 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 zur WebAssembly-Fehlerbehebung finden Sie im Chrome DevTools-Engineering-Blog:

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