Déboguer WebAssembly C/C++

Sofia Emelianova

WebAssembly permet, par exemple, d'exécuter du code C/C++ sur le Web à une vitesse quasi native et en plus de 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 que vous avez configuré les outils de développement, vous pouvez:

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

Lorsque la lecture est en pause, vous pouvez effectuer les opérations suivantes:

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

Configuration

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

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

   emcc -g source.cc -o app.html
   

   Pour en savoir plus, consultez Compiler des projets avec 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 suivre ce tutoriel, vous pouvez l'essayer sur cette page de démonstration, qui a été compilée avec l'indicateur -g requis.
2. Si vous le souhaitez, vous pouvez regrouper 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 de ligne de code, cliquez sur un numéro de ligne dans la colonne à gauche de l'éditeur, par exemple à la ligne 38.

   

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

Pendant la mise 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 des appels), affichez les noms des fonctions tels qu'ils apparaissent dans la source.

• Dans Sources > Portée, vous pouvez afficher les variables locales et globales, leur type et leur valeur.

• Dans la console, les variables de sortie et les objets auxquels il est difficile d'accéder dans le champ d'application sont:

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

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

Performances du profil

Lorsque les outils de développement sont configurés et ouverts, le code exécuté dans Chrome n'est pas optimisé. Il est hiérarchisé 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 profitant d'une meilleure expérience de débogage, vous pouvez séparer 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 ce faire 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]

Créer 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 l'ordinateur sur lequel vous exécutez Chrome, vous devrez peut-être mapper manuellement les chemins des fichiers de débogage.

Par exemple, si votre projet se trouve sur C:\src\project en local, 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 > Extension options (Détails > Options d'extension).
2. Spécifiez l'ancien et le nouveau chemin d'accès aux fichiers.

En savoir plus

Consultez le blog des outils pour les développeurs Chrome pour en savoir plus sur le débogage de WebAssembly:

• 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++