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

Sofia Emelianova
Sofia Emelianova

Use o 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++.

Visão geral

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

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 > Mais ferramentas > Inspetor de memória. Menu do 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.

    Revelar o painel do Inspetor de memória

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. Nova guia no Inspetor de memória

Inspetor de memória

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

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

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. botão da barra de ferramentas
  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. Você pode alternar entre dec, hexadecimal e outubro para número inteiro e sci e dec para flutuações. Chave de codificação

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. 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 do Pointer 32-bit e do 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. Botão "Ir para endereço"
  5. Clique em Retomar execução do script para analisar o código. Retomar a execução do script
  6. A representação ASCII foi atualizada. Todas as interpretações de valor também são atualizadas. Todas as interpretações de valor 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. configurações para personalizar o inspetor de valor
  8. Vamos mudar a codificação de dec para sci. Observe que as representações de valor são atualizadas de acordo. Altere a codificação.
  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 plug-in serve 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 Revelar no Inspetor de memória. 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.

A matriz x aberta no Inspetor de memória.

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.

Pare de destacar a memória do objeto.

Para saber mais, veja: