Inspector de memoria: Inspecciona ArrayBuffer, TypedArray, DataView y Wasm Memory.

Sofia Emelianova
Sofia Emelianova

Usa el Inspector de memoria para inspeccionar la memoria ArrayBuffer, TypedArray y DataView en JavaScript, así como WebAssembly.Memory de las aplicaciones de Wasm escritas en C++.

Descripción general

El Inspector de memoria organiza el contenido de la memoria y te ayuda a navegar rápidamente por arrays de gran tamaño. Puedes ver los valores ASCII del contenido de la memoria directamente junto a los bytes y seleccionar diferentes ordenes de bytes. Usa el Inspector de memoria mientras depuras tu app web para lograr un flujo de trabajo eficiente.

Cómo abrir el Inspector de memoria

Existen varias formas de abrir el Inspector de memoria.

Abrir desde el menú

  1. Abre Herramientas para desarrolladores.
  2. Haz clic en Más opciones Más > Más herramientas > Inspector de memoria: Menú del inspector de memoria

Abrir durante la depuración

  1. Abre una página con JavaScript ArrayBuffer. Usaremos esta página de demostración.
  2. Abre Herramientas para desarrolladores.
  3. Abre el archivo demo-js.js en el panel Sources y establece un punto de interrupción en la línea 18.
  4. Actualiza la página.
  5. Expande la sección Alcance en el panel Debugger de la derecha.
  6. Puedes abrir el Inspector de memoria:

    • En el ícono. Haz clic en el ícono junto a la propiedad buffer.
    • Desde el menú contextual. Haz clic con el botón derecho en la propiedad buffer y selecciona Mostrar en el panel Inspector de memoria.

    Mostrar en el panel de inspector de memoria

Cómo inspeccionar varios objetos

  1. También puedes inspeccionar DataView o TypedArray. Por ejemplo, b2 es TypedArray. Para inspeccionarlo, haz clic con el botón derecho en la propiedad b2 y selecciona Reveal in Memory Inspector panel (Todavía no hay ícono para TypedArray ni DataView).
  2. Se abrirá una nueva pestaña en el Inspector de memoria. Ten en cuenta que puedes inspeccionar varios objetos a la vez. Nueva pestaña en el inspector de memoria

El inspector de memoria

El inspector de memoria

El Inspector de memoria consta de 3 áreas principales:

Barra de navegación

  1. La entrada de dirección muestra la dirección de bytes actual en formato hexadecimal. Puedes ingresar un valor nuevo para saltar a una ubicación nueva en el búfer de memoria. Por ejemplo, prueba escribir 0x00000008.
  2. Los búferes de memoria pueden ser más largos que una página. En lugar de desplazarte, puedes usar los botones izquierda y derecha para navegar.
  3. Los botones de la izquierda permiten una navegación hacia adelante/retroceso.
  4. De forma predeterminada, el búfer se actualiza automáticamente durante el paso. Si no es así, el botón Actualizar te brinda la opción de actualizar la memoria y su contenido.

Búfer de memoria

Búfer de memoria

  1. A la izquierda, se muestra address en formato hexadecimal.
  2. La memoria también se muestra en formato hexadecimal, cada byte separado por un espacio. Se destaca el byte seleccionado actualmente. Puedes hacer clic en el byte o navegar con el teclado (izquierda, derecha, arriba o abajo).
  3. En el lado derecho, se muestra una representación ASCII de la memoria. Al destacarse se muestra el valor correspondiente a los bits seleccionados en el byte. Al igual que con la memoria, puedes hacer clic en el byte o navegar con el teclado (izquierda, derecha, arriba o abajo).

Inspector de valores

Inspector de valores

  1. La barra de herramientas superior incluye un botón para cambiar entre big y small endian y abrir la configuración. Abre la configuración para seleccionar los tipos de valores que quiere ver según la configuración predeterminada del inspector. botón de la barra de herramientas
  2. En el área principal, se muestran todas las interpretaciones de los valores según la configuración. De forma predeterminada, se muestran todos.
  3. Puedes hacer clic en la codificación. Puedes cambiar entre dec, hexadecimal, oct para números enteros y sci, y dec para números de punto flotante. Interruptor de codificación

Inspecciona la memoria

Revisemos la memoria juntos.

  1. Sigue estos pasos para iniciar la depuración.
  2. Cambia la dirección a 0x00000027 en la entrada de dirección. entrada de dirección
  3. Observa la representación ASCII y las interpretaciones de los valores. Todos los valores están vacíos en este momento.
  4. Observa el botón azul Jump to address, junto a Pointer 32-bit y Pointer 64-bit. Puedes hacer clic en ella para ir a la dirección. Los botones estarán inhabilitados y no se podrá hacer clic en ellos si las direcciones no son válidas. Botón de ir a la dirección
  5. Haz clic en Resume scriptexecution para recorrer el código. Reanudar la ejecución de la secuencia de comandos
  6. Observa que la representación ASCII ahora está actualizada. También se actualizan todas las interpretaciones de valores. Se actualizaron todas las interpretaciones de valores
  7. Personalizaremos el Inspector de valores para que solo muestre el punto flotante. Haz clic en el botón de configuración y marca únicamente las opciones Flotante de 32 bits y Flotante de 64 bits. para personalizar el inspector de valores
  8. Cambiemos la codificación de dec a sci. Observa que las representaciones de valores se actualizan según corresponda. Cambia la codificación.
  9. Intenta navegar por el búfer de la memoria con el teclado o la barra de navegación. Repite el paso 4 para observar los cambios en los valores.

Inspección de memoria de WebAssembly

El objeto WebAssembly.Memory es un ArrayBuffer que contiene los bytes sin procesar de la memoria del objeto. El panel Memory Inspector te permite inspeccionar esos objetos en aplicaciones Wasm escritas en C++.

Para aprovechar al máximo la inspección de WebAssembly.Memory, haz lo siguiente:

  • Usa Chrome 107 o una versión posterior. Verifica tu versión en chrome://version/.
  • Instala la extensión C/C++ Herramientas para desarrolladores (DWARF). Este es un complemento para depurar aplicaciones C/C++ WebAssembly con información de depuración de DWARF.

Para inspeccionar el WebAssembly.Memory de un objeto, haz lo siguiente:

  1. Abre las Herramientas para desarrolladores en esta página de demostración.
  2. En el panel Sources, abre demo-cpp.cc y establece un punto de interrupción en la función main(), en la línea 15: x[i] = n - i - 1;.
  3. Vuelve a cargar la página para ejecutar la aplicación. El depurador se detiene en el punto de interrupción.
  4. En el panel Debugger, expande Scope > Local.
  5. Haz clic en el ícono Mostrar en el Inspector de memoria. junto al array x: int[10].

    De manera alternativa, haz clic con el botón derecho en el array y selecciona Reveal in Memory Inspector panel.

Se abrió el array x en el Inspector de memoria.

Para dejar de destacar la memoria de objetos, en el panel Memory Inspector, coloca el cursor sobre la insignia del objeto y haz clic en el botón x.

Deja de destacar la memoria del objeto.

Para obtener más información, consulta: