Ti suona familiare? Stai eseguendo il debug di un problema di prestazioni in Strumenti per sviluppatori di Chrome, ma la quantità esorbitante di informazioni nel riquadro Rendimento rende difficile concentrarsi solo sulle parti più pertinenti e strategiche. 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 sia il riquadro Rendimento, la sua utilità non deve 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 flussi di lavoro:
- Nascondere parti irrilevanti della cronologia
- Nascondere le parti irrilevanti del grafico a forma di fiamma
- Nascondere le tracce irrilevanti
In questo post esamineremo più da vicino ciascuna di queste funzionalità e ti mostreremo come utilizzarle per concentrarti 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 limiti 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, ad esempio, stai cercando di risolvere problemi di reattività, in modo da poter concentrare la tua 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 bloccarla e impostare un breadcrumb.
- Ripeti l'operazione se necessario per aumentare lo zoom su un'area di interesse nidificata.
- Fai clic sui link breadcrumb per tornare alle aree di interesse precedenti o all'intervallo completo della cronologia.
Il ritaglio della sequenza temporale ti aiuta a evitare di scorrere accidentalmente oltre i limiti in una parte non pertinente della sequenza temporale. Se necessario, puoi fare clic sui breadcrumb per diminuire lo zoom. Un altro vantaggio è che la panoramica della sequenza temporale rimarrà in linea con i seguenti canali. 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.
Nascondere le parti irrilevanti del grafico a forma di fiamma
Analizzare l'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, queste serie possono essere così poco maneggevoli che è difficile comprenderle nel loro complesso e concentrarsi su ciò che stai 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 forma di fiamma, viene visualizzato un menu contestuale con diverse opzioni per nascondere le voci:
- Nascondi funzione: rimuovi la funzione selezionata dal grafico a forma di fiamma. I relativi elementi secondari verranno spostati in alto per apparire 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 ripetuti: rimuovi tutte le istanze della funzione selezionata dal resto del grafico a forma di fiamma.
Esistono anche diverse scorciatoie da tastiera utili che puoi utilizzare quando è selezionata una funzione:
- H: nasconde 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
Nascondere definitivamente gli script irrilevanti
L'opzione Aggiungi script all'elenco degli elementi da ignorare nasconde la funzione selezionata dal grafico a forma di fiamma, nonché tutte le altre funzioni definite nello stesso file di script. Lo script viene aggiunto anche all'elenco di elementi da ignorare, utilizzato dal debugger di DevTools per ignorare le funzioni e le eccezioni originate 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 non sotto il tuo controllo sono buoni candidati per l'elenco di elementi da ignorare. D'altra parte, l'occultamento delle singole funzioni è temporaneo per la traccia corrente e più dipendente dalla situazione. Ad esempio, potresti voler nascondere una complicata serie di chiamate di funzioni ricorsive per semplificare il lavoro con la traccia.
Per ripristinare l'elenco di ignorati o qualsiasi altra funzione nascosta 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 anche 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 l'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 presenti tracce individuali per gli altri frame secondari, thread e worker utilizzati dalla pagina, nonché le tracce Rete, Frame, Animazioni e Interazioni. Altri canali segnalano l'attività di processi di Chrome di livello inferiore, come IO, GPU e Compositor. Sono davvero tante informazioni. Tuttavia, per la maggior parte dei flussi di lavoro relativi al rendimento, dovrai occuparti solo delle informazioni di alcuni canali alla volta.
A partire da Chrome 125, è disponibile una nuova modalità di configurazione che ti consente di nascondere i canali non necessari o di riorganizzarli a tuo piacimento. 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 Fine della configurazione dei canali per salvare le preferenze.
La configurazione dei canali ti consente di controllare il modo in cui il riquadro Rendimento presenta le informazioni fondamentali per il tuo workflow. 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 sul rendimento. Utilizzando queste funzionalità e riducendo la quantità di rumore, avrai maggiori possibilità di trovare ciò che stai cercando e di interpretare i dati.
Ci piacerebbe sapere cosa funziona bene o come potremmo migliorare la tua esperienza. Contattaci per eventuali domande o feedback generali tramite @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 prossimo post che mostra il prossimo lotto di funzionalità proprio qui sul blog di Chrome per gli sviluppatori. Nel frattempo, dai un'occhiata alla pagina Novità di Chrome per non perderti nessuna novità di DevTools e Chrome.