Outil d'inspection de mémoire: inspectez ArrayBuffer, TypedArray, DataView et la mémoire Wasm.

Jecelyn Yeen

Sofia Emelianova

Utilisez l'outil d'inspection de la mémoire pour inspecter la mémoire ArrayBuffer, TypedArray et DataView en JavaScript, ainsi que la WebAssembly.Memory des applications Wasm écrites en C++.

Présentation

L'inspecteur de mémoire organise le contenu de la mémoire et vous aide à naviguer rapidement dans de grandes matrices. Vous pouvez afficher les valeurs ASCII du contenu de la mémoire directement à côté des octets et sélectionner un autre ordre de bytes. Utilisez l'inspecteur de mémoire lorsque vous déboguez votre application Web pour un workflow efficace.

Ouvrir l'outil d'inspection de la mémoire

Il existe plusieurs façons d'ouvrir l'outil d'inspection de la mémoire.

Ouvrir depuis le menu

1. Accédez aux outils de développement.
2. Cliquez sur Autres options  > Plus d'outils > Inspecteur de mémoire.

Ouvrir pendant le débogage

1. Ouvrez une page avec JavaScript ArrayBuffer. Nous allons utiliser cette page de démonstration.
2. Accédez aux outils de développement.
3. Ouvrez le fichier demo-js.js dans le panneau Sources, puis définissez un point d'arrêt à la ligne 18.
4. Actualisez la page.
5. Développez la section Champ d'application dans le volet Débogueur de droite.

6. Vous pouvez ouvrir l'outil d'inspection de la mémoire:

   • Depuis l'icône En cliquant sur l'icône à côté de la propriété buffer
   • Dans le menu contextuel Effectuez un clic droit sur la propriété buffer, puis sélectionnez Afficher dans le panneau de l'outil d'inspection de la mémoire.

   

Inspecter plusieurs objets

1. Vous pouvez également inspecter DataView ou TypedArray. Par exemple, b2 est un TypedArray. Pour l'inspecter, effectuez un clic droit sur la propriété b2, puis sélectionnez Afficher dans le panneau de l'inspecteur de mémoire (aucune icône pour TypedArray ou DataView pour le moment).
2. Un nouvel onglet s'ouvre dans l'inspecteur de mémoire. Notez que vous pouvez inspecter plusieurs objets à la fois.

Outil d'inspection de mémoire

L'inspecteur de mémoire se compose de trois sections principales:

Barre de navigation

1. La saisie d'adresse affiche l'adresse d'octet actuelle au format hexadécimal. Vous pouvez saisir une nouvelle valeur pour accéder à un nouvel emplacement dans le tampon de mémoire. Par exemple, saisissez 0x00000008.
2. Les tampons de mémoire peuvent être plus longs qu'une page. Au lieu de faire défiler la page, vous pouvez utiliser les boutons gauche et droite pour naviguer.
3. Les boutons de gauche permettent de faire défiler la page vers l'avant ou vers l'arrière.
4. Par défaut, le tampon est automatiquement mis à jour lors de l'exécution par étapes. Si ce n'est pas le cas, le bouton Actualiser vous permet d'actualiser la mémoire et de mettre à jour son contenu.

Tampon de mémoire

1. À gauche, l'adresse s'affiche au format hexadécimal.
2. La mémoire est également affichée au format hexadécimal, chaque octet étant séparé par un espace. L'octet actuellement sélectionné est mis en surbrillance. Vous pouvez cliquer sur l'octet ou naviguer à l'aide du clavier (gauche, droite, haut, bas).
3. Une représentation ASCII de la mémoire s'affiche à droite. Un surlignage indique la valeur correspondante aux bits sélectionnés de l'octet. Comme pour la mémoire, vous pouvez cliquer sur l'octet ou naviguer avec le clavier (gauche, droite, haut, bas).

Outil d'inspection des valeurs

1. Une barre d'outils supérieure comporte un bouton permettant de basculer entre les ordres de bytes big-endian et little-endian, et d'ouvrir les paramètres. Ouvrez les paramètres pour sélectionner les types de valeurs à afficher par défaut dans l'inspecteur.
2. La zone principale affiche toutes les interprétations des valeurs en fonction des paramètres. Par défaut, tous sont affichés.
3. L'encodage est cliquable. Vous pouvez passer de la notation décimale, hexadécimale et octale pour les entiers, et de la notation scientifique et décimale pour les nombres à virgule flottante.

Inspecter la mémoire

Voyons ensemble la mémoire.

1. Pour démarrer le débogage, procédez comme suit.
2. Remplacez l'adresse par 0x00000027 dans le champ de saisie d'adresse.
3. Observez la représentation ASCII et les interprétations des valeurs. Toutes les valeurs sont vides pour le moment.
4. Notez le bouton bleu Accéder à l'adresse à côté de Pointer 32-bit et Pointer 64-bit. Vous pouvez cliquer dessus pour accéder à l'adresse. Les boutons sont grisés et ne sont pas cliquables si les adresses ne sont pas valides.
5. Cliquez sur Reprendre l'exécution du script pour suivre le code.
6. Notez que la représentation ASCII est maintenant mise à jour. Toutes les interprétations des valeurs sont également mises à jour.
7. Personnalisons l'inspecteur de valeurs pour n'afficher que les nombres à virgule flottante. Cliquez sur le bouton Paramètres, puis cochez uniquement Float 32 bits et Float 64 bits.
8. Changeons l'encodage de dec en sci. Notez que les représentations des valeurs sont mises à jour en conséquence.
9. Essayez de parcourir le tampon de mémoire à l'aide du clavier ou de la barre de navigation. Répétez l'étape 4 pour observer les modifications des valeurs.

Inspection de la mémoire WebAssembly

L'objet WebAssembly.Memory est un ArrayBuffer qui contient les octets bruts de la mémoire des objets. Le panneau Memory Inspector (Inspecteur de mémoire) vous permet d'inspecter ces objets dans les applications Wasm écrites en C++.

Pour profiter pleinement de l'inspection WebAssembly.Memory:

• Utilisez Chrome 107 ou une version ultérieure. Vérifiez votre version sur chrome://version/.
• Installez l'extension C/C++ DevTools Support (DWARF). Il s'agit d'un plug-in permettant de déboguer des applications WebAssembly C/C++ à l'aide d'informations de débogage DWARF.

Pour inspecter le WebAssembly.Memory d'un objet:

1. Ouvrez les outils de développement sur cette page de démonstration.
2. Dans le panneau Sources, ouvrez demo-cpp.cc et définissez un point d'arrêt dans la fonction main() à la ligne 15: x[i] = n - i - 1;.
3. Actualisez la page pour exécuter l'application. Le débogueur se met en pause au point d'arrêt.
4. Dans le panneau Débogueur, développez Champ d'application > Local.

5. Cliquez sur l'icône à côté du tableau x: int[10].

   Vous pouvez également effectuer un clic droit sur le tableau, puis sélectionner Afficher dans le panneau de l'outil d'inspection de la mémoire.

Pour arrêter de mettre en surbrillance la mémoire de l'objet, dans le panneau Inspecteur de mémoire, pointez sur le badge de l'objet, puis cliquez sur le bouton x.

Pour en savoir plus, consultez les sections suivantes :

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