Leer en inglés

Compartir a través de


Inspección de un objeto ArrayBuffer de JavaScript mediante el Inspector de memoria

Use el Inspector de memoria para ver e interactuar con los siguientes tipos de objetos:

Con el Inspector de memoria puede ver los diferentes tipos de objetos de memoria, navegar y seleccionar los tipos que se van a usar para interpretar los valores. Muestra los valores ASCII directamente junto a los bytes y le permite seleccionar una endianidad diferente.

Panel Inspector de memoria

La herramienta Inspector de memoria proporciona una mayor capacidad que la herramienta Orígenes para inspeccionar ArrayBuffers al depurar. La vista Ámbito de la herramienta Orígenes muestra una lista de valores únicos dentro del búfer de matriz, lo que dificulta la visualización de todos los datos. Además, navegar a un intervalo determinado dentro del búfer requiere desplazarse a un índice específico y los valores siempre se muestran como un solo byte, incluso si desea verlos en otro formato, como enteros de 32 bits.

El panel de ámbito de la herramienta Orígenes proporciona una capacidad limitada para inspeccionar la memoria.

Abrir el inspector de memoria durante la depuración

  1. Inicie Microsoft Edge.

  2. Abra el sitio de prueba Inspect ArrayBuffers in JS (Memory in JS).

  3. Abra DevTools presionando F12 o Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS).

  4. Haga clic en Orígenes y abra el demo-js.js archivo.

  5. Establezca un punto de interrupción en la línea 18 como se muestra en la siguiente imagen.

    El inspector de memoria establece el punto de interrupción en el archivo JavaScript

  6. Actualice la página web. No se puede mostrar porque JavaScript se detiene en el punto de interrupción.

  7. En el panel Derecho del depurador, en Ámbito, busque la buffer línea .

  8. Desde la buffer línea puede abrir el Inspector de memoria mediante uno de los métodos siguientes:

    • Haga clic en el icono del panel Mostrar en el inspector de memoria (icono del panel Mostrar en el inspector de memoria) al final de la buffer línea de propiedades, o

    • En el menú contextual. Haga clic con el botón derecho en la buffer propiedad y seleccione Mostrar en el panel Inspector de memoria.

    Abra el Inspector de memoria en el menú contextual de la línea de propiedades del búfer.

    Se abre ArrayBuffer de JavaScript en el Inspector de memoria.

    ArrayBuffer abierto en el panel Inspector de memoria

Inspección de varios objetos

Puede inspeccionar varios objetos al mismo tiempo, como DataView y TypedArray.

Con la página web de demostración en pausa en el punto de interrupción, el objeto b2 de la vista Ámbito es una typedArray. Haga clic con el botón derecho en el b2 objeto y seleccione Mostrar en el panel Inspector de memoria.

Se abre una nueva pestaña para el b2 objeto junto a la primera pestaña, que representa el objeto en el buffer Inspector de memoria.

Se abren dos pestañas ArrayBuffer en el panel Inspector de memoria

El panel Inspector de memoria incluye tres tipos de contenido:

Barra de navegación del panel Inspector de memoria

El cuadro de texto Escribir dirección muestra la dirección de bytes actual en formato hexadecimal. Puede cambiar el valor para ir a una nueva ubicación en el búfer de memoria. Haga clic en el cuadro de texto y cambie el valor a 0x00000008. El búfer de memoria salta inmediatamente a esa dirección de bytes.

Los búferes de memoria pueden tener más de una página. Use los botones de flecha izquierda y derecha para navegar por las páginas Anterior (<) y Siguiente (>), respectivamente. Si solo hay una página de datos de búfer de memoria, las flechas le llevarán al principio y al final de la página.

Use las flechas del historial de la izquierda para Volver en el historial de direcciones (Volver en el historial de direcciones) y Avance en el historial de direcciones (Avance en el historial de direcciones).

Si el búfer de memoria no se actualiza automáticamente al recorrer los valores paso a paso, haga clic en Actualizar (actualización del búfer de memoria).

Búfer de memoria

Búfer de memoria del panel Inspector de memoria

Al leer desde el lado izquierdo del panel, la dirección se muestra en formato hexadecimal. La dirección seleccionada actualmente está en negrita.

La memoria también se muestra en formato hexadecimal, cada byte separado por un espacio. El byte seleccionado actualmente está resaltado. Puede hacer clic en cualquier byte o navegar con las teclas de flecha (izquierda, derecha, arriba y abajo).

La representación ASCII de la memoria se muestra en el lado derecho del panel. El carácter resaltado corresponde al byte seleccionado. Puede hacer clic en cualquier carácter o navegar con las teclas de flecha (izquierda, derecha, arriba y abajo).

Inspector de valores

Inspector de memoria inspector de valores del panel

Haga clic en el tipo endian actual para cambiar entre Big endian y Little endian.

El área principal muestra cada valor e interpretación en función de la configuración. De forma predeterminada, se muestran todos los valores.

Haga clic en Alternar configuración de tipo de valor (Alternar configuración de tipo de valor) para seleccionar qué tipos de valor se verán en el inspector. Se convierte en la nueva configuración de tipo de valor predeterminado.

Configuración del tipo de valor

Puede cambiar la vista de codificación mediante la lista desplegable. En el caso de los enteros, puede elegir entre decimal dec, hexadecimal hexy octal oct. En el caso de los floats, puede elegir entre notación dec decimal y notación scicientífica.

Inspeccionar la memoria

Complete los pasos siguientes para depurar una página web en el Inspector de memoria.

  1. En la barra de navegación , cambie la dirección a 0x00000027.

  2. Vea la representación ASCII y las interpretaciones de valores. Todos los valores deben ser cero o vacíos.

    Cambio de dirección del Inspector de memoria

  3. Haga clic en Reanudar ejecución de script (Reanudar ejecución de script) o presione F8 o Ctrl +\ para recorrer el código.

    Se actualizan la representación ASCII y las interpretaciones de valores.

    Valores de dirección del Inspector de memoria actualizados

  4. Haga clic en el botón Saltar a dirección (botón Saltar a dirección) para Puntero de 32 bits o Puntero de 64 bits según sea necesario para ir a la siguiente dirección de memoria activa. Si la siguiente dirección de memoria no está disponible, el botón está desactivado (Dirección fuera del intervalo de memoria) con la información sobre herramientas Dirección fuera del intervalo de memoria.

  5. Personalice el inspector de valores para mostrar solo los valores de punto flotante. Haga clic en Toggle value type settings (Toggle value type settings gray) (Alternar configuración de tipo de valor en gris) y desactive todas las casillas excepto los dos valores de punto flotante .

    Valor de la configuración de tipo float

  6. Haga clic en Alternar configuración de tipo de valor (alternar configuración de tipo de valor azul) para cerrar la configuración del tipo de valor.

  7. Use las listas desplegables para cambiar la codificación de dec a sci. Se actualizan las representaciones de valor.

    Vista actualizada de los valores de dirección del Inspector de memoria

  8. Explore el búfer de memoria mediante el teclado o la barra de navegación.

  9. Repita los pasos 3 y 4 para observar los cambios de valor.

Inspección de memoria de WebAssembly

Para la inspección de memoria de WebAssembly (Wasm), el proceso es similar a inspeccionar la memoria de JavaScript.

  1. Abra el sitio de prueba de Wasm Inspect Wasm memories (Memory in Wasm).

  2. Abra DevTools presionando F12 o Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS).

  3. Haga clic en Orígenes y abra el memory-write.wasm archivo.

  4. Establezca un punto de interrupción en la primera línea del bucle, valor hexadecimal 0x03c.

  5. Actualice la página.

  6. En el panel del depurador, en Ámbito, expanda el módulo.

    El inspector de memoria establece el punto de interrupción en el archivo Wasm

  7. Haga clic en el icono del panel Mostrar en el inspector de memoria (icono del panel Mostrar en el inspector de memoria) al final de la $imports.memory línea de propiedades.

    Se abre el objeto ArrayBuffer de Wasm en el Inspector de memoria.

    Wasm del panel Inspector de memoria

Nota

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y es creada por Kim-Anh Tran.

Licencia de Creative Commons Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.