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ú
- Abre las Herramientas para desarrolladores.
- Haz clic en Más opciones
> Más herramientas > Inspector de memoria.
Abrir durante la depuración
- Abre una página con
ArrayBufferde JavaScript. Usaremos esta página de demostración. - Abre las Herramientas para desarrolladores.
- Abre el archivo demo-js.js en el panel Sources y establece un punto de interrupción en la línea 18.
- Actualiza la página.
- Expande la sección Alcance en el panel Depurador de la derecha.
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
buffery selecciona Reveal in Memory Inspector panel.
- Desde el ícono. Haz clic en el ícono junto a la propiedad
Cómo inspeccionar varios objetos
- También puedes inspeccionar DataView o TypedArray. Por ejemplo,
b2es unTypedArray. Para inspeccionarlo, haz clic con el botón derecho en la propiedadb2y selecciona Reveal in Memory Inspector panel (aún no hay un ícono paraTypedArrayoDataView). - Se abrirá una pestaña nueva en el Inspector de memoria. Ten en cuenta que puedes inspeccionar varios objetos a la vez.
El inspector de memoria
El Inspector de memoria consta de 3 áreas principales:
Barra de navegación
- 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. - 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.
- Los botones de la izquierda permiten navegar hacia adelante o hacia atrás.
- 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
- A la izquierda, la dirección se muestra en formato hexadecimal.
- 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).
- 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
- 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.
- El área principal muestra todas las interpretaciones de valores según la configuración. De forma predeterminada, se muestran todas.
- 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.
Cómo inspeccionar la memoria
Inspeccionemos la memoria juntos.
- Sigue estos pasos para iniciar la depuración.
- Cambia la dirección a
0x00000027en la entrada de dirección.
- Observa la representación ASCII y las interpretaciones de valores. Por el momento, todos los valores están vacíos.
- Observa el botón azul Saltar a la dirección junto a
Pointer 32-bityPointer 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.
- Haz clic en Reanudar la ejecución de la secuencia de comandos para recorrer el código.
- Observa que la representación ASCII ahora está actualizada. También se actualizan todas las interpretaciones de valores.
- 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.
- Cambiemos la codificación de
decasci. Observa que las representaciones de valores se actualizan según corresponda.
- 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:
- Abre las Herramientas para desarrolladores en esta página de demostración.
- En el panel Sources, abre
demo-cpp.ccy establece un punto de interrupción en la funciónmain()en la línea 15:x[i] = n - i - 1;. - Vuelve a cargar la página para ejecutar la aplicación. El depurador se detiene en el punto de interrupción.
- En el panel Debugger, expande Scope > Local.
Haz clic en el ícono
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.
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.
Para obtener más información, consulta: