Inspecter un objet ArrayBuffer JavaScript à l’aide de l’inspecteur de mémoire

Utilisez l’Inspecteur de mémoire pour afficher et interagir avec les types d’objets suivants :

• ArrayBuffer
• TypedArray
• Dataview
• Mémoire WebAssembly (Wasm)

À l’aide de l’Inspecteur de mémoire, vous pouvez afficher les différents types d’objets mémoire, naviguer et sélectionner les types à utiliser pour interpréter les valeurs. Il affiche les valeurs ASCII juste à côté des octets et vous permet de sélectionner différentes endianités.

L’outil Inspecteur de mémoire offre une plus grande capacité d’inspection ArrayBuffers que l’outil Sources lors du débogage. L’affichage Étendue de l’outil Sources affiche une liste de valeurs uniques dans la mémoire tampon du tableau, ce qui rend difficile l’affichage de toutes les données. En outre, la navigation vers une certaine plage dans la mémoire tampon vous oblige à faire défiler jusqu’à un index spécifique et les valeurs sont toujours affichées sous la forme d’un seul octet, même si vous souhaitez les afficher dans un autre format, tel que des entiers 32 bits.

Ouvrir l’inspecteur de mémoire pendant le débogage

1. Ouvrez Microsoft Edge.

2. Ouvrez le site de test Inspect ArrayBuffers in JS (Memory in JS).

3. Ouvrez DevTools en appuyant sur F12 ou Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS).

4. Cliquez sur Sources et ouvrez le demo-js.js fichier.

5. Définissez un point d’arrêt à la ligne 18 , comme illustré dans l’image suivante.

   

6. Actualisez la page web. Il ne parvient pas à s’afficher, car JavaScript s’interrompt au point d’arrêt.

7. Dans le volet de droite Débogueur, sous Étendue, recherchez la buffer ligne.

8. À partir de la buffer ligne, vous pouvez ouvrir l’Inspecteur de mémoire à l’aide de l’une des méthodes suivantes :

   • Cliquez sur l’icône révéler dans le panneau Inspecteur de mémoire () à la fin de la buffer ligne de propriété, ou

   • Dans le menu contextuel. Cliquez avec le bouton droit sur la buffer propriété et sélectionnez Révéler dans le panneau Inspecteur de mémoire.

   

   L’objet ArrayBuffer JavaScript s’ouvre dans l’inspecteur de mémoire.

   

Inspecter plusieurs objets

Vous pouvez inspecter plusieurs objets en même temps, tels que DataView et TypedArray.

Avec la page web de démonstration suspendue au point d’arrêt, l’objet b2 dans la vue Étendue est un TypedArray. Cliquez avec le bouton droit sur l’objet b2 et sélectionnez Révéler dans le panneau Inspecteur de mémoire

Un nouvel onglet pour l’objet b2 s’ouvre en regard du premier onglet, qui représente l’objet buffer dans l’inspecteur de mémoire.

Navigation dans l’inspecteur de mémoire

Le panneau Inspecteur de mémoire comprend trois types de contenu :

• Barre de navigation
• Mémoire tampon
• Inspecteur de valeur

Barre de navigation

La zone de texte Entrer l’adresse affiche l’adresse d’octet actuelle au format hexadécimal. Vous pouvez modifier la valeur pour passer à un nouvel emplacement dans la mémoire tampon. Cliquez dans la zone de texte et remplacez la valeur par 0x00000008. La mémoire tampon passe immédiatement à cette adresse d’octet.

Les mémoires tampons peuvent être plus longues qu’une page. Utilisez les flèches gauche et droite pour parcourir la page précédente (<) et la page suivante (>), respectivement. S’il n’existe qu’une seule page de données de mémoire tampon, les flèches vous amènent au début et à la fin de la page.

Utilisez les flèches d’historique à gauche pour Retour dans l’historique des adresses ( des adresses) et Avancer dans l’historique des adresses ().

Si la mémoire tampon ne se met pas à jour automatiquement lors de l’exécution pas à pas des valeurs, cliquez sur Actualiser ().

Mémoire tampon

À partir du côté gauche du panneau, l’adresse est affichée au format hexadécimal. L’adresse actuellement sélectionnée est en gras.

La mémoire est également affichée au format hexadécimal, chaque octet séparé par un espace. L’octet actuellement sélectionné est mis en surbrillance. Vous pouvez cliquer sur n’importe quel octet ou naviguer à l’aide des touches de direction (gauche, droite, haut et bas).

La représentation ASCII de la mémoire est affichée sur le côté droit du panneau. Le caractère en surbrillance correspond à l’octet sélectionné. Vous pouvez cliquer sur n’importe quel caractère ou naviguer à l’aide des touches de direction (gauche, droite, haut et bas).

Inspecteur de valeur

Cliquez sur le type Endian actuel pour basculer entre Big endian et Little endian.

La zone main affiche chaque valeur et interprétation en fonction des paramètres. Par défaut, toutes les valeurs sont affichées.

Cliquez sur Activer/désactiver les paramètres du type de valeur () pour sélectionner les types valeur à afficher dans l’inspecteur. Il s’agit du nouveau paramètre de type de valeur par défaut.

Vous pouvez modifier la vue d’encodage à l’aide de la liste déroulante. Pour les entiers, vous pouvez choisir entre decimal dec, hexadécimal hexet octal oct. Pour les floats, vous pouvez choisir entre la notation dec décimale et la notation sciscientifique .

Inspection de la mémoire

Effectuez les étapes suivantes pour déboguer une page web dans l’Inspecteur de mémoire.

1. Dans la barre de navigation , remplacez l’adresse par 0x00000027.

2. Affichez la représentation ASCII et les interprétations de valeur. Toutes les valeurs doivent être égales à zéro ou vides.

   

3. Cliquez sur Reprendre l’exécution du script () ou appuyez surF8 ou Ctrl +\ pour parcourir le code.

   La représentation ASCII et les interprétations de valeur sont mises à jour.

   

4. Cliquez sur le bouton Accéder à l’adresse () pour Pointeur 32 bits ou Pointeur 64 bits si nécessaire pour passer à l’adresse mémoire active suivante. Si l’adresse mémoire suivante n’est pas disponible, le bouton est désactivé () avec l’info-bulle Adresse hors plage de mémoire.

5. Personnalisez l’inspecteur de valeurs pour afficher uniquement les valeurs à virgule flottante. Cliquez sur Activer/désactiver les paramètres du type de valeur () et désactivez toutes les cases à l’exception des deux valeurs à virgule flottante .

   

6. Cliquez sur Activer/désactiver les paramètres du type de valeur () pour fermer les paramètres du type de valeur.

7. Utilisez les listes déroulantes pour remplacer l’encodage par decsci. Les représentations de valeur sont mises à jour.

   

8. Explorez la mémoire tampon à l’aide du clavier ou de la barre de navigation.

9. Répétez les étapes 3 et 4 pour observer les changements de valeur.

Inspection de la mémoire WebAssembly

Pour l’inspection de la mémoire WebAssembly (Wasm), le processus est similaire à l’inspection de la mémoire JavaScript.

1. Ouvrez le site de test Wasm Inspect Wasm memories (Memory in Wasm).

2. Ouvrez DevTools en appuyant sur F12 ou Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS).

3. Cliquez sur Sources et ouvrez le memory-write.wasm fichier.

4. Définissez un point d’arrêt sur la première ligne de la boucle, valeur hexadécimale 0x03c.

5. Actualisez la page.

6. Dans le volet débogueur, sous Étendue, développez le Module.

   

7. Cliquez sur l’icône Révéler dans le panneau Inspecteur de mémoire () à la fin de la $imports.memory ligne de propriété.

   L’objet ArrayBuffer Wasm s’ouvre dans l’Inspecteur de mémoire.

   

Remarque

Les parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisées conformément aux termes décrits dans la licence internationale Creative Commons Attribution 4.0. La page d’origine se trouve ici et est créée par Kim-Anh Tran (Chrome DevTools).

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.