Contexte
Jusqu'à récemment, le seul débogage WebAssembly pris en charge par les outils pour les développeurs Chrome était d'afficher les traces de pile WebAssembly brutes et le fait de passer des instructions individuelles dans format de texte WebAssembly désassemblé.
Bien que cette méthode fonctionne avec n'importe quel module WebAssembly et facilite le débogage de petites fonctions isolées, elle n'est pas très pratique pour les applications plus volumineuses où le mappage entre le code désassemblé et vos sources est moins évident.
Solution temporaire
Pour contourner ce problème, Emscripten et les outils de développement ont temporairement adapté source maps au format WebAssembly. Cette action a autorisé les mappages entre les décalages binaires du module compilé et les emplacements d’origine dans les fichiers sources.
Toutefois, les mappages sources ont été conçus pour des formats de texte avec des mappages clairs avec les concepts et les valeurs JavaScript, et non pour les formats binaires tels que WebAssembly avec des langages sources, des systèmes de types et une mémoire linéaire arbitraires. L'intégration était donc complexe, limitée et peu compatible en dehors d'Emscripten.
Saisir DWARF
D'autre part, de nombreuses langues natives ont déjà un format de débogage commun, DWARF, qui fournit toutes les informations nécessaires aux débogueurs pour résoudre les emplacements, les noms de variables, les mises en page de type, etc.
Bien que certaines fonctionnalités spécifiques à WebAssembly doivent encore être ajoutées pour une compatibilité totale, les compilateurs tels que Clang et Rust prennent déjà en charge l'émission d'informations DWARF dans les modules WebAssembly, ce qui a permis à l'équipe des outils de développement de commencer à l'utiliser. directement dans les outils de développement.
Dans un premier temps, les outils de développement prennent en charge le mappage de sources natives utilisant ces informations. Vous pouvez ainsi commencer à déboguer les modules Wasm produits par l'un de ces compilateurs sans avoir à utiliser le format désassemblé ni à utiliser de scripts personnalisés.
Il vous suffit de demander à votre compilateur d'inclure des informations de débogage comme vous le feriez normalement sur d'autres plates-formes. Par exemple, dans Clang et Emscripten, vous pouvez le faire en transmettant un indicateur -g lors de la compilation:
clang -g …sources… -target wasm32 -o out.wasm
emcc -g …sources… -o out.js
Vous pouvez utiliser le même indicateur -g dans Rust:
rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm
Si vous utilisez Cargo, les informations de débogage sont incluses par défaut:
cargo build --target wasm32-unknown-unknown
Cette nouvelle intégration des outils de développement à DWARF permet déjà de superposer le code, de définir des points d'arrêt et de résoudre les traces de pile dans vos langages sources.
L'avenir
Il reste cependant beaucoup de travail à faire.
Par exemple, en ce qui concerne les outils, Emscripten (Binaryen) et Wasm-pack (wasm-bindgen) ne permettent pas encore de mettre à jour les informations DWARF sur les transformations effectuées. Pour l'instant, ils ne bénéficieront pas de cette intégration.
En ce qui concerne les outils pour les développeurs Chrome, nous ferons évoluer davantage l'intégration au fil du temps afin de garantir une expérience de débogage fluide. Par exemple:
- Résoudre les noms de variables
- Types d'impression élégante
- Évaluer des expressions dans les langues sources
- ... et bien plus !
Surveillez les prochaines mises à jour !
Télécharger les canaux de prévisualisation
Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de détecter les problèmes sur votre site avant vos utilisateurs.
Contacter l'équipe des outils pour les développeurs Chrome
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.
- Envoyez-nous une suggestion ou un commentaire via crbug.com.
- Signalez un problème lié aux outils de développement en cliquant sur Autres options
> Aide > Signalez un problème dans les outils de développement. - Tweetez à l'adresse @ChromeDevTools.
- Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.