Jecelyn Yeen
Sofia Emelianova
Utilizza il nuovo strumento di ispezione della memoria per ispezionare la memoria di ArrayBuffer, TypedArray e DataView in JavaScript, nonché la memoria di WebAssembly.Memory delle applicazioni Wasm scritte in C++.
Apri Controllo memoria
Esistono diversi modi per aprire Memory Inspector.
Apri dal menu
- Apri DevTools.
- Fai clic su Altre opzioni
> Altri strumenti > Memory Inspector.
Apri durante il debug
- Apri una pagina con JavaScript
ArrayBuffer. Utilizzeremo questa pagina demo. - Apri DevTools.
- Apri il file demo-js.js nel riquadro Origini e imposta un punto di interruzione alla riga 18.
- Aggiorna la pagina.
- Espandi la sezione Ambito nel riquadro Debugger a destra.
Puoi aprire Memory Inspector:
- Dall'icona. Facendo clic sull'icona accanto alla proprietà
bufferoppure - Dal menu contestuale. Fai clic con il tasto destro del mouse sulla proprietà
buffere seleziona Mostra nel riquadro Controllo memoria.
- Dall'icona. Facendo clic sull'icona accanto alla proprietà
Ispeziona più oggetti
- Puoi anche esaminare DataView o TypedArray. Ad esempio,
b2è unTypedArray. Per ispezionarla, fai clic con il tasto destro del mouse sulla proprietàb2e seleziona Mostra nel riquadro Controllo memoria (nessuna icona perTypedArrayoDataViewancora). - Nello strumento Memory Inspector viene aperta una nuova scheda. Tieni presente che puoi esaminare più oggetti contemporaneamente.
Memory Inspector
Lo strumento Memory Inspector è costituito da tre aree principali:
Barra di navigazione
- L'input dell'indirizzo mostra l'indirizzo in 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. - I buffer di memoria potrebbero essere più lunghi di una pagina. Anziché scorrere, puoi utilizzare i pulsanti sinistra e destra per la navigazione.
- I pulsanti a sinistra consentono di spostarsi in avanti/all'indietro.
- Per impostazione predefinita, il buffer viene aggiornato automaticamente al passo con i passi. In caso contrario, il pulsante di aggiornamento consente di aggiornare la memoria e aggiornare i relativi contenuti.
Buffer di memoria
- A sinistra, l'indirizzo viene visualizzato in formato esadecimale.
- Anche la memoria viene mostrata 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ù).
- Una rappresentazione ASCII della memoria è mostrata sul lato destro. Un'evidenziazione mostra il valore corrispondente ai bit selezionati nel byte. Come con la memoria, puoi fare clic sul byte o spostarti con la tastiera (sinistra, destra, su, giù).
Controllo valore
- La barra degli strumenti in alto è dotata di un pulsante per passare da big a small endian e per aprire le impostazioni. Apri le impostazioni per selezionare i tipi di valori da visualizzare per impostazione predefinita nello strumento di controllo.
- L'area principale mostra tutte le interpretazioni dei valori secondo le impostazioni. Per impostazione predefinita, sono visualizzati tutti.
- La codifica è cliccabile. Puoi spostarti tra dec, esadecimale, ott per il numero intero e sci e dec per i numeri in virgola mobile.
Ispezione della memoria
Esaminiamo la memoria insieme.
- Segui questi passaggi per avviare il debug.
- Modifica l'indirizzo in
0x00000027nel input dell'indirizzo.
- Osserva la rappresentazione ASCII e le interpretazioni dei valori. Al momento tutti i valori sono vuoti.
- Osserva il pulsante blu Passa all'indirizzo accanto a
Pointer 32-bitePointer 64-bit. Puoi farci clic sopra per passare all'indirizzo. I pulsanti non sono selezionabili e non possono essere selezionati se gli indirizzi non sono validi.
- Fai clic su Riprendi l'esecuzione dello script per visualizzare il codice.
- Come puoi notare, la rappresentazione ASCII è ora aggiornata. Vengono aggiornate anche tutte le interpretazioni dei valori.
- Personalizza lo strumento di controllo dei valori in modo che mostri solo il punto mobile. Fai clic sul pulsante Impostazioni e seleziona solo Virgola mobile a 32 bit e Virgola mobile a 64 bit.
- Cambiamo la codifica da
decasci. Osserva che le rappresentazioni dei valori vengono aggiornate di conseguenza.
- Prova a spostarti nel buffer di memoria con la tastiera o con la barra di navigazione. Ripeti il passaggio 4 per osservare le modifiche dei valori.
Ispezione della memoria WebAssembly
L'oggetto WebAssembly.Memory è un ArrayBuffer che contiene i byte non elaborati della memoria degli oggetti. Il riquadro Controllo memoria consente di esaminare questi oggetti nelle applicazioni Wasm scritte in C++.
Per sfruttare appieno l'ispezione di WebAssembly.Memory:
- Utilizzi Chrome 107 o versioni successive. Controlla la tua versione all'indirizzo
chrome://version/. - Installa l'estensione C/C++ DevTools Support (DWARF). Plug-in per il debug delle applicazioni WebAssembly C/C++ mediante informazioni di debug DWARF.
Per esaminare WebAssembly.Memory di un oggetto:
- Apri DevTools in questa pagina demo.
- Nel riquadro Origini, apri
demo-cpp.cce imposta un punto di interruzione nella funzionemain()alla riga 15:x[i] = n - i - 1;. - Ricarica la pagina per eseguire l'applicazione. Il debugger si ferma in corrispondenza del punto di interruzione.
- Nel riquadro Debugger, espandi Ambito > Locale.
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 ulteriori informazioni, vedi: