Contexte
Jusqu'à récemment, le seul débogage WebAssembly pris en charge par Chrome DevTools consistait à afficher les traces de la pile WebAssembly brutes et à passer des instructions individuelles dans un format de texte WebAssembly désassemblé.
Bien que cela fonctionne avec n'importe quel module WebAssembly et qu'il facilite le débogage de petites fonctions isolées, il 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é le format de cartes sources existant à WebAssembly. Cela a permis de mapper les décalages binaires du module compilé avec 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 des formats binaires tels que WebAssembly avec des langages sources arbitraires, des systèmes de types et une mémoire linéaire. Cela a rendu l'intégration difficile, limitée et peu prise en charge en dehors d'Embscripten.
Entrer DWARF
D'autre part, de nombreux langages natifs disposent déjà d'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 des fonctionnalités spécifiques à WebAssembly doivent encore être ajoutées pour assurer une compatibilité totale, des 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 d'outils de développement de commencer à les utiliser directement dans les outils de développement.
Tout d'abord, les outils de développement prennent désormais en charge le mappage de source native à l'aide de ces informations. Vous pouvez donc commencer à déboguer les modules Wasm produits par ces compilateurs sans avoir à utiliser le format désassemblé ni à utiliser de scripts personnalisés.
Il vous suffit de demander à votre compilateur d'inclure les informations de débogage, comme vous le feriez 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 couvre déjà le passage du code, la définition des points d'arrêt et la résolution des traces de la pile dans vos langages sources.
L'avenir
Il y a cependant encore un peu de travail à faire.
Par exemple, du côté des outils, Emscripten (Binaryen) et wasm-pack (wasm-bindgen) ne sont pas encore compatibles avec la mise à jour des informations DWARF sur les transformations qu'elles effectuent. Pour le moment, ils ne peuvent pas bénéficier de cette intégration.
Du côté des outils pour les développeurs Chrome, nous allons davantage faire évoluer leur intégration au fil du temps afin d'offrir 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 langages sources
- ...et bien plus !
Surveillez les prochaines mises à jour !
Télécharger les canaux de prévisualisation
Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.
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 toute autre question concernant les outils de développement.
- Envoyez-nous une suggestion ou des commentaires via crbug.com.
- Signalez un problème dans les outils de développement via Plus d'options
> Aide > Signaler un problème dans les outils de développement dans les Outils de développement. - Envoyez un tweet à @ChromeDevTools.
- Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.