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
- Abra o DevTools.
- Clique em More Options > More tools > Memory Inspector.
Abrir durante a depuração
- Abra uma página com JavaScript
ArrayBuffer
. Usaremos esta página de demonstração. - Abra o DevTools.
- Abra o arquivo demo-js.js no painel Origens e defina um ponto de interrupção na linha 18.
- Atualize a página.
- Expanda a seção Scope no painel Debugger à direita.
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.
- No ícone. Clique no ícone ao lado da propriedade
Inspecionar vários objetos
- Também é possível inspecionar DataView ou TypedArray. Por exemplo,
b2
é umTypedArray
. Para inspecionar isso, clique com o botão direito do mouse na propriedadeb2
e selecione Reveal in Memory Inspector panel (ainda sem ícone paraTypedArray
ouDataView
). - 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
- 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
. - 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.
- Os botões à esquerda permitem a navegação para frente/para trás.
- 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
- À esquerda, o endereço é exibido no formato hexadecimal.
- 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).
- 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
- 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.
- A área principal mostra todas as interpretações de valores de acordo com as configurações. Por padrão, todos são mostrados.
- 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.
- Siga estas etapas para iniciar a depuração.
- Mude o endereço para
0x00000027
na entrada de endereço. - Observe a representação ASCII e as interpretações de valores. Todos os valores estão em branco no momento.
- Observe o botão azul Ir para o endereço ao lado de
Pointer 32-bit
ePointer 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. - Clique em Retomar execução do script para percorrer o código.
- Observe que a representação ASCII foi atualizada. Todas as interpretações de valor também são atualizadas.
- 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.
- Vamos alterar a codificação de
dec
parasci
. Observe que as representações de valor são atualizadas adequadamente. - 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:
- Abra o DevTools nesta página de demonstração.
- No painel Sources, abra
demo-cpp.cc
e defina um ponto de interrupção na funçãomain()
na linha 15:x[i] = n - i - 1;
. - Atualize a página para executar o aplicativo. O depurador pausa no ponto de interrupção.
- No painel Debugger, expanda Scope > Local.
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 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: