Memory Inspector: inspecionar ArrayBuffer, TypedArray, DataView e Wasm Memory.

Jecelyn Yeen

Sofia Emelianova

Use o novo Inspetor de memória para inspecionar ArrayBuffer, TypedArray e DataView de memória no JavaScript, bem como WebAssembly.Memory de aplicativos Wasm escritos em C++.

Abrir o Inspetor de memória

Há algumas maneiras de abrir o Inspetor de memória.

Abrir a partir do menu

1. Abra o DevTools.
2. Clique em Mais opções > Mais ferramentas > Inspetor de memória.

Abrir durante a depuração

1. Abra uma página com JavaScript ArrayBuffer. Vamos usar esta página de demonstração.
2. Abra o DevTools.
3. Abra o arquivo demo-js.js no painel Origens e defina um ponto de interrupção na linha 18.
4. Atualize a página.
5. Expanda a seção Escopo no painel Depurador à direita.

6. Abra o Inspetor de memória:

   • Do ícone. Clique no ícone ao lado da propriedade buffer.
   • No menu de contexto. Clique com o botão direito do mouse na propriedade buffer e selecione Reveal in Memory Inspector panel.

   

Inspecionar vários objetos

1. Também é possível inspecionar o DataView ou o TypedArray. Por exemplo, b2 é um TypedArray. Para inspecionar isso, clique com o botão direito do mouse na propriedade b2 e selecione Reveal in Memory Inspector (ainda sem ícone para TypedArray ou DataView).
2. Uma nova guia será aberta no Inspetor de memória. Observe que é possível inspecionar vários objetos de uma vez.

Inspetor de memória

O Inspetor de memória consiste em três áreas principais:

Barra de navegação

1. A entrada de endereço mostra o endereço de byte atual em formato hexadecimal. Você pode inserir um novo valor para ir para um novo local no buffer de memória. Por exemplo, tente o tipo 0x00000008.
2. Os buffers de memória podem ser mais longos que uma página. Em vez de rolar a tela, use os botões esquerda e direita para navegar.
3. Os botões à esquerda permitem a navegação para frente/para trás.
4. Por padrão, o buffer é atualizado automaticamente ao caminhar. Caso não esteja, use o botão refresh para atualizar a memória e o conteúdo.

Buffer de memória

1. À esquerda, o endereço é exibido no formato hexadecimal.
2. A memória também é mostrada no formato hexadecimal, com cada byte separado por um espaço. O byte selecionado é destacado. Você pode clicar no byte ou navegar com o teclado (para a esquerda, direita, cima, baixo).
3. Uma representação ASCII da memória é mostrada no lado direito. Um destaque mostra o valor correspondente aos bits selecionados no byte. Assim como na memória, você pode clicar no byte ou navegar com o teclado (para a esquerda, direita, cima, baixo).

Inspetor de valor

1. Uma barra de ferramentas superior tem um botão para alternar entre big e small endian e abrir as configurações. Abra as configurações para selecionar quais tipos de valores eles querem ver por padrão no inspetor.
2. A área principal mostra todas as interpretações de valor de acordo com as configurações. Por padrão, todas são mostradas.
3. A codificação é clicável. É possível alternar entre dec, hexadecimal e outubro para números inteiros e sci, e dec para flutuações.

Como inspecionar a memória

Vamos inspecionar a memória juntos.

1. Siga estas etapas para iniciar a depuração.
2. Mude o endereço para 0x00000027 na entrada de endereço.
3. Observe a representação ASCII e as interpretações de valor. Todos os valores estão vazios no momento.
4. Observe o botão azul Ir para endereço ao lado de Pointer 32-bit e Pointer 64-bit. Você pode clicar nele para acessar o endereço. Os botões ficam esmaecidos e não são clicáveis se os endereços não são válidos.
5. Clique em Retomar execução do script para percorrer o código.
6. A representação ASCII foi atualizada. Todas as interpretações de valor também são atualizadas.
7. Vamos personalizar o Inspetor de valor para mostrar apenas o ponto flutuante. Clique no botão settings e marque somente Float 32-bit e Float 64-bit.
8. Vamos mudar a codificação de dec para sci. Observe que as representações de valor são atualizadas adequadamente.
9. Tente navegar pelo buffer de memória com o teclado ou a barra de navegação. Repita a etapa 4 para observar as mudanças de valores.

Inspeção de memória do WebAssembly

O objeto WebAssembly.Memory é um ArrayBuffer que contém os bytes brutos da memória do objeto. O painel Memory Inspector permite inspecionar esses objetos em aplicativos Wasm escritos em C++.

Para aproveitar ao máximo a inspeção WebAssembly.Memory:

• Use o Chrome 107 ou mais recente. Verifique sua versão em chrome://version/.
• Instale a extensão C/C++ DevTools (DWARF). Este é um plug-in para depurar aplicativos WebAssembly em C/C++ usando informações de depuração DWARF.

Para inspecionar o WebAssembly.Memory de um objeto:

1. Abra o DevTools nesta página de demonstração.
2. No painel Sources, abra demo-cpp.cc e defina um ponto de interrupção na função main() na linha 15: x[i] = n - i - 1;.
3. Atualize a página para executar o aplicativo. O depurador pausa no ponto de interrupção.
4. No painel Debugger, expanda Scope > Local.

5. Clique no ícone ao lado da matriz x: int[10].

   Como alternativa, clique com o botão direito do mouse na matriz e selecione Reveal in Memory Inspector panel.

Para parar de destacar a memória do objeto, no painel Memory Inspector, passe o cursor sobre o selo do objeto e clique no botão x.

Para saber mais, veja:

• Como estender o Inspetor de memória para depuração C/C++
• Como depurar o WebAssembly com ferramentas modernas (em inglês).