Déboguer WebAssembly C/C++

Sofia Emelianova

WebAssembly permet d'exécuter, par exemple, du code C/C++ sur le Web à une vitesse presque native et parallèlement à JavaScript. Ce document explique comment configurer et utiliser les outils pour les développeurs Chrome afin de mieux déboguer ce type d'applications.

Une fois les outils de développement configurés, vous pouvez:

• Inspectez le code d'origine dans Sources > Éditeur :
• Suspendez l'exécution avec des points d'arrêt de ligne de code et parcourez votre code source C/C++ d'origine, et non le fichier binaire .wasm compilé.

Lorsque la fonctionnalité est en pause, vous pouvez effectuer les actions suivantes:

• Pointez sur les variables dans le fichier source d'origine et consultez leurs valeurs.
• Comprenez les noms de fonction dans la Pile d'appel et les variables dans le Champ d'application.
• Générer des propriétés profondément imbriquées et des objets complexes dans la console
• Inspectez la mémoire de l'objet avec l'outil d'inspection de mémoire.

Configurer

Pour activer le débogage C/C++ WebAssembly dans les outils de développement:

1. Compilez votre application en incluant les informations de débogage DWARF. Exécutez le compilateur Emscripten le plus récent et transmettez-lui l'indicateur -g. Exemple :

   emcc -g source.cc -o app.html
   

   Pour en savoir plus, consultez Compiler des projets contenant des informations de débogage.

2. Installez l'extension Chrome C/C++ DevTools Support (DWARF).

Déboguer

Une fois les outils de développement configurés, déboguez votre code:

1. Ouvrez les outils de développement pour inspecter votre site Web. Pour ce tutoriel, vous pouvez l'essayer sur cette page de démonstration, compilée avec l'indicateur -g requis.
2. Si vous le souhaitez, regroupez les fichiers que vous avez créés pour faciliter la navigation. Dans Sources, cochez > Page > > Grouper par créé/déployé .
3. Sélectionnez le fichier source d'origine dans l'arborescence de fichiers. Dans ce cas, mandelbrot.cc.

4. Pour définir un point d'arrêt dans la ligne de code, cliquez sur un numéro de ligne dans la colonne à gauche de l'Éditeur (à la ligne 38, par exemple).

   

5. Exécutez à nouveau le code. L'exécution s'interrompt avant la ligne contenant le point d'arrêt.

Lorsque la fonctionnalité est en pause, procédez comme suit:

• Dans Sources > Éditeur : pointez sur une variable pour afficher sa valeur dans une info-bulle.

• Dans Sources > Call Stack (Pile d'appel) : affichez les noms des fonctions tels qu'ils figurent dans la source.

• Dans Sources > Portée : consultez les variables locales et globales, leur type et leurs valeurs.

• Dans Console, les variables de sortie et les objets auxquels il est difficile d'accéder dans Champ d'application:

  • Variables profondément imbriquées, telles que des éléments indexés dans de grands tableaux
  • Objets complexes, y compris ceux auxquels vous pouvez accéder à l'aide de pointeurs (->). Développez-les pour les examiner.

• Dans Sources > Champ d'application : cliquez sur l'icône pour ouvrir l'outil d'inspection de la mémoire et inspecter les octets bruts de la mémoire de l'objet. Pour en savoir plus, consultez la section Inspection de la mémoire WebAssembly.

Performances du profil

Lorsque les outils de développement sont configurés et ouverts, le code exécuté par Chrome n'est pas optimisé. Il est classé pour vous offrir une meilleure expérience de débogage.

Dans ce cas, vous ne pouvez pas compter sur console.time() et performance.now() dans votre code pour profiler les performances. Utilisez plutôt le panneau Performances pour procéder au profilage.

Vous pouvez également exécuter votre code de profilage sans ouvrir les outils de développement, puis l'ouvrir pour inspecter les messages dans la console.

Séparer les informations de débogage

Pour accélérer le chargement tout en améliorant l'expérience de débogage, vous pouvez scinder les informations de débogage dans un fichier .wasm distinct. Pour en savoir plus, consultez la section Déboguer WebAssembly plus rapidement.

Vous pouvez conserver ce fichier localement ou l'héberger sur un serveur distinct. Pour effectuer cette opération avec Emscripten, transmettez l'option -gseparate-dwarf=<filename> et spécifiez le chemin d'accès au fichier:

emcc -g source.cc -o app.html \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]

Compiler et déboguer sur différentes machines

Si vous compilez sur une machine dont le système d'exploitation (conteneur, VM ou serveur distant) est différent de celui de la machine sur laquelle vous exécutez Chrome, vous devrez peut-être mapper manuellement les chemins d'accès aux fichiers de débogage.

Par exemple, si votre projet se trouve localement sur C:\src\project, mais qu'il a été créé dans un conteneur Docker avec le chemin d'accès /mnt/c/src/project, procédez comme suit:

1. Accédez à chrome://extensions/, recherchez l'extension C/C++ DevTools Support (DWARF), puis cliquez sur Details (Détails) > Options d'extension.
2. Indiquez l'ancien et le nouveau chemin d'accès aux fichiers.

En savoir plus

Pour en savoir plus sur le débogage WebAssembly, consultez le blog des ingénieurs Chrome DevTools:

• Déboguer WebAssembly avec des outils modernes
• Déboguer WebAssembly plus rapidement
• Présentation de l'outil d'inspection de mémoire
• Étendre l'outil d'inspection de mémoire pour le débogage C/C++