Jecelyn Yeen
Sofia Emelianova
Usa el nuevo 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++.
Cómo abrir el Inspector de memoria
Existen varias formas de abrir el Inspector de memoria.
Abrir desde el menú
- Abre 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 JavaScript
ArrayBuffer. Usaremos esta página de demostración. - Abre 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 Debugger de la derecha.
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
buffery selecciona Mostrar en el panel del Inspector de memoria.
- En 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,
b2esTypedArray. Para inspeccionarlo, haz clic con el botón derecho en la propiedadb2y selecciona Reveal in Memory Inspector panel (Todavía no hay ícono paraTypedArrayniDataView). - Se abrirá una nueva pestaña 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 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. - 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 una navegación hacia adelante/retroceso.
- De forma predeterminada, el búfer se actualiza automáticamente durante el paso. En caso de que no lo sea, el botón refresh te da la opción de actualizar la memoria y su contenido.
Búfer de memoria
- A la izquierda, se muestra address 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 o abajo).
- 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
- 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.
- En el área principal, se muestran todas las interpretaciones de los valores según la configuración. De forma predeterminada, se muestran todos.
- 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.
Inspecciona la memoria
Revisemos 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 los valores. Todos los valores están vacíos en este momento.
- Observa el botón azul Jump to address, junto a
Pointer 32-bityPointer 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.
- Haz clic en Resume scriptexecution para recorrer el código.
- Observa que la representación ASCII ahora está actualizada. También se actualizan todas las interpretaciones de valores.
- 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.
- 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 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:
- 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].De manera alternativa, haz clic con el botón derecho en el array y selecciona Reveal in Memory Inspector panel.
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.
Para obtener más información, consulta: