Ti suona familiare? Stai eseguendo il debug di un problema di prestazioni in Chrome DevTools, ma la quantità enorme di informazioni nel riquadro Prestazioni rende difficile concentrarsi solo sulle parti più pertinenti e strategiche. Tra la lunghezza della sequenza temporale, la profondità del grafico a fiamme e l'ampiezza di molte tracce diverse di dati, la navigazione può essere difficoltosa. Per quanto incredibilmente potente sia il riquadro Rendimento, la sua utilità non dovrebbe andare a scapito dell'usabilità.
Nell'ambito della nostra iniziativa volta a migliorare gli strumenti per le prestazioni di Chrome, di recente abbiamo lanciato tre nuove funzionalità volte a ridurre la densità delle informazioni e ad aiutare gli sviluppatori a personalizzare i flussi di lavoro:
- Nascondere parti irrilevanti della sequenza temporale
- Nascondi parti non pertinenti del grafico a fiamme
- Nascondi tracce non pertinenti
In questo post, daremo un'occhiata più da vicino a ognuna di queste funzionalità e mostreremo come utilizzarle per concentrare l'attenzione solo sulle informazioni più importanti.
Nascondi parti non pertinenti della sequenza temporale
Le prestazioni web operano su una scala di millisecondi, quindi anche se la registrazione delle tue prestazioni dura solo pochi secondi, esistono ampie opportunità di perdere il controllo.
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 che hai impostato. Ad esempio, limitare la sequenza temporale può essere particolarmente utile se stai cercando di eseguire il debug di problemi di reattività, per 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 mostra l'attività del thread principale come l'esecuzione dello script e il lavoro di presentazione. Quando tieni il puntatore del mouse sopra, viene visualizzato un nuovo pulsante che imposta i limiti della sequenza temporale in base alla finestra corrente. Il pulsante è etichettato in base alla larghezza della finestra temporale, in millisecondi, e all'icona . I breadcrumb si trovano sopra la panoramica della sequenza temporale e ciascuno è etichettato in base alle dimensioni della relativa finestra temporale.
Per usare questa funzionalità:
- Esegui lo zoom e la panoramica della sequenza temporale su 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 la procedura tutte le volte che vuoi 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 sequenza temporale.
Taglia la sequenza temporale per assicurarti di non scorrere mai accidentalmente dai limiti in una parte irrilevante della sequenza temporale. Quando necessario, tuttavia, puoi fare clic sui breadcrumb per diminuire lo zoom. Un altro vantaggio è che la panoramica della cronologia rimane in linea con i canali seguenti. In questo modo è molto più facile individuare opportunità di prestazioni come gli ripetizioni forzate e identificarne la causa principale nel grafico a fiamma.
Nascondi parti non pertinenti del grafico a fiamme
L'analisi dell'attività del thread principale non è cosa da poco. Questa parte del riquadro Prestazioni è nota come grafico a fiamme, a causa della lunghezza e dell'intreccio degli stack di chiamate. In alcuni casi estremi, questi stack possono essere così ingombranti che non è facile capire il senso dell'intero processo e concentrarsi su ciò che si cerca di ottimizzare.
A partire dalla versione 124 di Chrome, puoi personalizzare esattamente le voci nel grafico a fiamme da nascondere per concentrarti sulle informazioni più strategiche.
Quando fai clic con il tasto destro del mouse su una funzione nel grafico a fiamme, viene visualizzato un menu contestuale con diverse opzioni per nascondere le voci:
- Nascondi funzione: rimuovi la funzione selezionata dal grafico a fiamme. I relativi elementi secondari verranno spostati verso l'alto per essere visualizzati immediatamente dopo la funzione padre.
- Nascondi elementi secondari: elimina il grafico a fiamme nella funzione selezionata, nascondendo tutti gli elementi secondari.
- Nascondi elementi secondari ripetuti: rimuovi tutte le istanze della funzione selezionata dal resto del grafico a fiamme.
Quando selezioni una funzione, puoi anche utilizzare diverse scorciatoie da tastiera utili:
- H: nascondi la funzione selezionata
- C: nascondi gli elementi secondari della funzione selezionata
- R: nascondi le istanze della funzione selezionata in un secondo momento nello stack
- U: mostra gli elementi secondari nascosti della funzione selezionata
Nascondi definitivamente gli script non pertinenti
L'opzione Aggiungi script all'elenco di elementi da ignorare nasconde la funzione selezionata dal grafico a fiamme, nonché tutte le altre funzioni definite nello stesso file di script. Lo script viene inoltre aggiunto all'elenco di elementi da ignorare, utilizzato dal debugger DevTools per eseguire un passaggio oltre le funzioni e ignorare le eccezioni provenienti dallo script.
Gli script aggiunti all'elenco di elementi da ignorare sono persistenti, quindi continueranno a essere nascosti nel grafico a fiamme nelle nuove tracce. Gli script al di fuori del 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 un ingombrante stack di chiamate di funzioni ricorsive per semplificare l'utilizzo della traccia.
Per ripristinare l'elenco di elementi da ignorare o qualsiasi altra funzione nascosta nel grafico a fiamme, puoi utilizzare il menu contestuale per reimpostare gli elementi secondari della funzione selezionata o reimpostare tutte le funzioni nascoste durante la traccia. Le funzioni con elementi secondari nascosti sono annotate con l'icona ▼, che reimposta gli elementi secondari quando viene fatto clic.
Qualsiasi profondità e complessità inutili che riesci a togliere dal diagramma a fiamma lo renderà molto più utilizzabile. Se necessario, avere la possibilità di personalizzare le voci visualizzate rappresenta un miglioramento ergonomico per aiutarti a concentrare l'attenzione sulle informazioni più importanti per l'attività da svolgere.
Nascondi tracce non pertinenti
L'attività del thread principale costituisce una sola traccia del riquadro Prestazioni. I canali nel riquadro Rendimento mostrano 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, i thread e i worker utilizzati dalla pagina, nonché le tracce Rete, Frame, Animazioni e Interazioni. Ancora più tracce contrassegnano l'attività dei processi di Chrome di livello inferiore come IO, GPU e Compositor. Sono davvero molte informazioni. Tuttavia, per la maggior parte dei flussi di lavoro prestazionali, le informazioni provenienti da poche tracce alla volta saranno interessate.
A partire da Chrome 125, è disponibile una nuova modalità di configurazione che ti consente di nascondere le tracce non necessarie o di riordinarle come preferisci. Ad esempio, se ottimizzi un'interazione lenta, puoi scegliere di nascondere tutte le tracce tranne le tracce Interazioni, Principale e GPU.
Per modificare i canali, fai clic con il tasto destro del mouse sul nome di una traccia e seleziona Configura canali.... Si apre la modalità di configurazione, in cui potrai mostrare, nascondere o ridisporre le singole tracce. Fai clic sul pulsante Termina configurazione dei canali per salvare le preferenze.
La configurazione dei canali ti permette di controllare il modo in cui il riquadro Prestazioni presenta informazioni fondamentali nel flusso di lavoro. Puoi utilizzare queste impostazioni per nascondere l'attività da processi non correlati e spostare i canali nel modo più semplice per accedere ai dati di cui hai bisogno.
In sintesi
Queste tre funzionalità offrono nuovi e potenti controlli ergonomici per personalizzare i flussi di lavoro relativi al rendimento. Utilizzando queste funzioni e riducendo il rumore di fondo, ti troverai in una posizione migliore per trovare ciò che stai cercando e dare un senso ai dati.
Ci piacerebbe sapere cosa sta funzionando o come potremmo migliorare la tua esperienza. Contattaci per eventuali domande o feedback di carattere generale inviando un'email a @ChromeDevTools. Se qualcosa non funziona o hai un suggerimento per nuove funzionalità, lascia un commento su questo problema in sospeso.
Questo è solo l'inizio della nostra iniziativa per migliorare gli strumenti per le prestazioni di Chrome e siamo felici di condividere tutto ciò che abbiamo cucinato per rendere il riquadro Prestazioni più facile da usare e più potente che mai. Pubblicheremo il nostro prossimo post che illustra le prossime funzionalità direttamente qui sul blog di Chrome for Developers. Nel frattempo, dai un'occhiata alla pagina Novità di Chrome per essere sempre al corrente di tutte le novità di DevTools e Chrome.