Hintergrund
Bis vor Kurzem bestand das einzige WebAssembly-Debugging, das von den Chrome-Entwicklertools unterstützt wurde, darin, unbearbeitete WebAssembly-Stacktraces anzusehen und einzelne Anweisungen in einem disassemblierten WebAssembly-Textformat zu übergehen.
Dies funktioniert zwar mit jedem WebAssembly-Modul und hilft beim Debugging kleiner, isolierter Funktionen. Bei größeren Apps ist die Zuordnung jedoch weniger offensichtlich.
Eine vorübergehende Problemumgehung
Um dieses Problem zu umgehen, haben Emscripten und Entwicklertools das bestehende Quellkartenformat vorübergehend auf WebAssembly umgestellt. Dies ermöglichte Zuordnungen zwischen binären Offsets im kompilierten Modul zu ursprünglichen Speicherorten in den Quelldateien.
Source Mappings 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 Arbeitsspeicher. Dies machte die Integration kompliziert, eingeschränkt und wurde außerhalb von Emscripten nicht weitreichend unterstützt.
DWARF betreten
Andererseits haben viele Muttersprachen bereits ein gemeinsames Debugging-Format, DWARF, das alle erforderlichen Informationen für Debugger bereitstellt, um Orte, Variablennamen, Typlayouts usw. aufzulösen.
Es gibt zwar noch einige WebAssembly-spezifische Funktionen, die für volle Kompatibilität hinzugefügt werden müssen, Compiler wie Clang und Rust unterstützen jedoch bereits die Ausgabe von DWARF-Informationen in WebAssembly-Modulen, sodass das DevTools-Team sie direkt in den Entwicklertools verwenden konnte.
Im ersten Schritt unterstützen die Entwicklertools jetzt native Source Mapping mit diesen Informationen. So kannst du mit der Fehlerbehebung von Wasm-Modulen beginnen, die von einem dieser Compiler erstellt wurden, ohne das zerlegte Format zu verwenden oder benutzerdefinierte Scripts zu verwenden.
Stattdessen müssen Sie Ihrem Compiler einfach Informationen zur Fehlerbehebung senden, wie Sie es bei anderen Plattformen tun würden. In Clang und Emscripten kann dies beispielsweise erfolgen, 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, sind die Informationen zur Fehlerbehebung standardmäßig enthalten:
cargo build --target wasm32-unknown-unknown
Diese neue Einbindung der Entwicklertools in DWARF deckt bereits die Unterstützung für das Übergehen des Codes, Festlegen von Haltepunkten und Auflösen von Stacktraces in Ihren Ausgangssprachen ab.
Die Zukunft
Es gibt jedoch noch viel zu tun.
Beispielsweise unterstützen Emscripten (Binaryen) und wasm-pack (wasm-bindgen) die Aktualisierung von DWARF-Informationen zu den von ihnen ausgeführten Transformationen nicht. Vorerst werden sie von dieser Integration nicht profitieren.
Für die Chrome-Entwicklertools werden wir die Integration im Laufe der Zeit weiterentwickeln, um eine nahtlose Fehlerbehebung zu ermöglichen. Dazu gehören:
- Variablennamen auflösen
- Quelltextformatierungstypen
- Ausdrücke in Ausgangssprachen auswerten
- ...und vieles mehr!
Aber schau gerne wieder rein, vielleicht gibt es dann Neuigkeiten.
Vorschaukanäle herunterladen
Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.
Chrome-Entwicklertools-Team kontaktieren
Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.
- Sende uns über crbug.com Vorschläge oder Feedback.
- Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen
> Hilfe > Probleme mit den Entwicklertools melden. - Senden Sie einen Tweet an @ChromeDevTools.
- Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.