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

Utilisez le nouvel inspecteur de mémoire pour inspecter 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'outil d'inspection de mémoire.

Ouvrir depuis le menu

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

Ouvrir pendant le débogage

1. Ouvrez une page avec JavaScript ArrayBuffer. Nous utiliserons 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 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 en cliquant sur l'icône à côté de la propriété buffer ; ou
   • 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 mémoire.

   

Inspecter plusieurs objets

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

Outil d'inspection de la mémoire

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

Barre de navigation

1. La entrée d'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, essayez de saisir 0x00000008.
2. Les tampons de mémoire peuvent être plus longs qu'une page. Au lieu de faire défiler l'écran, vous pouvez utiliser les boutons gauche et droite pour naviguer.
3. Les boutons de gauche permettent de naviguer vers l'avant/arrière.
4. Par défaut, le tampon est automatiquement mis à jour à chaque étape. Dans le cas contraire, le bouton Refresh (Actualiser) vous permet d'actualiser la mémoire et de mettre à jour son contenu.

Tampon mémoire

1. À gauche, l'adresse est affichée au format hexadécimal.
2. La mémoire est également affichée au format hexadécimal, chaque octet étant séparé par une 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. Une mise en surbrillance affiche la valeur correspondante pour les bits sélectionnés sur 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 de la valeur

1. La barre d'outils supérieure comporte un bouton permettant de basculer entre le big en tête de lit et l'ouverture des 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 de valeur conformément aux paramètres. Par défaut, ils sont tous affichés.
3. L'encodage est cliquable. Vous pouvez basculer entre déc, hex, oct pour entier et sci, déc pour les flottants.

Inspecter la mémoire

Examinons la mémoire ensemble.

1. Procédez comme suit pour démarrer le débogage.
2. Remplacez l'adresse par 0x00000027 dans la entrée d'adresse.
3. Observez la représentation ASCII et les interprétations de 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 correspondante. Les boutons sont grisés et ne peuvent pas être cliquables si les adresses ne sont pas valides.
5. Cliquez sur Reprendre l'exécution du script pour parcourir le code.
6. Notez que la représentation ASCII est désormais mise à jour. Toutes les interprétations de valeur sont également mises à jour.
7. Nous allons maintenant personnaliser l'Inspecteur de valeur pour n'afficher que la valeur à virgule flottante. Cliquez sur le bouton settings, puis cochez uniquement Float 32-bit (Float 32 bits) et Float 64-bit (Float 64 bits).
8. Passons de l'encodage dec à 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 exploiter pleinement 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). 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'interrompt 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 et sélectionner Afficher dans le panneau de l'outil d'inspection de mémoire.

Pour arrêter de mettre en surbrillance la mémoire d'un 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 mémoire pour le débogage C/C++
• Déboguer WebAssembly avec des outils modernes