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

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

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 et 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 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 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 l'entier et sci, et déc. pour les floats.

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 de 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 ne cochez que les valeurs 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 de votre 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 > Local (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 "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