Addio JS Profiler, la profilazione della CPU con il riquadro Prestazioni

Jecelyn Yeen

Nancy Li

Il riquadro JavaScript Profiler 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? (Profiler JS)

Nella versione 58 di Chrome, il team di DevTools progettava di ritirare lo strumento JS Profiler. I motivi sono diversi:

• Non viene più sviluppato attivamente. Profiler JS non riceve 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, grazie alla sua capacità di profilare le prestazioni della CPU JavaScript in Node.js, ha senso raggruppare tutto in un unico posto per garantire coerenza ed efficienza.
• Il riquadro Rendimento è migliore. Continuiamo a migliorarlo aggiungendo nuove funzionalità e miglioramenti che lo rendono uno strumento più potente e facile da usare per l'analisi del rendimento.

Cosa dovresti fare dopo il ritiro?

Per scoprire di più su come profilare le prestazioni della CPU di JavaScript, consulta Profilo delle prestazioni di Node.js.

Ecco alcuni suggerimenti per utilizzare il 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 la richiesta di commenti (RFC) pubblicamente su GitHub per chiedere un feedback agli sviluppatori.

Inoltre, contattiamo attivamente esperti di sviluppatori per testare il prototipo, affrontando eventuali dubbi o problemi per garantire che il riquadro Rendimento soddisfi le principali esigenze di prototipazione.

Stiamo gradualmente eliminando Profiler JS in quattro fasi per dare agli sviluppatori il tempo sufficiente per adattarsi e adottare le nuove versioni.

Problemi principali e come li abbiamo risolti

Tra i feedback che abbiamo ricevuto, le preoccupazioni più pressanti erano incentrate su tre problemi principali:

• Supporto del formato file .cpuprofile. Profiler JS utilizza un formato file diverso. Il riquadro Rendimento dovrebbe supportarlo.
• Velocità di caricamento lenta. La velocità di caricamento del pannello sembrava lenta, interferendo con il processo di profilazione.
• Selettore di VM JavaScript mancante. L'assenza di un selettore di istanze VM JavaScript ha limitato le capacità di profilazione in determinati scenari.

Diamo un'occhiata a ciascuno di questi problemi e vediamo come li abbiamo risolti.

Velocità di caricamento lenta

Gli sviluppatori ci hanno comunicato che il riquadro Prestazioni impiegava troppo tempo per caricare file di dati di grandi dimensioni e a volte si è verificato un arresto anomalo.

Abbiamo utilizzato DevTools per analizzare DevTools (ovvero "DevTools-on-DevTools"). Abbiamo rilevato dei problemi e apportato diverse ottimizzazioni:

• Set sostituita con Array strutture di dati.
• Rimosse le strutture di dati Map non necessarie.
• Ha eseguito il refactoring delle funzioni ricorsive in modo iterativo (for loop) per ridurre l'utilizzo dello stack di memoria.

Risolvendo questi colli di bottiglia, abbiamo velocizzato l'80% il caricamento dei file di grandi dimensioni. 🎉

Scopri di più su cosa abbiamo imparato in questo post del blog: Un riquadro sul rendimento più veloce del 400% grazie alla percezione.

Selettore VM JavaScript mancante

Nel prototipo iniziale manca il selettore VM di JavaScript. Gli sviluppatori la usano per visualizzare in dettaglio e concentrarsi sull'analisi di una specifica istanza VM.

Ora abbiamo aggiunto un selettore 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 i file di traccia, ovvero file JSON con un array di eventi di traccia.

Il profilo JS Profiler supportava invece i profili di CPU, ovvero file con estensione .cpuprofile che contengono un oggetto JSON. Hanno il seguente aspetto:

{
    // 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 file cpuprofile esistente. Pertanto, il riquadro Prestazioni ora supporta sia i file di traccia sia i profili della CPU. Puoi importare il file cpuprofile in Rendimento e verrà caricato correttamente.

Dietro le quinte, rileviamo le differenze nella struttura degli oggetti utilizzando un'espressione regolare. Se il contenuto del file inizia con {"nodes":[, si tratta di un profilo CPU. In caso contrario, si tratta di un file di traccia.

Una volta identificato il tipo di contenuti, lo 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.

Scarica i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

• Inviaci un suggerimento o un feedback tramite crbug.com.
• Segnala un problema DevTools utilizzando Altre opzioni     > Guida > Segnala i problemi di DevTools in DevTools.
• Tweet all'indirizzo @ChromeDevTools.
• Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.