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

Jecelyn Yeen

Sofia Emelianova

Usa il nuovo Controllo memoria per ispezionare la memoria ArrayBuffer, TypedArray e DataView in JavaScript, nonché WebAssembly.Memory di applicazioni Wasm scritte in C++.

Apri Controllo memoria

Esistono alcuni modi per aprire la funzionalità Controllo memoria.

Apri dal menu

1. Apri DevTools.
2. Fai clic su Altre opzioni > Altri strumenti > 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.

   

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.

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

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 è 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

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.
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.

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.
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.
5. Fai clic su Riprendi l'esecuzione dello script per visualizzare i passaggi del codice.
6. Nota che la rappresentazione ASCII è stata aggiornata. Vengono aggiornate anche tutte le interpretazioni dei valori.
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.
8. Cambiamo la codifica da dec a sci. Nota che le rappresentazioni dei valori vengono aggiornate di conseguenza.
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 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.

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.

Per saperne di più, consulta:

• Estensione di Memory Inspector per il debug C/C++
• Eseguire il debug di WebAssembly con strumenti moderni.