Inspecionar um ArrayBuffer do JavaScript usando o Inspetor de memória

Use o Inspetor de memória para exibir e interagir com os seguintes tipos de objetos:

• ArrayBuffer
• TypedArray
• DataView
• Memória WebAssembly (Wasm)

Usando o Inspetor de memória , você pode exibir os diferentes tipos de objetos de memória, navegar e selecionar os tipos a serem usados para interpretar os valores. Ele mostra os valores ASCII diretamente ao lado dos bytes e permite que você selecione diferentes endianness.

A ferramenta Inspetor de memória fornece maior capacidade de inspeção ArrayBuffers do que a ferramenta Fontes durante a depuração. A visualização Escopo na ferramenta Fontes exibe uma lista de valores únicos dentro do buffer da matriz, o que dificulta a visualização de todos os dados. Além disso, navegar até um determinado intervalo dentro do buffer exige que você role até um índice específico e os valores são sempre exibidos como um único byte, mesmo que você queira vê-los em outro formato, como inteiros de 32 bits.

Abrir o inspetor de memória durante a depuração

Por exemplo:

1. Inicie o Microsoft Edge.

2. Abra o site de teste Inspecione ArrayBuffers em JS (Memória em JS) (http://memory-inspector.glitch.me/demo-js.html) (404). (Glitch.me hospedagem do projeto terminou em 8 de julho de 2025. Este site de teste está planejado para ser transferido para https://github.com/MicrosoftEdge/Demos, incluindo hospedagem em github.io.)

3. Abra o DevTools pressionando F12 ou Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).

4. Clique em Fontes e abra o demo-js.js arquivo.

5. Defina um ponto de interrupção na linha 18 , conforme mostrado na imagem a seguir.

   

6. Atualize a página da Web. Ele não é exibido porque o JavaScript pausa no ponto de interrupção.

7. No painel direito Depurador em Escopo, localize a buffer linha.

8. Na linha, você pode abrir o buffer Inspetor de memória usando um dos seguintes métodos:

   • Clique no ícone do painel inspetor Revelar na memória () no final da linha de buffer propriedade ou

   • No menu de contexto. Clique com o botão direito do mouse na buffer propriedade e selecione Revelar no painel Inspetor de memória.

   

   O ArrayBuffer do JavaScript é aberto no Inspetor de memória.

   

Inspecionar vários objetos

Você pode inspecionar vários objetos ao mesmo tempo, como DataView e TypedArray.

Com a página da Web de demonstração pausada no ponto de interrupção, o objeto b2 na exibição Escopo é um TypedArray. Clique com o botão direito do mouse no b2 objeto e selecione Revelar no painel Inspetor de memória

Uma nova guia para o b2 objeto é aberta ao lado da primeira guia, que representa o buffer objeto no Inspetor de memória.

Navegando no Inspetor de memória

O painel Inspetor de memória inclui três tipos de conteúdo:

• Barra de navegação
• Buffer de memória
• Inspetor de valor

Barra de navegação

A caixa de texto Inserir endereço mostra o endereço de byte atual no formato hexadecimal. Você pode alterar o valor para saltar para um novo local no buffer de memória. Clique na caixa de texto e altere o valor para 0x00000008. O buffer de memória salta imediatamente para esse endereço de byte.

Os buffers de memória podem ter mais de uma página. Use os botões de seta para a esquerda e para a direita para navegar pela página anterior (<) e pela próxima página (>), respectivamente. Se houver apenas uma página de dados do buffer de memória, as setas o levarão ao início e ao fim da página.

Use as setas do histórico da extrema esquerda para Voltar no histórico de endereços () e Avançar no histórico de endereços ().

Se o buffer de memória não for atualizado automaticamente ao percorrer os valores, clique em Atualizar ().

Buffer de memória

Lendo do lado esquerdo do painel, o endereço é exibido em formato hexadecimal. O endereço selecionado no momento está em negrito.

A memória também é mostrada no formato hexadecimal, cada byte separado por um espaço. O byte selecionado no momento é realçado. Você pode clicar em qualquer byte ou navegar usando as teclas de seta (esquerda, direita, para cima e para baixo).

A representação ASCII da memória é mostrada no lado direito do painel. O caractere realçado corresponde ao byte selecionado. Você pode clicar em qualquer caractere ou navegar usando as teclas de seta (esquerda, direita, para cima e para baixo).

Inspetor de valor

Clique no tipo Endian atual para alternar entre Big endian e Little endian.

A área principal mostra cada valor e interpretação com base nas configurações. Por padrão, todos os valores são mostrados.

Clique em Alternar configurações de tipo de valor () para selecionar quais tipos de valor ver no inspetor. Essa se torna a nova configuração de tipo de valor padrão.

Você pode alterar a exibição de codificação usando a lista suspensa. Para números inteiros, você pode escolher entre decimal dec, hexadecimal hexe octal oct. Para floats, você pode escolher entre notação dec decimal e notação scicientífica .

Inspecionando a memória

Conclua as etapas a seguir para depurar uma página da Web no Inspetor de memória.

1. Na barra de navegação , altere o endereço para 0x00000027.

2. Exibir a representação ASCII e as interpretações de valor. Todos os valores devem ser zero ou vazios.

   

3. Clique em Retomar execução de script () ou pressione F8 ou Ctrl +\ para percorrer o código.

   A representação ASCII e as interpretações de valor são atualizadas.

   

4. Clique no botão Ir para endereço () para Ponteiro de 32 bits ou Ponteiro de 64 bits , conforme necessário, para ir para o próximo endereço de memória ativa. Se o próximo endereço de memória não estiver disponível, o botão é desligado () com a dica de ferramenta Intervalo de endereços fora da memória.

5. Personalize o inspetor Valor para mostrar apenas valores de ponto flutuante. Clique em Alternar configurações de tipo de valor () e desmarque todas as caixas de seleção, exceto os dois valores de Ponto flutuante .

   

6. Clique em Alternar configurações do tipo de valor () para fechar as configurações do tipo de valor.

7. Use as listas suspensas para alterar a codificação de dec para sci. As representações de valor são atualizadas.

   

8. Explore o buffer de memória usando o teclado ou a barra de navegação.

9. Repita as etapas 3 e 4 para observar as alterações de valor.

Inspeção de memória WebAssembly

Para a inspeção de memória WebAssembly (Wasm), o processo é semelhante à inspeção da memória JavaScript.

Por exemplo:

1. Abrir o site de teste Inspecionar memórias Wasm (Memória em Wasm) (http://memory-inspector.glitch.me/demo-wasm.html) (404). (Glitch.me hospedagem do projeto terminou em 8 de julho de 2025. Este site de teste está planejado para ser transferido para https://github.com/MicrosoftEdge/Demos, incluindo hospedagem em github.io.)

2. Abra o DevTools pressionando F12 ou Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).

3. Clique em Fontes e abra o memory-write.wasm arquivo.

4. Defina um ponto de interrupção na primeira linha do loop, valor hexadecimal 0x03c.

5. Atualize a página.

6. No painel depurador em Escopo, expanda o Módulo.

   

7. Clique no ícone do painel inspetor Revelar na memória () no final da linha de $imports.memory propriedade.

   O Wasm ArrayBuffer é aberto no Inspetor de memória.

   

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.