Verbessertes WebAssembly-Debugging in den Chrome-Entwicklertools

Ingvar Stepanyan
Ingvar Stepanyan

Hintergrund

Bis vor Kurzem war das einzige WebAssembly-Debugging, das von Chrome DevTools unterstützt wurde, das Ansehen von Roh-WebAssembly-Stack-Traces und das Überspringen einzelner Anweisungen in einem dekompilierten WebAssembly-Textformat.

Screenshot der zuvor eingeschränkten Unterstützung für das WebAssembly-Debugging in Chrome-Entwicklertools

Dies funktioniert zwar mit jedem WebAssembly-Modul und hilft beim Debuggen kleiner, isolierter Funktionen, ist aber für größere Apps nicht sehr praktisch, da die Zuordnung zwischen dem dekompilierten Code und Ihren Quellen weniger offensichtlich ist.

Temporäre Problemumgehung

Um dieses Problem zu umgehen, haben Emscripten und DevTools die Source Maps für WebAssembly bereit. Dies erlaubte Zuordnungen zwischen binären Offsets im kompilierten Modul zu den ursprünglichen Speicherorten in den Quelldateien.

Ein Screenshot des Debuggings mithilfe von Quellzuordnungen.

Source Maps wurden jedoch für Textformate mit klaren Zuordnungen zu JavaScript-Konzepten und -Werten entwickelt, nicht für Binärformate wie WebAssembly mit beliebigen Quellsprachen, Typsystemen und einem linearen Speicher. Das machte die Integration hackig, eingeschränkt und außerhalb von Emscripten nicht weithin unterstützt.

DWARF eingeben

Viele native Sprachen haben jedoch bereits ein gemeinsames Debugging-Format, DWARF, das alle erforderlichen Informationen für Debugger zum Auflösen von Speicherorten, Variablennamen, Typlayouts usw. enthält.

Für die vollständige Kompatibilität müssen noch einige WebAssembly-spezifische Funktionen hinzugefügt werden. Compiler wie Clang und Rust unterstützen jedoch bereits das Ausgeben von DWARF-Informationen in WebAssembly-Modulen. Das DevTools-Team konnte es daher direkt in DevTools verwenden.

Als ersten Schritt unterstützt die Entwicklertools jetzt native Source Mapping mit diesen Informationen, sodass Sie mit der Fehlerbehebung für Wasm-Module beginnen können, die von diesen Compilern erstellt wurden, ohne auf das disassemblierte Format zurückzugreifen oder benutzerdefinierte Skripts verwenden zu müssen.

Stattdessen musst du deinen Compiler einfach wie auf anderen Plattformen anweisen, Informationen zur Fehlerbehebung einzubinden. In Clang und Emscripten kann dies beispielsweise erreicht werden, indem während der Kompilierung das Flag -g übergeben wird:

  clang -g …sources… -target wasm32 -o out.wasm

  emcc -g …sources… -o out.js

Sie können dasselbe -g-Flag in Rust verwenden:

  rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm

Wenn Sie Cargo verwenden, werden die Debug-Informationen standardmäßig eingeschlossen:

  cargo build --target wasm32-unknown-unknown

Diese neue DevTools-Integration mit DWARF unterstützt bereits das Überspringen von Code, das Setzen von Haltepunkten und das Auflösen von Stack-Traces in Ihren Quellsprachen.

Screenshot der neuen DWARF-basierten Fehlerbehebung

Die Zukunft

Es gibt aber noch viel zu tun. Beispielsweise unterstützen Emscripten (Binaryen) und wasm-pack (wasm-bindgen) das Aktualisieren von DWARF-Informationen zu durchgeführten Transformationen noch nicht. Derzeit profitieren sie nicht von dieser Integration.

Und bei den Chrome-Entwicklertools werden wir die Integration im Laufe der Zeit weiter verbessern, um ein nahtloses Debugging zu ermöglichen. Dazu gehören:

  • Variablennamen auflösen
  • Quelltextformatierungen
  • Ausdrücke in den Ausgangssprachen auswerten
  • ...und vieles mehr!

Aber schau gerne wieder rein, vielleicht gibt es dann Neuigkeiten.

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über die neuen Funktionen und Änderungen im Beitrag oder über andere Themen im Zusammenhang mit den Entwicklertools diskutieren.