Ti suona familiare? Stai eseguendo il debug di un problema di prestazioni in Chrome DevTools, ma l'enorme quantità di informazioni nel riquadro Prestazioni rende difficile concentrarti solo sulle parti più pertinenti e utili. La lunghezza della cronologia, la profondità del grafico a forma di fiamma e l'ampiezza di molti diversi canali di dati possono rappresentare una sfida. Per quanto incredibilmente potente come il riquadro Rendimento, la sua utilità non dovrebbe andare a scapito dell'usabilità.
Nell'ambito della nostra iniziativa per migliorare gli strumenti per le prestazioni di Chrome, di recente abbiamo lanciato tre nuove funzionalità volte a ridurre la densità delle informazioni e aiutare gli sviluppatori a personalizzare i loro flussi di lavoro:
- Nascondere parti irrilevanti della cronologia
- Nascondere le parti irrilevanti del grafico a forma di fiamma
- Nascondere le tracce non pertinenti
In questo post analizzeremo più da vicino ciascuna di queste funzionalità e mostreremo come utilizzarle per concentrarci solo sulle informazioni più importanti.
Nascondere le parti irrilevanti della cronologia
Il rendimento web opera su una scala di millisecondi, quindi anche se la registrazione del rendimento dura solo pochi secondi, ci sono ampie opportunità di perdere il posto.
In Chrome 122, abbiamo aggiunto la possibilità di creare breadcrumb. Questa funzionalità ti consente di bloccare i confini della sequenza temporale in modo da poter eseguire lo zoom o la panoramica solo all'interno di un'area di interesse impostata da te. Limitare la sequenza temporale in questo modo può essere particolarmente utile se stai cercando di eseguire il debug di problemi di reattività, ad esempio, in modo da poter concentrare l'attenzione su una singola interazione o su un'attività lunga e problematica.
Lo screenshot precedente mostra un primo piano della panoramica della sequenza temporale, che visualizza l'attività del thread principale, come l'esecuzione dello script e il lavoro di presentazione. Quando lo passi sopra, viene visualizzato un nuovo pulsante che imposta i limiti della sequenza temporale sulla finestra corrente. Il pulsante è etichettato con la larghezza della finestra temporale in millisecondi e l'icona . I breadcrumb si trovano sopra la panoramica della sequenza temporale e ognuno è etichettato in base alle dimensioni della finestra temporale.
Per usare questa funzionalità:
- Esegui lo zoom e la panoramica della sequenza temporale per visualizzare un'area di interesse.
- Fai clic sull'icona della lente d'ingrandimento nella panoramica della sequenza temporale per bloccare la sequenza temporale e impostare un breadcrumb.
- Ripeti l'operazione in base alle necessità per aumentare lo zoom su un'area di interesse nidificata.
- Fai clic sui breadcrumb per tornare alle aree di interesse precedenti o all'intervallo completo della cronologia.
Tagliare la sequenza temporale contribuisce a evitare di scorrere accidentalmente oltre i limiti in una parte non pertinente della sequenza temporale. Quando necessario, però, puoi fare clic sui breadcrumb per diminuire lo zoom. Un altro vantaggio è che la panoramica della sequenza temporale rimarrà in linea con le tracce seguenti. In questo modo, puoi individuare molto più facilmente le opportunità di miglioramento del rendimento, come i riflussi forzati, e identificare la causa principale nel grafico a forma di fiamma.
Nascondi le parti non pertinenti del grafico a fiamme
L'analisi dell'attività del thread principale non è cosa da poco. Questa parte del riquadro Rendimento è nota come diagramma a fiamma, a causa della lunghezza e della complessità degli stack di chiamate. In alcuni casi estremi, questi stack possono risultare così ingombranti che è difficile dare un senso al tutto e concentrarsi su ciò che si sta cercando di ottimizzare.
A partire da Chrome 124, puoi personalizzare esattamente quali voci del grafico a forma di fiamma nascondere, in modo da concentrarti sulle informazioni più importanti.
Quando fai clic con il tasto destro del mouse su una funzione nel grafico a fiamme, viene visualizzato un menu contestuale che include diverse opzioni per nascondere le voci:
- Nascondi funzione: rimuovi la funzione selezionata dal grafico a fiamme. Le unità secondarie verranno visualizzate immediatamente dopo la funzione principale.
- Nascondi elementi secondari: pota il grafico a forma di fiamma nella funzione selezionata, nascondendo tutti gli elementi secondari.
- Nascondi elementi secondari ricorrenti: rimuovi tutte le istanze della funzione selezionata dal resto del grafico a fiamme.
Esistono anche diverse scorciatoie da tastiera utili che puoi utilizzare quando è selezionata una funzione:
- H: nascondi la funzione selezionata
- C: nascondi gli elementi secondari della funzione selezionata
- R: nascondi le istanze della funzione selezionata più avanti nello stack.
- U: mostra gli elementi secondari nascosti della funzione selezionata
Nascondi definitivamente gli script non pertinenti
L'opzione Aggiungi script all'elenco da ignorare nasconde la funzione selezionata dal grafico a fiamme, nonché tutte le altre funzioni definite all'interno dello stesso file di script. Lo script viene inoltre aggiunto all'elenco di elementi da ignorare, che il debugger di DevTools utilizza per controllare le funzioni e ignorare le eccezioni provenienti dallo script.
Gli script aggiunti all'elenco di ignorati vengono mantenuti, pertanto continueranno a essere nascosti nel grafico a forma di fiamma nelle nuove tracce. Gli script che esulano dal tuo controllo sono buoni candidati per l'elenco degli elementi da ignorare. D'altra parte, nascondere le singole funzioni è temporaneo per la traccia attuale e dipende dalla situazione. Ad esempio, potresti voler nascondere uno stack complesso di chiamate di funzione ricorsive per semplificare l'utilizzo della traccia.
Per ripristinare l'elenco di ignorati o altre funzioni nascoste nel grafico a forma di fiamma, puoi utilizzare il menu contestuale per reimpostare gli elementi secondari della funzione selezionata o tutte le funzioni nascoste nell'intera traccia. Le funzioni con elementi secondari nascosti sono annotate con l'icona ▼, che reimposta gli elementi secondari quando viene fatto clic.
Qualsiasi complessità e profondità non necessaria che puoi rimuovere dal grafico a forma di fiamma lo renderà molto più utilizzabile. Se necessario, la possibilità di personalizzare le voci visualizzate è un miglioramento ergonomico che ti aiuta a concentrare la tua attenzione sulle informazioni più significative per l'attività in questione.
Nascondere i canali irrilevanti
L'attività del thread principale costituisce solo un canale del riquadro Rendimento. I canali nel riquadro Rendimento visualizzano l'attività di un processo e sono tutti allineati a una sequenza temporale comune per facilitare il debug. Oltre alla traccia Principale, sono disponibili singole tracce per gli altri frame secondari, thread e worker utilizzati dalla pagina, così come le tracce Rete, Frame, Animazioni e Interazioni. Ancora più tracce indicano l'attività dei processi di livello inferiore di Chrome, come IO, GPU e Compositor. Sono davvero tante informazioni. Eppure, per la maggior parte dei flussi di lavoro relativi al rendimento, ti interessano solo le informazioni contenute in alcuni canali alla volta.
A partire da Chrome 125, è disponibile una nuova modalità di configurazione che ti consente di nascondere le tracce non necessarie o di riorganizzarle come preferisci. Ad esempio, se stai ottimizzando un'interazione lenta, puoi scegliere di nascondere tutto tranne i canali Interazioni, Principale e GPU.
Per modificare le tracce, fai clic con il tasto destro del mouse sul nome di una traccia e seleziona Configura tracce…. Si apre la modalità di configurazione, in cui puoi mostrare, nascondere o riorganizzare le singole tracce. Fai clic sul pulsante Completa la configurazione dei canali per salvare le preferenze.
La configurazione delle tracce ti consente di controllare il modo in cui il riquadro Prestazioni presenta le informazioni critiche al tuo flusso di lavoro. Puoi utilizzare queste impostazioni per nascondere l'attività a processi non correlati e spostare i canali in modo da avere un accesso più facile ai dati di cui hai bisogno.
In sintesi
Queste tre funzionalità ti offrono nuovi e potenti controlli ergonomici per personalizzare i flussi di lavoro per il rendimento. Utilizzando queste funzionalità e riducendo la quantità di rumore, entrerai in una posizione molto migliore per trovare ciò che stai cercando e dare un senso ai dati.
Ci piacerebbe sapere cosa funziona bene o come potremmo migliorare la tua esperienza. Per eventuali domande o feedback generali, contattaci all'indirizzo @ChromeDevTools. Se qualcosa non funziona o hai un suggerimento per nuove funzionalità, lascia un commento su questo problema aperto.
Questo è solo l'inizio della nostra iniziativa per migliorare gli strumenti per il rendimento di Chrome e siamo lieti di condividere tutto ciò che abbiamo in programma per rendere il riquadro Rendimento più facile da usare e più potente che mai. Pubblicheremo il nostro prossimo post sul blog di Chrome for Developers, in cui parleremo del prossimo gruppo di funzionalità. Nel frattempo, dai un'occhiata alla pagina Novità di Chrome per tenerti al corrente su tutte le novità di DevTools e Chrome.