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

Jecelyn Yeen

Twitter GitHub Página inicial

Sofia Emelianova

GitHub

Observação:o painel Memory Inspector está disponível desde o Chrome 91. Confira sua versão em chrome://version/.

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

Abrir o Memory Inspector

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

Abrir a partir do menu

1. Abra o DevTools.
2. Clique em More Options > More tools > Memory Inspector.

Abrir durante a depuração

1. Abra uma página com JavaScript ArrayBuffer. Usaremos 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 Scope no painel Debugger à direita.

6. Abra o Inspetor de memória:

   • No ícone. Clique 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 Reveal in Memory Inspector panel.

   

Inspecionar vários objetos

1. Também é possível 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 Reveal in Memory Inspector panel (ainda sem ícone para TypedArray ou DataView).
2. Uma nova guia será aberta no Inspetor de memória. É 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 no formato hexadecimal. Você pode inserir um novo valor para ir para um novo local no buffer de memória. Por exemplo, tente digitar 0x00000008.
2. Os buffers de memória podem ser mais longos do 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 seja, 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 é exibido no formato hexadecimal.
2. A memória também é mostrada no formato hexadecimal, cada byte separado por um espaço. O byte selecionado no momento é destacado. Você pode clicar no byte ou navegar com o teclado (esquerda, direita, para cima ou para 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, para cima ou para baixo).

Inspetor de valor

1. Uma barra de ferramentas na parte de cima tem um botão para alternar entre as opções big e small, além de abrir as configurações. Abra as configurações para selecionar os tipos de valor que serão mostrados por padrão no inspetor.
2. A área principal mostra todas as interpretações de valores de acordo com as configurações. Por padrão, todos são mostrados.
3. A codificação é clicável. Você pode alternar entre dec, hex, oct para número inteiro e sci, 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 valores. Todos os valores estão em branco 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 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. Observe que 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 configurações e marque apenas as opções Float 32-bit e Float 64-bit.
8. Vamos alterar a codificação de dec para sci. Observe que as representações de valor são atualizadas adequadamente.
9. Tente navegar no 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 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:

• usar o Chrome 107 ou mais recente; Confira sua versão em chrome://version/.
• Instale a extensão C/C++ DevTools Support (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.

Observação:no Chrome 107 e versões mais recentes, o Memory Inspector destaca todos os bytes de um objeto de memória C/C++. Isso permite que você os diferencie da memória ao redor.

Para interromper o destaque da 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:

• Extensão do Memory Inspector para depuração C/C++
• Como depurar o WebAssembly com ferramentas modernas (em inglês).