Data di pubblicazione: 19 marzo 2025
Nell'ambito della nostra continua copertura dell'iniziativa per migliorare gli strumenti per le prestazioni di Chrome, siamo lieti di annunciare ulteriori upgrade per la modalità di interazione con il riquadro Rendimento di DevTools. Questi miglioramenti sono progettati per migliorare la tua capacità di navigare nelle tracce relative al rendimento e ridurre il rumore irrilevante, in modo da poterti concentrare sulla ricerca e sulla risoluzione rapida dei problemi di rendimento.
Navigazione migliorata
Molti utenti ci hanno segnalato che lo scorrimento e lo zoom nel riquadro Rendimento possono non essere intuitivi. Anche se molti utenti di lunga data sono abituati, molte persone si aspettano che un gesto di scorrimento scorra e non aumenti e diminuisca lo zoom della traccia.
Una nuova opzione nella consente di passare dallo scorrimento "Classico" esistente al nuovo approccio "Moderno".
In modalità classica, lo scorrimento (con il trackpad o la rotellina del mouse) continua ad aumentare e diminuire lo zoom, mentre se tieni premuto Maiusc e scorri, il grafico a forma di fiamma scorre verso l'alto e verso il basso.
Nella nuova modalità moderna, questi sono invertiti: lo scorrimento ora scorre il grafico a forma di fiamma, mentre Maiusc e scorrimento aumentano e diminuiscono lo zoom.
Le scorciatoie da tastiera (ad esempio l'utilizzo di WASD per navigare nella traccia) continueranno a funzionare invariabilmente.
Panoramica della modalità bidirezionale
Nella parte superiore del riquadro Rendimento è presente il grafico CPU, che fa parte della panoramica della sequenza temporale. Mostra le stime dell'utilizzo della CPU durante la registrazione della traccia, suddivise per tipo di lavoro (ad esempio, arancione per l'esecuzione dello script, viola per le operazioni di rendering).
In questo modo viene visualizzata una panoramica (a volte indicata come minimappa) della traccia, che fornisce un riepilogo generale dell'intera sequenza temporale anche quando esegui lo zoom per esaminare problemi specifici.
Tuttavia, può essere facile perdere la posizione esatta nella minimappa quando si guarda principalmente la traccia e viceversa, quindi abbiamo introdotto nuove funzionalità che aiutano a collegare la panoramica alla visualizzazione con zoom. Ora, quando passi il mouse sopra la panoramica, nel grafico a forma di fiamma viene visualizzata una linea verticale corrispondente che indica lo stesso punto nel tempo nel grafico a forma di fiamma:
Analogamente, se passi il mouse sopra le voci nel grafico a forma di fiamma, ora viene evidenziata la parte corrispondente del grafico della CPU. Questo è ottimo per vedere esattamente quali attività stanno causando questi picchi di CPU.
Filtra la traccia
Il debug dei problemi di prestazioni di solito comporta l'analisi di una grande quantità di dati. Per aiutarti a concentrarti sulle informazioni più pertinenti, abbiamo migliorato la capacità di filtrare i dati non pertinenti.
L'anno scorso, abbiamo introdotto la possibilità di aggiungere gli script nel riquadro Rendimento all'elenco di ignorati di DevTools, filtrando le voci meno pertinenti nel grafico a dispersione. Ad esempio, se stai eseguendo il debug del rendimento di un componente nella pagina, può essere fonte di distrazione se lo stack chiamate del framework è sufficientemente profondo da richiedere lo scorrimento verso l'alto e verso il basso del riquadro sul rendimento e spesso vuoi comprimere gran parte dello stack chiamate per concentrarti sulle parti importanti.
Puoi fare clic con il tasto destro del mouse su una voce nel grafico a forma di fiamma e selezionare Aggiungi script all'elenco di ignorati, in modo da aggiungere lo script all'elenco di ignorati di DevTools e comprimere le relative voci nel grafico a forma di fiamma.
Ora, però, puoi anche modificare manualmente l'elenco di elementi da ignorare direttamente da nella parte superiore del riquadro Rendimento. Le espressioni regolari dell'elenco di ignorati sono condivise tra DevTools, quindi gli script corrispondenti verranno ignorati durante il debug nel riquadro Origini e compressi in singole voci nel grafico a fiamme. Inoltre, l'elenco è persistente nelle sessioni di DevTools.
In questo modo, puoi avere un controllo granulare sui file da ignorare e un pratico punto di riferimento per attivare e disattivare le regole durante il lavoro.
Applica attenuazione agli script di terze parti
Gli script di terze parti sono comuni sui siti web, ma spesso non sono sotto il nostro controllo o non sono pertinenti per una determinata sessione di debug. La nuova opzione Offusca terze parti nella parte superiore del riquadro Rendimento rende grigie le attività di rete e gli script di terze parti nella sequenza temporale, riducendo il disordine visivo e consentendoti di concentrarti sui contributi al rendimento proprietari.
A volte, però, vuoi un maggiore controllo, ad esempio concentrarti su una determinata terza parte o anche solo sui contributi della tua API o CDN. Nella parte inferiore del riquadro della scheda Riepilogo è presente un'analisi dettagliata degli elementi proprietari e di terze parti che DevTools è in grado di trovare nella pagina. Se passi il mouse sopra ogni entità nell'elenco, tutte le attività non relative a quell'entità verranno disattivate.
Conclusione
Queste nuove funzionalità dovrebbero aiutarti a navigare meglio nel riquadro Rendimento e a filtrare i dati non pertinenti per concentrarti sulle parti della traccia che sono importanti per te. Prova queste funzionalità e facci sapere come potrebbero essere ulteriormente migliorate o quali altri miglioramenti vorresti vedere.