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

Jecelyn Yeen

Sofia Emelianova

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

Visão geral

O Memory Inspector organiza o conteúdo da memória e ajuda a navegar rapidamente por matrizes grandes. É possível conferir os valores ASCII do conteúdo da memória ao lado dos bytes e selecionar diferentes endianidades. Use o Memory Inspector enquanto depura seu app da Web para ter um fluxo de trabalho eficiente.

Abrir o Memory Inspector

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

Abrir no 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 Sources e defina um ponto de interrupção na linha 18.
4. Atualize a página.
5. Expanda a seção Escopo no painel Desenvolvedor de depuração à direita.

6. É possível abrir o Inspetor de memória:

   • Pelo ícone. Clicando no ícone ao lado da propriedade buffer ou
   • No menu de contexto. Clique com o botão direito do mouse na propriedade buffer e selecione Revelar no painel do Memory Inspector.

   

Inspecionar vários objetos

1. Você também pode inspecionar DataView ou TypedArray. Por exemplo, b2 é um TypedArray. Para inspecionar isso, clique com o botão direito do mouse na propriedade b2 e selecione Revelar no painel do Memory Inspector (ainda não há ícone para TypedArray ou DataView).
2. Uma nova guia é aberta no Memory inspector. Você pode inspecionar vários objetos de uma vez.

O Memory Inspector

O Memory Inspector é composto por três áreas principais:

Barra de navegação

1. A entrada de endereço mostra o endereço de byte atual no formato hexadecimal. Você pode inserir um novo valor para pular para um novo local no buffer de memória. Por exemplo, digite 0x00000008.
2. Os buffers de memória podem ser maiores que uma página. Em vez de rolar, 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 avançar. Caso contrário, o botão Atualizar oferece a opção de atualizar a memória e o conteúdo.

Buffer de memória

1. À esquerda, o endereço é mostrado no formato hexadecimal.
2. A memória também é mostrada em formato hexadecimal, com cada byte separado por um espaço. O byte selecionado é destacado. Você pode clicar no byte ou navegar com o teclado (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 (esquerda, direita, cima, baixo).

Inspetor de valor

1. Uma barra de ferramentas na parte de cima tem um botão para alternar entre endian grande e pequeno e abrir as configurações. Abra as configurações para selecionar quais tipos de valor 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, todos são mostrados.
3. A codificação é clicável. É possível alternar entre dec, hex, oct para números inteiros e sci, dec para números de ponto flutuante.

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 o endereço ao lado de Pointer 32-bit e Pointer 64-bit. Clique nele para ir até o endereço. Os botões ficam esmaecidos e não podem ser clicados se os endereços não forem válidos.
5. Clique em Retomar execução de script para percorrer o código.
6. A representação ASCII agora está atualizada. Todas as interpretações de valor também são atualizadas.
7. Vamos personalizar o Inspetor de valor para mostrar apenas ponto flutuante. Clique no botão settings e marque apenas 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 de acordo.
9. Tente navegar pelo buffer de memória com o teclado ou usando a barra de navegação. Repita a etapa 4 para observar as mudanças nos valores.

Inspeção de memória do WebAssembly

O objeto WebAssembly.Memory é um ArrayBuffer que armazena 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. Confira sua versão em chrome://version/.
• Instale a extensão C/C++ DevTools Support (DWARF). É um plug-in para depurar aplicativos C/C++ da WebAssembly usando informações de depuração DWARF.

Para inspecionar o WebAssembly.Memory de um objeto:

1. Abra o DevTools na página de demonstração.
2. No painel Origens, abra demo-cpp.cc e defina um ponto de interrupção na função main() na linha 15: x[i] = n - i - 1;.
3. Recarregue a página para executar o aplicativo. O depurador pausa no ponto de interrupção.
4. No painel Debugger, expanda Escopo > 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 Revelar no painel do Memory Inspector.

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

Para saber mais, veja:

• Como estender o Memory Inspector para depuração em C/C++
• Depurar o WebAssembly com ferramentas modernas.