Hintergrund
Bis vor Kurzem konnte in den Chrome-Entwicklertools nur WebAssembly-Debugging WebAssembly-Stacktraces und die einzelnen Anweisungen in einem nicht mehr zerlegtes WebAssembly-Textformat.
Dies funktioniert zwar mit jedem WebAssembly-Modul und hilft bei der Fehlerbehebung kleiner, isolierter Funktionen, ist jedoch für größere Apps, bei denen die Zuordnung zwischen dem entfernten Code und Ihren Quellen weniger offensichtlich ist, nicht sehr praktisch.
Eine vorübergehende 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.
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. Dies machte die Integration etwas komplizierter, begrenzt und außerhalb von Emscripten nicht weit verbreitet.
DWARF eingeben
Andererseits haben viele Muttersprachen bereits ein gemeinsames Debugging-Format, DWARF: Enthält alle erforderlichen Informationen, die Debugger zum Auflösen von Positionen, Variablennamen, Typlayouts usw. benötigen.
Es gibt zwar noch einige WebAssembly-spezifische Funktionen, die für eine vollständige Kompatibilität hinzugefügt werden müssen, aber Compiler wie Clang und Rust unterstützen bereits das Ausgeben von DWARF-Informationen in WebAssembly-Modulen, wodurch das DevTools-Team mit der Verwendung beginnen konnte direkt in den Entwicklertools.
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 du Cargo verwendest, sind die Informationen zur Fehlerbehebung standardmäßig enthalten:
cargo build --target wasm32-unknown-unknown
Diese neue DWARF-Integration der Entwicklertools bietet bereits Unterstützung für das Überschreiten des Codes, das Festlegen von Haltepunkten und das Auflösen von Stacktraces in Ihren Ausgangssprachen.
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. Derzeit profitieren sie nicht von dieser Integration.
Bei den Chrome-Entwicklertools werden wir die Integration im Laufe der Zeit weiterentwickeln, um eine reibungslose Fehlerbehebung 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.
Kontaktaufnahme mit dem Team für Chrome-Entwicklertools
Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.
- Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
- Problem mit den Entwicklertools über Weitere Optionen melden
> Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden. - Twittern Sie unter @ChromeDevTools.
- Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.