Il riquadro Profilo JavaScript non sarà più disponibile in Chrome 124. In futuro, utilizza il riquadro Prestazioni per profilare le prestazioni della CPU Node.js.
Perché stiamo ritirando JavaScript Profiler? (JS Profiler)
Già nel Chrome 58, il team DevTools aveva pianificato il ritiro di JS Profiler. I motivi sono diversi:
- Non è più in fase di sviluppo attivo. JS Profiler non ha ricevuto aggiornamenti importanti da diversi anni e il team non dispone delle risorse per continuare a svilupparlo.
- Un'esperienza di profilazione più semplificata. Il riquadro Prestazioni è già utilizzato per tutti i tipi di analisi delle prestazioni e, con la sua capacità di profilare le prestazioni della CPU JavaScript in Node.js, ha senso consolidare tutto in un unico posto per coerenza ed efficienza.
- Il riquadro Rendimento è migliore. Continuiamo a migliorarlo aggiungendo nuove funzionalità e miglioramenti, rendendolo uno strumento più potente e facile da usare per l'analisi del rendimento.
Cosa devi fare dopo il ritiro?
Per scoprire di più su come profilare le prestazioni della CPU JavaScript, consulta l'articolo sulle prestazioni di Node.js del profilo.
Ecco alcuni suggerimenti per l'utilizzo del riquadro Rendimento:
- Utilizza il grafico a fiamme per identificare i colli di bottiglia delle prestazioni.
- Utilizza le schede Dal basso verso l'alto e Struttura ad albero delle chiamate per comprendere le relazioni tra le funzioni.
Come gestiamo il ritiro?
Abbiamo sviluppato un prototipo e pubblicato pubblicamente su GitHub la richiesta Request for Comments (RFC) (Richiesta di commenti) per chiedere feedback agli sviluppatori.
Inoltre, contattiamo attivamente gli esperti degli sviluppatori per testare il prototipo, risolvendo eventuali dubbi o problemi al fine di garantire che il riquadro Rendimento soddisfi le principali esigenze di profilazione.
Stiamo gradualmente eliminando JS Profiler in 4 fasi per dare agli sviluppatori il tempo necessario per adattarsi e adottare.
Problemi principali e come li abbiamo risolti
Tra i feedback ricevuti, le preoccupazioni più pressanti si sono concentrate su tre questioni principali:
- Supporto del formato file
.cpuprofile. JS Profiler utilizza un formato file diverso. Il riquadro Rendimento dovrebbe supportarlo. - Bassa velocità di caricamento. La velocità di caricamento del pannello sembrava lenta e interferisce con il processo di profilazione.
- Selettore VM JavaScript mancante. L'assenza di un selettore di istanze VM JavaScript ha limitato le funzionalità di profilazione in determinati scenari.
Diamo un'occhiata a ciascuno di questi problemi e vediamo come li abbiamo risolti.
Velocità di caricamento bassa
Gli sviluppatori ci hanno comunicato che il riquadro Prestazioni impiegava troppo tempo per caricare file di dati di grandi dimensioni e a volte si arrestava in modo anomalo.
Abbiamo utilizzato DevTools per analizzare DevTools (che chiamiamo "DevTools-on-DevTools"). Abbiamo rilevato dei problemi e apportato diverse ottimizzazioni:
Setsostituito conArraystrutture dati.- Sono state rimosse le strutture dati
Mapnon necessarie. - Refactoring delle funzioni ricorsive in iterative (per i loop) per ridurre l'utilizzo dello stack di memoria.
Risolvendo questi colli di bottiglia, abbiamo velocizzato il caricamento dei file di grandi dimensioni dell'80%. 🎉
Per saperne di più su ciò che abbiamo imparato, leggi questo post del blog: Un riquadro delle prestazioni più rapido del 400% grazie alla percezione.
Selettore VM JavaScript mancante
Nel prototipo iniziale mancava il selettore VM JavaScript. Gli sviluppatori lo usano per visualizzare in dettaglio e concentrarsi sull'analisi di una specifica istanza VM.
Ora abbiamo aggiunto un selettore di VM JavaScript al riquadro Prestazioni. Mostra un elenco a discesa di tutte le istanze VM JavaScript disponibili. Quando selezioni un'istanza, il riquadro Prestazioni carica il profilo CPU per quell'istanza specifica.
Supporto del formato file cpuprofile
In precedenza, il riquadro Prestazioni supportava solo file di traccia, ovvero file JSON con un array di eventi di traccia.
D'altra parte, JS Profiler supportava i profili CPU, che sono file con l'estensione .cpuprofile che contengono un oggetto JSON. Sono simili ai seguenti:
{
// The list of profile nodes. First item is the root node.
nodes: ProfileNode[];
// Profiling start timestamp in microseconds.
startTime: number;
// Profiling end timestamp in microseconds.
endTime: number;
// Ids of samples at top nodes.
samples?: integer[];
// Time intervals between adjacent samples in microseconds.
// The first delta is relative to the profile startTime.
timeDeltas?: integer[];
}
Il nuovo flusso di lavoro non deve impedire agli sviluppatori di analizzare il cpuprofile esistente. Pertanto, il riquadro Prestazioni ora supporta sia i file di traccia sia i profili CPU. Puoi importare il file cpuprofile in Performance e verrà caricato correttamente.
Dietro le quinte, le differenze nella struttura degli oggetti vengono rilevate utilizzando un'espressione regolare. Se i contenuti del file iniziano con {"nodes":[, si tratta di un profilo CPU. Altrimenti, si tratta di un file di traccia.
Una volta identificato il tipo di contenuti, li elaboriamo di conseguenza. Per un file di traccia, analizziamo gli eventi e creiamo una sequenza temporale. Per un profilo CPU, analizziamo l'oggetto JSON e creiamo un grafico a fiamme.
Conclusione
Utilizza il riquadro Prestazioni per un'esperienza di profilazione più semplificata, sia per i siti web che per le prestazioni della CPU di profilazione nelle applicazioni Node.js e Deno.
Se hai feedback o suggerimenti, aggiungi un commento a questo bug o contattaci utilizzando una delle seguenti opzioni.
Scaricare i canali in anteprima
Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.
Contattare il team di Chrome DevTools
Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema di DevTools utilizzando Altre opzioni
> Guida > Segnala un problema di DevTools in DevTools. - Invia un tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.