Controllo memoria: ispeziona Arraybuffer, TypedArray, DataView e Wasm Memory.

Sofia Emelianova
Sofia Emelianova

Utilizza Memory Inspector per ispezionare la memoria ArrayBuffer, TypedArray e DataView in JavaScript, nonché WebAssembly.Memory di applicazioni Wasm scritte in C++.

Panoramica

La funzionalità Controllo memoria organizza i contenuti della memoria e consente di esplorare rapidamente gli array di grandi dimensioni. Puoi visualizzare i valori ASCII dei contenuti della memoria direttamente accanto ai byte e selezionare un livello di endianness diverso. Usa la Controllo memoria mentre esegui il debug dell'app web per un flusso di lavoro efficiente.

Apri Controllo memoria

Esistono alcuni modi per aprire la funzionalità Controllo memoria.

Apri dal menu

  1. Apri DevTools.
  2. Fai clic su Altre opzioni Altro > Altri strumenti > Controllo memoria. Menu Controllo memoria

Apri durante il debug

  1. Apri una pagina con JavaScript ArrayBuffer. Utilizzeremo questa pagina demo.
  2. Apri DevTools.
  3. Apri il file demo-js.js nel riquadro Origini e imposta un punto di interruzione alla riga 18.
  4. Aggiorna la pagina.
  5. Espandi la sezione Ambito nel riquadro Debugger a destra.
  6. Puoi aprire la funzionalità Controllo memoria:

    • Dall'icona. Fai clic sull'icona accanto alla proprietà buffer oppure
    • Dal menu contestuale. Fai clic con il tasto destro del mouse sulla proprietà buffer e seleziona Mostra nel riquadro Controllo memoria.

    Mostra nel riquadro Controllo memoria

Ispeziona più oggetti

  1. Puoi controllare anche DataView o TypedArray. Ad esempio, b2 è un TypedArray. Per controllarlo, fai clic con il tasto destro del mouse sulla proprietà b2 e seleziona Mostra nel riquadro Controllo memoria (ancora nessuna icona per TypedArray o DataView).
  2. Viene aperta una nuova scheda in Controllo memoria. Tieni presente che puoi ispezionare più oggetti contemporaneamente. Nuova scheda nella funzionalità Controllo memoria

Controllo memoria

Controllo memoria

Lo strumento Controllo memoria è costituito da tre aree principali:

Barra di navigazione

  1. L'input dell'indirizzo mostra l'indirizzo byte corrente in formato esadecimale. Puoi inserire un nuovo valore per passare a una nuova posizione nel buffer di memoria. Ad esempio, prova a digitare 0x00000008.
  2. I buffer di memoria potrebbero essere più lunghi di una pagina. Anziché scorrere, puoi utilizzare i pulsanti sinistra e destra per spostarti.
  3. I pulsanti a sinistra consentono la navigazione in avanti o all'indietro.
  4. Per impostazione predefinita, il buffer viene aggiornato automaticamente quando cammini. Se non lo è, il pulsante di aggiornamento ti offre la possibilità di aggiornare la memoria e i relativi contenuti.

Buffer di memoria

Buffer di memoria

  1. A sinistra, l'indirizzo viene visualizzato in formato esadecimale.
  2. Anche la memory viene mostrata in formato esadecimale, ogni byte è separato da uno spazio. Il byte attualmente selezionato viene evidenziato. Puoi fare clic sul byte o navigare con la tastiera (a sinistra, a destra, in alto, in basso).
  3. Sul lato destro è mostrata una rappresentazione ASCII della memoria. Un'evidenziazione mostra il valore corrispondente ai bit selezionati nel byte. Come per la memoria, puoi fare clic sul byte o navigare con la tastiera (a sinistra, a destra, in alto, in basso).

Controllo valore

Controllo valore

  1. Una barra degli strumenti in alto presenta un pulsante per passare dalla big a small endian alla viceversa e per aprire le impostazioni. Apri le impostazioni per selezionare i tipi di valori da visualizzare in base ai valori predefiniti nella finestra di ispezione. pulsante barra degli strumenti
  2. L'area principale mostra tutte le interpretazioni di valori in base alle impostazioni. Per impostazione predefinita, vengono mostrati tutti gli elementi.
  3. L'opzione encoding è cliccabile. Puoi scegliere tra dec, esadecimale, ott per i numeri interi e sci e dec per i numeri in virgola mobile. Opzione di codifica

Ispezione della memoria in corso...

Esaminiamo la memoria insieme.

  1. Segui questi passaggi per avviare il debug.
  2. Modifica l'indirizzo in 0x00000027 nell'input dell'indirizzo. input dell'indirizzo
  3. Osserva la rappresentazione ASCII e le interpretazioni dei valori. Al momento non tutti i valori sono vuoti.
  4. Nota il pulsante blu Vai all'indirizzo accanto a Pointer 32-bit e Pointer 64-bit. Puoi fare clic per passare all'indirizzo. I pulsanti non sono selezionabili e non sono cliccabili se gli indirizzi non sono validi. Pulsante Vai all'indirizzo
  5. Fai clic su Riprendi l'esecuzione dello script per seguire la procedura dettagliata. Riprendi esecuzione dello script
  6. Nota che la rappresentazione ASCII è stata aggiornata. Vengono aggiornate anche tutte le interpretazioni dei valori. Tutte le interpretazioni dei valori sono aggiornate
  7. Personalizziamo la Controllo valori in modo che mostri solo la rappresentazione in virgola mobile. Fai clic sul pulsante delle impostazioni e seleziona solo In virgola mobile a 32 bit e In virgola mobile a 64 bit. impostazioni per personalizzare la funzionalità di controllo dei valori
  8. Cambiamo la codifica da dec a sci. Nota che le rappresentazioni dei valori vengono aggiornate di conseguenza. Cambiare la codifica.
  9. Prova a spostarti nel buffer di memoria con la tastiera o la barra di navigazione. Ripeti il passaggio 4 per osservare le variazioni dei valori.

Ispezione della memoria di WebAssembly

L'oggetto WebAssembly.Memory è un ArrayBuffer che contiene i byte non elaborati della memoria dell'oggetto. Il riquadro Controllo memoria ti consente di ispezionare questi oggetti nelle applicazioni Wasm scritte in C++.

Per sfruttare appieno l'ispezione WebAssembly.Memory:

  • Utilizza Chrome 107 o versioni successive. Controlla la tua versione all'indirizzo chrome://version/.
  • Installa l'estensione C/C++ DevTools Support (DWARF). Questo è un plug-in per eseguire il debug delle applicazioni WebAssembly C/C++ utilizzando le informazioni di debug di DWARF.

Per ispezionare WebAssembly.Memory di un oggetto:

  1. Apri DevTools in questa pagina demo.
  2. Nel riquadro Origini, apri demo-cpp.cc e imposta un punto di interruzione nella funzione main() alla riga 15: x[i] = n - i - 1;.
  3. Ricarica la pagina per eseguire l'applicazione. Il debugger si mette in pausa in corrispondenza del punto di interruzione.
  4. Nel riquadro Debugger, espandi Ambito > Locale.
  5. Fai clic sull'icona Mostra in Controllo memoria. accanto all'array x: int[10].

    In alternativa, fai clic con il tasto destro del mouse sull'array e seleziona Mostra nel riquadro Controllo memoria.

L'array x aperto in Controllo memoria.

Per interrompere l'evidenziazione della memoria degli oggetti, nel riquadro Controllo memoria, passa il mouse sopra il badge dell'oggetto e fai clic sul pulsante x.

Interrompi l'evidenziazione della memoria degli oggetti.

Per saperne di più, consulta: