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 bisher eingeschränkten Unterstützung für das WebAssembly-Debugging in den 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

Zur Umgehung dieses Problems haben Emscripten und DevTools das vorhandene Format für Quellkarten vorübergehend an WebAssembly angepasst. Dadurch konnten Binäroffsets im kompilierten Modul den ursprünglichen Speicherorten in den Quelldateien zugeordnet werden.

Ein Screenshot des Debuggings mithilfe von Quellzuordnungen.

Quellkarten wurden jedoch für Textformate mit eindeutigen Zuordnungen zu JavaScript-Konzepten und ‑Werten entwickelt, nicht für Binärformate wie WebAssembly mit beliebigen Quellsprachen, Typsystemen und linearem Arbeitsspeicher. 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 müssen Sie Ihrem Compiler nur mitteilen, dass er Debug-Informationen einbeziehen soll, wie Sie es normalerweise auf anderen Plattformen tun würden. In Clang und Emscripten kann dies beispielsweise durch Übergeben eines -g-Flags während der Kompilierung erfolgen:

  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 jedoch noch viel zu tun. Auf der Tool-Seite unterstützen Emscripten (Binaryen) und Wasm-pack (wasm-bindgen) beispielsweise nicht die Aktualisierung von DWARF-Informationen zu noch durchgeführten Transformationen. Sie können diese Verknüpfung vorerst nicht nutzen.

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 Quellsprachen auswerten
  • ...und vieles mehr!

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

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen, Updates oder andere Aspekte der Entwicklertools zu besprechen.