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

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 por grandes arrays con rapidez. 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 obtener un flujo de trabajo eficiente.

Cómo abrir el Inspector de memoria

Existen varias formas de abrir el Inspector de memoria.

Cómo abrir desde el menú

  1. Abre las 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 ArrayBuffer de JavaScript. Usaremos esta página de demostración.
  2. Abre las 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 Depurador de la derecha.
  6. Puedes abrir el Inspector de memoria de las siguientes maneras:

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

    Mostrar en el panel del Inspector de memoria

Cómo inspeccionar varios objetos

  1. También puedes inspeccionar DataView o TypedArray. Por ejemplo, b2 es un TypedArray. Para inspeccionarlo, haz clic con el botón derecho en la propiedad b2 y selecciona Reveal in Memory Inspector panel (aún no hay un ícono para TypedArray o DataView).
  2. Se abrirá una pestaña nueva 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 byte actual en formato hexadecimal. Puedes ingresar un valor nuevo para saltar a una ubicación nueva en el búfer de memoria. Por ejemplo, intenta 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 navegar hacia adelante o hacia atrás.
  4. De forma predeterminada, el búfer se actualiza automáticamente cuando se avanza. Si no es así, el botón Actualizar te brinda la opción de actualizar la memoria y su contenido.

Buffer de memoria

Buffer de memoria

  1. A la izquierda, la dirección se muestra 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, abajo).
  3. En el lado derecho, se muestra una representación ASCII de la memoria. Un elemento destacado 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, abajo).

Inspector de valores

Inspector de valores

  1. Una barra de herramientas superior tiene un botón para alternar entre endian grande y endian pequeño y para abrir la configuración. Abre la configuración para seleccionar los tipos de valores que deseas ver de forma predeterminada en el inspector. botón de la barra de herramientas
  2. El área principal muestra todas las interpretaciones de valores según la configuración. De forma predeterminada, se muestran todas.
  3. Se puede hacer clic en la codificación. Puedes cambiar entre dec, hex y oct para números enteros, y sci y dec para números de punto flotante. Interruptor de codificación

Cómo inspeccionar la memoria

Inspeccionemos 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 valores. Por el momento, todos los valores están vacíos.
  4. Observa el botón azul Saltar a la dirección junto a Pointer 32-bit y Pointer 64-bit. Puedes hacer clic en ella para ir a la dirección. Los botones aparecerán inhabilitados y no se podrá hacer clic en ellos si las direcciones no son válidas. Botón para ir a la dirección
  5. Haz clic en Reanudar la ejecución de la secuencia de comandos para recorrer el código. Cómo 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 actualizan todas las interpretaciones de valores
  7. Personalicemos el Inspector de valores para que muestre solo números de punto flotante. Haz clic en el botón Configuración y marca solo Número de punto flotante de 32 bits y Número de punto flotante de 64 bits. configuración 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 memoria con el teclado o con 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 Inspector de memoria te permite inspeccionar esos objetos en aplicaciones de Wasm escritas en C++.

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

  • Usa Chrome 107 o versiones posteriores. Verifica tu versión en chrome://version/.
  • Instala la extensión C/C++ DevTools Support (DWARF). Este es un complemento para depurar aplicaciones de WebAssembly de C/C++ con información de depuración 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].

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

El array x se abrió en el Inspector de memoria.

Para dejar de destacar la memoria del objeto, en el panel Inspector de memoria, 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: