Inspección de un objeto ArrayBuffer de JavaScript mediante el Inspector de memoria

Use el Inspector de memoria para ver e interactuar con los siguientes tipos de objetos:

• ArrayBuffer
• TypedArray
• Dataview
• Memoria de WebAssembly (Wasm)

Con el Inspector de memoria puede ver los diferentes tipos de objetos de memoria, navegar y seleccionar los tipos que se van a usar para interpretar los valores. Muestra los valores ASCII directamente junto a los bytes y le permite seleccionar una endianidad diferente.

La herramienta Inspector de memoria proporciona una mayor capacidad que la herramienta Orígenes para inspeccionar ArrayBuffers al depurar. La vista Ámbito de la herramienta Orígenes muestra una lista de valores únicos dentro del búfer de matriz, lo que dificulta la visualización de todos los datos. Además, navegar a un intervalo determinado dentro del búfer requiere desplazarse a un índice específico y los valores siempre se muestran como un solo byte, incluso si desea verlos en otro formato, como enteros de 32 bits.

Abrir el inspector de memoria durante la depuración

1. Inicie Microsoft Edge.

2. Abra el sitio de prueba Inspect ArrayBuffers in JS (Memory in JS).

3. Abra DevTools presionando F12 o Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS).

4. Haga clic en Orígenes y abra el demo-js.js archivo.

5. Establezca un punto de interrupción en la línea 18 como se muestra en la siguiente imagen.

   

6. Actualice la página web. No se puede mostrar porque JavaScript se detiene en el punto de interrupción.

7. En el panel Derecho del depurador, en Ámbito, busque la buffer línea .

8. Desde la buffer línea puede abrir el Inspector de memoria mediante uno de los métodos siguientes:

   • Haga clic en el icono del panel Mostrar en el inspector de memoria () al final de la buffer línea de propiedades, o

   • En el menú contextual. Haga clic con el botón derecho en la buffer propiedad y seleccione Mostrar en el panel Inspector de memoria.

   

   Se abre ArrayBuffer de JavaScript en el Inspector de memoria.

   

Inspección de varios objetos

Puede inspeccionar varios objetos al mismo tiempo, como DataView y TypedArray.

Con la página web de demostración en pausa en el punto de interrupción, el objeto b2 de la vista Ámbito es una typedArray. Haga clic con el botón derecho en el b2 objeto y seleccione Mostrar en el panel Inspector de memoria.

Se abre una nueva pestaña para el b2 objeto junto a la primera pestaña, que representa el objeto en el buffer Inspector de memoria.

Navegación en el inspector de memoria

El panel Inspector de memoria incluye tres tipos de contenido:

• Barra de navegación
• Búfer de memoria
• Inspector de valores

Barra de navegación

El cuadro de texto Escribir dirección muestra la dirección de bytes actual en formato hexadecimal. Puede cambiar el valor para ir a una nueva ubicación en el búfer de memoria. Haga clic en el cuadro de texto y cambie el valor a 0x00000008. El búfer de memoria salta inmediatamente a esa dirección de bytes.

Los búferes de memoria pueden tener más de una página. Use los botones de flecha izquierda y derecha para navegar por las páginas Anterior (<) y Siguiente (>), respectivamente. Si solo hay una página de datos de búfer de memoria, las flechas le llevarán al principio y al final de la página.

Use las flechas del historial de la izquierda para Volver en el historial de direcciones () y Avance en el historial de direcciones ().

Si el búfer de memoria no se actualiza automáticamente al recorrer los valores paso a paso, haga clic en Actualizar ().

Búfer de memoria

Al leer desde el lado izquierdo del panel, la dirección se muestra en formato hexadecimal. La dirección seleccionada actualmente está en negrita.

La memoria también se muestra en formato hexadecimal, cada byte separado por un espacio. El byte seleccionado actualmente está resaltado. Puede hacer clic en cualquier byte o navegar con las teclas de flecha (izquierda, derecha, arriba y abajo).

La representación ASCII de la memoria se muestra en el lado derecho del panel. El carácter resaltado corresponde al byte seleccionado. Puede hacer clic en cualquier carácter o navegar con las teclas de flecha (izquierda, derecha, arriba y abajo).

Inspector de valores

Haga clic en el tipo endian actual para cambiar entre Big endian y Little endian.

El área principal muestra cada valor e interpretación en función de la configuración. De forma predeterminada, se muestran todos los valores.

Haga clic en Alternar configuración de tipo de valor () para seleccionar qué tipos de valor se verán en el inspector. Se convierte en la nueva configuración de tipo de valor predeterminado.

Puede cambiar la vista de codificación mediante la lista desplegable. En el caso de los enteros, puede elegir entre decimal dec, hexadecimal hexy octal oct. En el caso de los floats, puede elegir entre notación dec decimal y notación scicientífica.

Inspeccionar la memoria

Complete los pasos siguientes para depurar una página web en el Inspector de memoria.

1. En la barra de navegación , cambie la dirección a 0x00000027.

2. Vea la representación ASCII y las interpretaciones de valores. Todos los valores deben ser cero o vacíos.

   

3. Haga clic en Reanudar ejecución de ) o presione F8 o Ctrl +\ para recorrer el código.

   Se actualizan la representación ASCII y las interpretaciones de valores.

   

4. Haga clic en el botón Saltar a dirección () para Puntero de 32 bits o Puntero de 64 bits según sea necesario para ir a la siguiente dirección de memoria activa. Si la siguiente dirección de memoria no está disponible, el botón está desactivado () con la información sobre herramientas Dirección fuera del intervalo de memoria.

5. Personalice el inspector de valores para mostrar solo los valores de punto flotante. Haga clic en Toggle value type settings () y desactive todas las casillas excepto los dos valores de punto flotante .

   

6. Haga clic en Alternar configuración de tipo de valor () para cerrar la configuración del tipo de valor.

7. Use las listas desplegables para cambiar la codificación de dec a sci. Se actualizan las representaciones de valor.

   

8. Explore el búfer de memoria mediante el teclado o la barra de navegación.

9. Repita los pasos 3 y 4 para observar los cambios de valor.

Inspección de memoria de WebAssembly

Para la inspección de memoria de WebAssembly (Wasm), el proceso es similar a inspeccionar la memoria de JavaScript.

1. Abra el sitio de prueba de Wasm Inspect Wasm memories (Memory in Wasm).

2. Abra DevTools presionando F12 o Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS).

3. Haga clic en Orígenes y abra el memory-write.wasm archivo.

4. Establezca un punto de interrupción en la primera línea del bucle, valor hexadecimal 0x03c.

5. Actualice la página.

6. En el panel del depurador, en Ámbito, expanda el módulo.

   

7. Haga clic en el icono del panel Mostrar en el inspector de memoria () al final de la $imports.memory línea de propiedades.

   Se abre el objeto ArrayBuffer de Wasm en el Inspector de memoria.

   

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kim-Anh Tran (Chrome DevTools).

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.