Questo articolo illustra l'ispettore della memoria introdotto in Chrome 91. Ti consente di ispezionare ArrayBuffer, TypedArray, DataView e la memoria Wasm.
Introduzione
Hai mai voluto dare un senso ai dati nel tuo ArrayBuffer? Prima di Memory Inspector, DevTools consentiva solo informazioni limitate sugli ArrayBuffer. L'ispezione dalla visualizzazione Ambito durante una sessione di debug era limitata alla visualizzazione di un elenco di singoli valori all'interno dell'array buffer, il che rendeva difficile comprendere i dati nel loro complesso. Ad esempio, la visualizzazione Ambito mostra il buffer come intervalli espandibili di array nell'esempio seguente:
La navigazione a un determinato intervallo all'interno del buffer era un problema, in quanto l'utente doveva scorrere verso il basso per raggiungere l'indice. Tuttavia, anche se è facile passare a una posizione, questo modo di ispezionare i valori è complicato: è difficile capire il significato di questi numeri. In particolare, cosa succede se non devono essere interpretati come singoli byte, ma ad esempio come numeri interi a 32 bit?
Ispezione dei valori utilizzando lo strumento di controllo della memoria
Con Chrome 91 stiamo introducendo Memory Inspector, uno strumento per ispezionare gli array buffer. In precedenza potresti aver visto strumenti di ispezione della memoria per visualizzare i dati binari, che mostrano i contenuti binari in una griglia insieme ai relativi indirizzi e offrono diversi modi per interpretare i valori sottostanti. Ecco cosa offre lo strumento di controllo della memoria. Con lo strumento di ispezione della memoria ora puoi visualizzare i contenuti, esplorarli e selezionare i tipi da utilizzare per interpretare i valori disponibili. Mostra i valori ASCII direttamente accanto ai byte e consente all'utente di selezionare diversi endianness. Di seguito puoi vedere il Controllo memoria in azione:
Vuoi provare? Per scoprire come aprire Memory Inspector e visualizzare l'array buffer (o TypedArray, DataView o Wasm Memory) e ulteriori informazioni su come utilizzarlo, consulta la nostra documentazione su Memory Inspector. Prova questi esempi di giocattoli (per JS, Wasm e C++).
Progettazione di Controllo memoria
In questa parte daremo un'occhiata a come è progettato Memory Inspector utilizzando i componenti web e mostreremo uno degli obiettivi di progettazione che avevamo e come lo abbiamo implementato. Se vuoi saperne di più, dai un'occhiata alla nostra documentazione di progettazione per l'ispettore della memoria.
Potresti aver visto il nostro post del blog sulla migrazione a Web Components, in cui Jack ha pubblicato la nostra guida interna su come creare componenti dell'interfaccia utente utilizzando Web Components. La migrazione a Web Components ha coinciso con il nostro lavoro su Memory Inspector, perciò abbiamo deciso di provare il nuovo sistema. Di seguito è riportato un diagramma che mostra i componenti che abbiamo creato per creare Memory Inspector (tieni presente che internamente lo chiamiamo Linear Memory Inspector):
Il componente LinearMemoryInspector è il componente principale che combina i componenti secondari che costituiscono tutti gli elementi dell'ispezione della memoria. Fondamentalmente, prende un Uint8Array e un address e, a ogni modifica di uno dei due, propaga i dati ai relativi elementi secondari, il che attiva un nuovo rendering. LinearMemoryInspector stesso esegue il rendering di tre componenti secondari:
LinearMemoryViewer(che mostra i valori),LinearMemoryNavigator(consentendo la navigazione) eLinearMemoryValueInterpreter(che mostrano interpretazioni di tipo diverso dei dati sottostanti).
Quest'ultimo è a sua volta un componente principale che esegue il rendering di ValueInterpreterDisplay (che mostra i valori) e ValueInterpreterSettings (che seleziona i tipi da visualizzare).
Ciascun componente è progettato per rappresentare solo un piccolo componente dell'interfaccia utente, in modo che possa essere riutilizzato, se necessario. Ogni volta che vengono impostati nuovi dati su un componente, viene attivato un nuovo rendering che mostra la modifica riflessa nei dati impostati sul componente. Di seguito è riportato un esempio di flusso di lavoro con i nostri componenti, in cui l'utente sta modificando l'indirizzo nella barra degli indirizzi, il che attiva un aggiornamento impostando i nuovi dati, in questo caso l'indirizzo da visualizzare:
LinearMemoryInspector si aggiunge come ascoltatore su LinearMemoryNavigator. La funzione addressChanged deve essere attivata su un evento address-changed. Non appena l'utente modifica l'input dell'indirizzo, viene inviato l'evento sopra menzionato, in modo che venga chiamata la funzione addressChanged. Ora questa funzione salva l'indirizzo internamente e aggiorna i relativi componenti secondari utilizzando un set data(address, ..). I componenti secondari salvano l'indirizzo internamente e eseguono il rendering nuovamente delle visualizzazioni, mostrando i contenuti in quel determinato indirizzo.
Obiettivo del design: rendere le prestazioni e il consumo di memoria indipendenti dalla dimensione del buffer
Un aspetto che avevamo in mente durante la progettazione di Memory Inspector era che le prestazioni di Memory Inspector dovevano essere indipendenti dalle dimensioni del buffer.
Come hai visto nella parte precedente, il componente LinearMemoryInspector accetta un UInt8Array per visualizzare i valori. Allo stesso tempo, volevamo assicurarci che Memory Inspector non dovesse conservare tutti i dati, poiché ne mostra solo una parte (ad es. la memoria Wasm può essere grande fino a 4 GB e non vogliamo archiviare 4 GB in Memory Inspector).
Pertanto, per garantire che la velocità e il consumo di memoria di Memory Inspector siano indipendenti dal buffer effettivo che mostriamo, consentiamo al componente LinearMemoryInspector di conservare solo un intervallo parziale del buffer originale.
Affinché funzioni, LinearMemoryInspector deve prima accettare altri due argomenti: un memoryOffset e un outerMemoryLength. memoryOffset indica l'offset da cui inizia l'Uint8Array passato ed è necessario per visualizzare gli indirizzi dei dati corretti. outerMemoryLength è la lunghezza del buffer originale ed è necessaria per capire quale intervallo possiamo mostrare:
Con queste informazioni possiamo assicurarci di poter ancora visualizzare la stessa visualizzazione di prima (i contenuti intorno a address), senza disporre effettivamente di tutti i dati. Cosa fare se viene richiesto un indirizzo diverso, che rientra in un intervallo diverso? In questo caso, LinearMemoryInspector attiva un RequestMemoryEvent, che aggiorna l'intervallo corrente mantenuto. Di seguito è riportato un esempio:
In questo esempio, l'utente naviga nella pagina della memoria (l'ispettore della memoria utilizza il paging per mostrare blocchi di dati), che attiva un PageNavigationEvent, che a sua volta attiva un RequestMemoryEvent.
Questo evento avvia il recupero del nuovo intervallo, che viene poi propagato al componente LinearMemoryInspector tramite l'impostazione dei dati. Di conseguenza, mostriamo i dati appena recuperati.
Ah, e lo sapevi che… Puoi persino ispezionare la memoria nel codice Wasm e C/C++
L'ispettore della memoria non è disponibile solo per ArrayBuffers in JavaScript, ma può essere utilizzato anche per ispezionare la memoria Wasm e la memoria a cui fanno riferimento i riferimenti/i puntatori C/C++ (utilizzando la nostra estensione DWARF. Provaci se non l'hai ancora fatto. Consulta Eseguire il debug di WebAssembly con strumenti moderni qui. Un piccolo sguardo all'ispettore della memoria in azione per il debug nativo di C++ sul web:
Conclusione
Questo articolo ha presentato Memory Inspector e ha mostrato un'anteprima del suo design. Ci auguriamo che lo strumento di ispezione della memoria ti aiuti a capire cosa succede nel tuo ArrayBuffer :-). Se hai suggerimenti per migliorarlo, non esitare a contattarci e a segnalare un bug.
Scaricare i canali di anteprima
Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli utenti.
Contatta il team di Chrome DevTools
Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.
- Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
- Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
- Invia un tweet all'account @ChromeDevTools.
- Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.