C/C++ WebAssembly debuggen

Sofia Emelianova

Mit WebAssembly kann zum Beispiel C-/C++-Code im Web neben JavaScript mit nahezu nativer Geschwindigkeit ausgeführt werden. In diesem Dokument erfahren Sie, wie Sie die Chrome-Entwicklertools einrichten und verwenden, um die Fehlerbehebung solcher Anwendungen zu verbessern.

Nachdem Sie die Entwicklertools eingerichtet haben, können Sie:

• Überprüfen Sie den ursprünglichen Code unter Quellen > Editor.
• Pausieren Sie die Ausführung mit Haltepunkten in einer Codezeile und gehen Sie den ursprünglichen C/C++-Quellcode vor, nicht die kompilierte Binärdatei .wasm.

Im pausierten Modus haben Sie außerdem folgende Möglichkeiten:

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

Einrichten

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

1. Kompilieren Sie Ihre Anwendung mit den enthaltenen Informationen zur DWARF-Fehlerbehebung. 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 Informationen zur Fehlerbehebung erstellen.

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

Debuggen

Wenn die Entwicklertools eingerichtet sind, können Sie Fehler in Ihrem Code beheben:

1. Öffne die Entwicklertools, um deine Website zu prüfen. Sie können die Anleitung auf dieser Demoseite ausprobieren, die mit dem erforderlichen Flag -g kompiliert wurde.
2. Sie können die von Ihnen erstellten Dateien auch gruppieren, um die Navigation zu erleichtern. Klicken Sie unter Sources (Quellen) auf > Page > > Group by Authored/Bereited .
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 die Codezeile festlegen möchten, klicken Sie auf eine Zeilennummer in der Spalte links neben dem Editor, z. B. in Zeile 38.

   

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

Versuchen Sie bei der Pausierung Folgendes:

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

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

• Unter Quellen > Bereich sehen Sie lokale und globale Variablen, ihre Typen und Werte.

• Geben Sie in der Konsole Ausgabevariablen und -objekte an, die unter Zugriffsbereich schwierig zu navigieren sind:

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

• Klicken Sie unter 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-Arbeitsspeicherinspektion.

Profilleistung

Wenn die Entwicklertools eingerichtet und geöffnet sind, wird der Code, den Chrome ausführt, nicht optimiert. Sie ist gestaffelt, um Ihnen eine bessere Fehlerbehebung zu bieten.

In diesem Fall können Sie sich beim Erstellen eines Leistungsprofils nicht auf console.time() und performance.now() in Ihrem Code verlassen. Nutzen 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 gleichzeitig die Fehlerbehebung zu verbessern, kannst du die Informationen zur Fehlerbehebung in einer separaten .wasm-Datei aufteilen. Weitere Informationen finden Sie unter Debugging WebAssembly Faster.

Sie können diese Datei entweder lokal speichern oder auf einem separaten Server hosten. Wenn Sie dies mit Emscripten tun möchten, ü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 die App auf einem Computer mit einem anderen Betriebssystem (Container, VM oder Remote-Server) als auf dem Computer erstellen, auf dem Sie Chrome ausführen, müssen Sie die Pfade der Fehlerbehebungsdatei 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 zum WebAssembly-Debugging finden Sie im Chrome DevTools Engineering-Blog:

• Fehler in WebAssembly mit modernen Tools beheben
• Schnelleres Debugging in WebAssembly
• Einführung in den Memory Inspector
• Memory Inspector für C/C++-Debugging erweitern