Jecelyn Yeen
Sofía 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ú
- Abra Herramientas para desarrolladores.
- Haz clic en More Options
> More tools > Memory Inspector.
Abrir durante la depuración
- Abre una página con JavaScript
ArrayBuffer. Usaremos esta página de demostración. - Abra 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 Scope en el panel Debugger de la derecha.
Puedes abrir el Inspector de memoria:
- 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 Mostrar en el panel del Inspector de memoria.
- Desde el ícono. Haz clic en el ícono junto a la propiedad
Inspecciona 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 Mostrar en el panel del Inspector de memoria (todavía no hay ningún ícono paraTypedArrayoDataView). - Se abre 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 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, 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 la navegación hacia adelante y hacia atrás.
- De forma predeterminada, el búfer se actualiza automáticamente durante los pasos. En el caso de que no lo esté, el botón refresh te brinda la opción de actualizar la memoria y su contenido.
Búfer 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. El byte seleccionado actualmente está destacado. Puedes hacer clic en el byte o navegar con el teclado (izquierda, derecha, arriba, abajo).
- A la derecha, se muestra una representación ASCII de la memoria. Un resaltado 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 incluye un botón para alternar entre big endian y abrir la configuración. Abre settings para seleccionar los tipos de valores que quieren ver de forma predeterminada en el inspector.
- En el área principal, se muestran todas las interpretaciones de valores según la configuración. De forma predeterminada, se muestran todos.
- Se puede hacer clic en la codificación. Puedes cambiar entre dec, hex, oct para número entero 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. En este momento, todos los valores están vacíos.
- Observa el botón azul Jump to address junto a
Pointer 32-bityPointer 64-bit. Puedes hacer clic en él para saltar a la dirección. Los botones están inhabilitados y no se puede hacer clic en ellos si las direcciones no son válidas.
- Haz clic en Reanudar ejecución de la secuencia de comandos para revisar el código.
- Observa que la representación ASCII ahora se actualizó. También se actualizan todas las interpretaciones de valores.
- Personalizaremos el Inspector de valores para que muestre solo el punto flotante. Haz clic en el botón settings y marca solo las opciones Float de 32 bits y Float 64-bit.
- Cambiemos la codificación de
decasci. Observa que las representaciones de valores se actualizan en consecuencia.
- 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 estos objetos en aplicaciones de Wasm escritas en C++.
Para aprovechar al máximo la inspección de WebAssembly.Memory, haz lo siguiente:
- Usar Chrome 107 o una versión posterior Verifica la versión en
chrome://version/. - Instala la extensión Compatibilidad con Herramientas para desarrolladores de C/C++ (DWARF). Este es un complemento para depurar aplicaciones WebAssembly de C/C++ con información de depuración de DWARF.
Para inspeccionar el WebAssembly.Memory de un objeto, haz lo siguiente:
- Abre Herramientas para desarrolladores en esta página de demostración.
- En el panel Fuentes, 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].También puedes hacer clic con el botón derecho en el array y seleccionar Reveal in Memory Inspector panel.
Para dejar de destacar la memoria de objeto, en el panel del 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: