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

Jecelyn Yeen

Sofia Emelianova

Utilizza il Controllo memoria per controllare la memoria ArrayBuffer, TypedArray e DataView in JavaScript, nonché WebAssembly.Memory delle applicazioni Wasm scritte in C++.

Panoramica

L'strumento di ispezione della memoria organizza i contenuti della memoria e ti aiuta a spostarti rapidamente tra array di grandi dimensioni. Puoi visualizzare i valori ASCII dei contenuti della memoria direttamente accanto ai byte e selezionare un'endianness diversa. Utilizza lo strumento di controllo della memoria durante il debug dell'app web per un flusso di lavoro efficiente.

Aprire lo strumento di controllo della memoria

Esistono diversi modi per aprire il Controllo memoria.

Aprire dal menu

1. Apri DevTools.
2. Fai clic su Altre opzioni > Altri strumenti > Ispezione memoria.

Aprire 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, imposta un punto di interruzione nella riga 18.
4. Aggiorna la pagina.
5. Espandi la sezione Ambito nel riquadro Debugger a destra.

6. Puoi aprire il Controllo memoria:

   • Dall'icona. Facendo 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 dell'ispettore della memoria.

   

Ispeziona più oggetti

1. Puoi anche ispezionare DataView o TypedArray. Ad esempio, b2 è un TypedArray. Per esaminarla, fai clic con il tasto destro del mouse sulla proprietà b2 e seleziona Mostra nel riquadro dell'ispettore della memoria (non è ancora disponibile un'icona per TypedArray o DataView).
2. Viene aperta una nuova scheda nel Controllo memoria. Tieni presente che puoi ispezionare più oggetti contemporaneamente.

Controllo memoria

L'strumento di ispezione della memoria è costituito da tre aree principali:

Barra di navigazione

1. L'input indirizzo mostra l'indirizzo byte corrente in formato esadecimale. Puoi inserire un nuovo valore per passare a una nuova posizione nel buffer della memoria. Ad esempio, prova a digitare 0x00000008.
2. I buffer di memoria potrebbero essere più lunghi di una pagina. Anziché scorrere, puoi utilizzare i tasti sinistra e destra per spostarti.
3. I pulsanti a sinistra consentono di navigare avanti/indietro.
4. Per impostazione predefinita, il buffer viene aggiornato automaticamente durante il passaggio. In caso contrario, il pulsante Aggiorna 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. La memoria viene mostrata anche in formato esadecimale, con ogni byte separato da uno spazio. Il byte attualmente selezionato viene evidenziato. Puoi fare clic sul byte o spostarti con la tastiera (sinistra, destra, su, giù).
3. Sul lato destro viene visualizzata 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 spostarti con la tastiera (sinistra, destra, su, giù).

Controllo valori

1. Una barra degli strumenti in alto presenta un pulsante per passare da big a little endian e per aprire le impostazioni. Aprire le impostazioni per selezionare i tipi di valori da visualizzare per impostazione predefinita nell'inspector.
2. L'area principale mostra tutte le interpretazioni dei valori in base alle impostazioni. Per impostazione predefinita, vengono mostrate tutte.
3. La codifica è cliccabile. Puoi passare da dec, hex, oct per numeri interi e sci, dec per numeri in virgola mobile.

Ispezione della memoria

Esaminiamo insieme la memoria.

1. Per avviare il debug, segui questi passaggi.
2. Modifica l'indirizzo in 0x00000027 nell'input dell'indirizzo.
3. Osserva la rappresentazione ASCII e le interpretazioni dei valori. Al momento tutti i valori sono vuoti.
4. Notare il pulsante blu Vai all'indirizzo accanto a Pointer 32-bit e Pointer 64-bit. Puoi fare clic sull'indirizzo per passare direttamente alla pagina corrispondente. I pulsanti non sono selezionabili e non sono cliccabili se gli indirizzi non sono validi.
5. Fai clic su Riprendi esecuzione dello script per eseguire il codice passo passo.
6. Tieni presente che la rappresentazione ASCII è ora aggiornata. Vengono aggiornate anche tutte le interpretazioni dei valori.
7. Personalizziamo l'strumento di ispezione dei valori in modo che mostri solo i valori in virgola mobile. Fai clic sul pulsante Impostazioni e seleziona solo Formato a virgola mobile in doppia precisione 32 bit e Formato a virgola mobile in doppia precisione 64 bit.
8. Cambiamo la codifica da dec a sci. Tieni presente che le rappresentazioni dei valori vengono aggiornate di conseguenza.
9. Prova a navigare nel buffer della memoria con la tastiera o utilizzando la barra di navigazione. Ripeti il passaggio 4 per osservare le modifiche ai 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 al meglio l'ispezione WebAssembly.Memory:

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

Per ispezionare il WebAssembly.Memory di un oggetto:

1. Apri DevTools in questa pagina dimostrativa.
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 ferma al 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 dell'ispettore della memoria.

Per interrompere l'evidenziazione della memoria dell'oggetto, passa il mouse sopra il badge dell'oggetto nel riquadro Memory Inspector (Esamina memoria) e fai clic sul pulsante x.

Per scoprire di più, consulta:

• Estensione di Controllo memoria per il debug C/C++
• Eseguire il debug di WebAssembly con strumenti moderni.