Inspecionar um JavaScript ArrayBuffer 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 endianidade diferente.

A ferramenta Inspetor de Memória fornece maior capacidade do que a ferramenta Sources para inspecionar ArrayBuffers ao depurar. A exibiçã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 para um determinado intervalo dentro do buffer exige que você role até um índice específico e os valores sejam sempre exibidos como um único byte, mesmo que você queira vê-los em outro formato, como inteiros de 32 bits.

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

1. Inicie o Microsoft Edge.

2. Abra o site de teste Inspecionar ArrayBuffers no JS (Memória no JS).

3. Abra 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 faz uma pausa no ponto de interrupção.

7. No painel de depurador direito 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 Revelar no Inspetor de Memória () no final da buffer linha de 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 JavaScript ArrayBuffer é 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 valores

Barra de navegação

A caixa de texto Inserir endereço mostra o endereço de byte atual no formato hex. 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 imediatamente salta 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 na página Anterior (<) e na próxima página (>), respectivamente. Se houver apenas uma página de dados de buffer de memória, as setas o levarão para o início e o final da página.

Use as setas de histórico de 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 passar pelos valores, clique em Atualizar ().

Buffer de memória

Lendo do lado esquerdo do painel, o endereço é exibido no formato hex. O endereço selecionado atualmente é em negrito.

A memória também é mostrada no formato hex, 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 valores

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

A área main 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 serão exibidos no inspetor. Isso 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 inteiros, você pode escolher entre decimais 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. Exiba 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 passar pelo código.

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

   

4. Clique no botão Pular para endereçar () para Ponteiro de 32 bits ou Ponteiro de 64 bits , conforme necessário para saltar 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 será desativado () com o endereço da dica de ferramenta fora do intervalo de memória.

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

   

6. Clique em Alternar configurações de 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 inspeção de memória de Wasm (WebAssembly), o processo é semelhante à inspeção da memória JavaScript.

1. Abra o site de teste Wasm Inspecione memórias wasm (Memória em Wasm).

2. Abra 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, 0x03c de valor hexadecimal.

5. Atualize a página.

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

   

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

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

   

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Kim-Anh Tran (Chrome DevTools).

Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.