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

Jecelyn Yeen

Sofia Emelianova

Utilisez l'inspecteur de mémoire pour examiner la mémoire ArrayBuffer, TypedArray et DataView en JavaScript, ainsi que 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 à parcourir rapidement de grands tableaux. Vous pouvez afficher les valeurs ASCII du contenu de la mémoire directement à côté des octets et sélectionner une finition différente. Utilisez l'inspecteur de mémoire lorsque vous déboguez votre application Web pour optimiser le workflow.

Ouvrir l'outil d'inspection de mémoire

Il existe plusieurs façons d'ouvrir l'inspecteur de mémoire.

Ouvrir depuis le menu

1. Ouvrez les outils de développement.
2. Cliquez sur Plus d'options > Plus d'outils > Outil d'inspection de mémoire.

Ouvrir pendant le débogage

1. Ouvrez une page avec JavaScript ArrayBuffer. Nous allons utiliser cette page de démonstration.
2. Ouvrez les 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 Scope (Champ d'application) dans le volet Debugger (Débogueur) de droite.

6. Vous pouvez ouvrir l'inspecteur de mémoire:

   • À partir de l'icône : Cliquez sur l'icône à côté de la propriété buffer.
   • Depuis le menu contextuel Effectuez un clic droit sur la propriété buffer, puis sélectionnez Afficher dans le panneau "Inspecteur de mémoire".

   

Inspecter plusieurs objets

1. Vous pouvez également inspecter une vue DataView ou un tableau TypedArray. Par exemple, b2 est de type TypedArray. Pour inspecter ce résultat, effectuez un clic droit sur la propriété b2, puis sélectionnez Reveal in Memory Inspector (Afficher dans le panneau "Memory Inspector") (aucune icône pour TypedArray ni DataView).
2. Un nouvel onglet s'ouvre dans l'inspecteur de mémoire. Veuillez noter que vous pouvez inspecter plusieurs objets à la fois.

L'inspecteur de mémoire

L'outil d'inspection de mémoire comprend trois zones principales:

Barre de navigation

1. La saisie de l'adresse affiche l'adresse 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 l'écran, utilisez les boutons gauche et droit pour naviguer.
3. Les boutons de gauche permettent d'effectuer une navigation avant/arrière.
4. Par défaut, le tampon est automatiquement mis à jour lors de l'exécution des étapes. Si ce n'est pas le cas, utilisez le bouton Refresh (Actualiser) pour actualiser la mémoire et mettre à jour son contenu.

Mémoire tampon

1. À gauche, l'adresse s'affiche au format hexadécimal.
2. La valeur memory 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 avec le clavier (gauche, droite, haut, bas).
3. Une représentation ASCII de la mémoire est affichée à droite. La mise en surbrillance affiche la valeur correspondant aux bits sélectionnés sur l'octet. Comme pour les commandes mémoire, vous pouvez cliquer sur l'octet ou naviguer avec le clavier (gauche, droite, haut, bas).

Inspecteur de valeur

1. La barre d'outils supérieure contient un bouton permettant de basculer entre grande taille et petite bouteille, et permettant d'ouvrir les paramètres. Ouvrez les paramètres pour sélectionner les types de valeurs à afficher par défaut dans l'outil d'inspection.
2. La zone principale affiche toutes les interprétations de valeurs indiquées dans les paramètres. Par défaut, elles sont toutes affichées.
3. L'élément encoding est cliquable. Vous pouvez basculer entre déc, hexadécimal, oct pour les entiers et sci, et déc pour les flottants.

Inspecter la mémoire

Inspectons ensemble la mémoire.

1. Suivez ces étapes pour démarrer le débogage.
2. Remplacez l'adresse par 0x00000027 dans la saisie de l'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 directement à l'adresse. Les boutons sont grisés et ne sont pas cliquables si les adresses ne sont pas valides.
5. Cliquez sur Resume script execution (Reprendre l'exécution du script) pour parcourir le code.
6. Notez que la représentation ASCII est maintenant mise à jour. Toutes les interprétations des valeurs sont également mises à jour.
7. Nous allons maintenant personnaliser l'inspecteur de valeur pour n'afficher que le à virgule flottante. Cliquez sur le bouton settings, puis cochez uniquement les options Float 32 bits et Float 64 bits.
8. Changeons l'encodage dec en sci. Notez que les représentations des valeurs sont mises à jour en conséquence.
9. Essayez de parcourir la mémoire tampon à l'aide du clavier ou de la barre de navigation. Répétez l'étape 4 pour observer les changements de valeurs.

Inspection de la mémoire WebAssembly

L'objet WebAssembly.Memory est un ArrayBuffer qui contient les octets bruts de la mémoire de l'objet. Le panneau Memory Inspector (Outil d'inspection 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 des informations de débogage DWARF.

Pour inspecter la propriété WebAssembly.Memory d'un objet:

1. Accédez aux 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 s'arrête au point d'arrêt.
4. Dans le volet Debugger (Débogueur), développez Scope > Locale :

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 "Inspecteur de mémoire".

Pour arrêter de mettre en évidence la mémoire d'objet, dans le panneau Memory Inspector (Outil d'inspection de mémoire), pointez sur le badge d'objet, puis cliquez sur le bouton x.

Pour en savoir plus, consultez les sections suivantes :

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