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 DevTools

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 DevTools jetzt die native Quellzuordnung mithilfe dieser Informationen. Sie können also mit dem Debuggen von Wasm-Modulen beginnen, die mit einem dieser Compiler erstellt wurden, ohne auf das dekompilierte Format zurückgreifen oder benutzerdefinierte Scripts 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 eingefügt:

  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. 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
  • Typen für die Quelltextformatierung
  • 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 Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.