Riferimento per le funzionalità delle prestazioni

Questa pagina è un riferimento completo delle funzionalità di Chrome DevTools relative all'analisi delle prestazioni.

Consulta Analizzare le prestazioni di runtime per un tutorial guidato su come analizzare le prestazioni di una pagina utilizzando Chrome DevTools.

Schermata delle metriche live

Quando apri per la prima volta il riquadro Prestazioni, viene visualizzata la schermata Metriche live, che fornisce un riepilogo istantaneo delle prestazioni della pagina corrente utilizzando i tre Core Web Vitals.

Le metriche vengono aggiornate man mano che interagisci con la pagina e accedi a nuove pagine, incluse le navigazioni soft lato client nelle applicazioni a pagina singola, indicate da un badge NAVIGAZIONE SOFT. Questo è un buon modo per identificare i problemi di prestazioni, in particolare per INP e CLS se vengono visualizzati solo in determinate circostanze. Una volta che un problema di prestazioni si ripete costantemente, puoi registrare una traccia per ottenere maggiori dettagli per eseguire il debug del problema sottostante.

Funzionalità della schermata delle metriche live

Oltre alle metriche, la schermata Metriche in tempo reale presenta le seguenti funzionalità:

• Metriche sul campo di CrUX, se abilitate nel riquadro Metriche sul campo.
• Un riepilogo delle differenze significative tra le metriche locali e sul campo.
• L'elemento LCP, su cui è possibile passare il mouse per evidenziarlo nella pagina.
• Dettagli del cluster CLS e del tipo INP
• Maggiori dettagli sul passaggio del mouse sopra le metriche (ad esempio, le sezioni secondarie LCP e INP e gli istogrammi sul campo)
• I riquadri Interazioni e Variazioni del layout che registrano la cronologia delle interazioni e delle variazioni del layout.
• Un riquadro Metriche sul campo in cui è possibile attivare i dati di CrUX, i dettagli del periodo di tempo di questi dati, la possibilità di passare dai dati di origine a quelli dell'URL (se disponibili) e viceversa, nonché dai dati desktop a quelli mobile e viceversa.
• Un riquadro Impostazioni ambiente con indicazioni su quale dispositivo, CPU e limitazione della larghezza di banda della rete utilizzare, in base ai dati di CrUX.

Per maggiori dettagli, consulta il blog post Monitora le prestazioni di Core Web Vitals locali e degli utenti reali in DevTools.

Rendimento dei record

Puoi registrare le prestazioni di runtime o di caricamento utilizzando i pulsanti in alto a sinistra o a destra dello schermo:

Registra le prestazioni di runtime

Registra le prestazioni di runtime quando vuoi analizzare le prestazioni di una pagina durante l'esecuzione, anziché durante il caricamento.

1. Vai alla pagina che vuoi analizzare.
2. Fai clic sulla scheda Prestazioni in DevTools.
3. Fai clic su Registra .
4. Interagisci con la pagina. DevTools registra tutta l'attività della pagina che si verifica in seguito alle tue interazioni.
5. Fai di nuovo clic su Registra o su Interrompi per interrompere la registrazione.

Registra le prestazioni di caricamento

Registra il rendimento del caricamento quando vuoi analizzare il rendimento di una pagina durante il caricamento, anziché durante l'esecuzione.

1. Vai alla pagina che vuoi analizzare.
2. Apri il riquadro Prestazioni di DevTools.
3. Fai clic su Registra e ricarica . DevTools passa prima a about:blank per cancellare eventuali screenshot e tracce rimanenti. DevTools registra le metriche sul rendimento durante il ricaricamento della pagina e interrompe automaticamente la registrazione un paio di secondi dopo il completamento del caricamento.

DevTools aumenta automaticamente lo zoom sulla parte della registrazione in cui si è verificata la maggior parte dell'attività.

In questo esempio, il riquadro Prestazioni mostra l'attività durante il caricamento di una pagina.

Acquisisci screenshot durante la registrazione

Attiva la casella di controllo Screenshot per acquisire uno screenshot di ogni frame durante la registrazione.

Per personalizzare la fedeltà della registrazione visiva nei limiti dei budget di memoria, apri Impostazioni di acquisizione e seleziona un preset per le dimensioni e il conteggio dei frame dal menu a discesa Acquisizione screenshot.

Consulta la sezione Visualizzare uno screenshot per scoprire come interagire con gli screenshot.

Forza la garbage collection durante la registrazione

Mentre registri una pagina, fai clic su Esegui garbage collection mop per forzare la garbage collection.

Mostra le impostazioni di registrazione

Fai clic su Impostazioni di acquisizione per visualizzare altre impostazioni relative al modo in cui DevTools acquisisce le registrazioni delle prestazioni.

Disattivare gli esempi JavaScript

Per impostazione predefinita, la traccia Principale di una registrazione mostra stack di chiamate dettagliati delle funzioni JavaScript chiamate durante la registrazione. Per disattivare questi stack di chiamate:

1. Apri il menu Impostazioni di acquisizione . Consulta la sezione Mostra le impostazioni di registrazione.
2. Attiva la casella di controllo Disattiva campioni JavaScript.
3. Acquisire una registrazione della pagina.

I seguenti screenshot mostrano la differenza tra la disattivazione e l'attivazione dei campioni JavaScript. La traccia Principale della registrazione è molto più breve quando il campionamento è disattivato, perché omette tutti gli stack di chiamate JavaScript.

Questo esempio mostra una registrazione con i campioni JS disattivati.

Questo esempio mostra una registrazione con esempi JS attivati.

Limitare la rete durante la registrazione

Per limitare la rete durante la registrazione:

1. Apri il menu Impostazioni di acquisizione . Consulta la sezione Mostra le impostazioni di registrazione.
2. Imposta Rete sul livello di limitazione scelto.

Nel menu a discesa, il riquadro Rendimento potrebbe anche consigliare un preset di limitazione predefinito o un preset che approssima l'esperienza della tua base utenti in base ai dati sul campo.

Limitare la CPU durante la registrazione

Per limitare la CPU durante la registrazione:

1. Apri il menu Impostazioni di acquisizione . Consulta la sezione Mostra le impostazioni di registrazione.
2. Imposta CPU sul livello di limitazione scelto.

La limitazione è relativa alle funzionalità del computer. Ad esempio, l'opzione Rallentamento 2x fa funzionare la CPU due volte più lentamente rispetto alla sua capacità normale. DevTools non può simulare veramente le CPU dei dispositivi mobili, perché la loro architettura è molto diversa da quella dei computer desktop e laptop.

Nel menu a discesa, il riquadro Prestazioni potrebbe anche consigliare un preset di limitazione predefinito o un preset che approssima l'esperienza della tua base utenti in base ai dati sul campo.

Attiva le statistiche del selettore CSS

Per visualizzare le statistiche dei selettori delle regole CSS durante gli eventi Ricalcola stile di lunga durata:

1. Apri il menu Impostazioni di acquisizione . Consulta la sezione Mostra impostazioni di registrazione.
2. Seleziona la casella di controllo Attiva le statistiche del selettore CSS.

Per maggiori dettagli, scopri come analizzare le prestazioni dei selettori CSS durante gli eventi Ricalcola stile.

Abilita la strumentazione avanzata della pittura

Per visualizzare la strumentazione di pittura dettagliata:

1. Apri il menu Impostazioni di acquisizione . Consulta la sezione Mostra le impostazioni di registrazione.
2. Seleziona la casella di controllo Attiva strumentazione avanzata della pittura.

Per scoprire come interagire con le informazioni sulla verniciatura, consulta Visualizzare i livelli e Visualizzare il profiler della verniciatura.

Mostra canali personalizzati

Attiva le tracce personalizzate e i riepiloghi dei gruppi di tracce personalizzate nel riepilogo della traccia, che possono essere personalizzati utilizzando l'API DevTools Extensibility.

Cancella la registrazione precedente

Dopo aver effettuato una registrazione, premi Cancella registrazione per cancellarla dal riquadro Rendimento.

Analizza una registrazione delle prestazioni

Dopo aver registrato le prestazioni di runtime o registrato le prestazioni di caricamento, il riquadro Rendimento fornisce molti dati per analizzare le prestazioni di ciò che è appena accaduto.

Annotare una registrazione e condividerla

Consulta Annotare e condividere i risultati del rendimento.

Ottieni insight operativi

Il riquadro Prestazioni include insight sulle prestazioni visualizzati anche nei report di Lighthouse. Questi approfondimenti possono suggerire modi per migliorare le prestazioni e fornire un'analisi guidata dei seguenti problemi di prestazioni, come le parti secondarie di LCP e INP, i problemi di rilevamento delle richieste LCP, le terze parti e le risorse JavaScript legacy e duplicate. Per un elenco completo, consulta la documentazione di Performance Insights.

Gli approfondimenti vengono superati quando non vengono rilevati problemi. La scheda Approfondimenti li elenca nella sezione Approfondimenti superati compressa in basso. Gli approfondimenti che non sono stati superati sono elencati in sezioni dedicate.

Per utilizzare gli approfondimenti:

1. Esegui una registrazione delle prestazioni.
2. Nella barra laterale a sinistra del pannello Rendimento, apri la scheda Approfondimenti, espandi le diverse sezioni e passa il mouse sopra gli elementi e fai clic. Il riquadro Prestazioni evidenzia gli eventi corrispondenti nella traccia.

Spostati all'interno della registrazione

Per aiutarti nella navigazione, quando passi il mouse sopra la traccia di rendimento, il riquadro Prestazioni esegue le seguenti operazioni:

• Mostra un indicatore verticale che si estende per l'intera traccia del rendimento quando passi il mouse sopra la panoramica della sequenza temporale.
• Evidenzia un intervallo nella Panoramica della sequenza temporale quando passi il mouse sopra gli elementi nella traccia Principale.

Per esaminare attentamente la registrazione del rendimento, puoi selezionare una parte di una registrazione, scorrere un lungo grafico a fiamme, aumentare e diminuire lo zoom e utilizzare i breadcrumb per passare da un livello di zoom all'altro.

Usa le scorciatoie da tastiera per navigare

Per utilizzare le scorciatoie da tastiera per navigare rapidamente nella registrazione, scegli innanzitutto lo stile di navigazione da tastiera che preferisci.

Nell'angolo in alto a destra del riquadro, fai clic su Guida Mostra scorciatoie e seleziona una delle seguenti opzioni:

• Classica: esegui lo zoom con la rotellina del mouse (touchpad verso l'alto o verso il basso) e lo scorrimento verticale con Maiusc + rotellina del mouse.
• Moderno: scorrimento verticale con la rotellina del mouse, scorrimento orizzontale con Maiusc + rotellina del mouse e zoom con Comando/Ctrl + rotellina del mouse.

La finestra di dialogo delle scorciatoie fornisce anche un foglio riassuntivo delle scorciatoie disponibili.

Seleziona una parte della registrazione

Sotto la barra delle azioni del riquadro Prestazioni e nella parte superiore della registrazione, puoi vedere la sezione Panoramica della sequenza temporale con i grafici CPU e RETE.

Per selezionare una parte di una registrazione, fai clic e tieni premuto, quindi trascina verso sinistra o verso destra nella panoramica della sequenza temporale.

Per selezionare una parte utilizzando la tastiera:

1. Concentrati sulla traccia Principale o su una delle tracce adiacenti.
2. Utilizza i tasti W, A, S, D per aumentare lo zoom, spostarti a sinistra, diminuire lo zoom e spostarti a destra, rispettivamente.

Per selezionare una parte utilizzando un trackpad:

1. Passa il mouse sopra la sezione Panoramica della sequenza temporale o su uno dei canali (Principale e quelli adiacenti).
2. Con due dita, scorri verso l'alto per diminuire lo zoom, scorri verso sinistra per spostarti a sinistra, scorri verso il basso per aumentare lo zoom e scorri verso destra per spostarti a destra.

Crea breadcrumb e passa da un livello di zoom all'altro

La panoramica della sequenza temporale ti consente di creare più breadcrumb nidificati in successione, aumentando i livelli di zoom, per poi passare liberamente da un livello di zoom all'altro.

Per creare e utilizzare le breadcrumb:

1. In Panoramica della sequenza temporale, seleziona una parte della registrazione.
2. Passa il mouse sopra la selezione e fai clic sul pulsante N ms zoom_in. La selezione si espande per riempire la panoramica della sequenza temporale. Una sequenza di breadcrumb inizia a formarsi nella parte superiore della Panoramica della sequenza temporale.
3. Ripeti i due passaggi precedenti per creare un altro breadcrumb nidificato. Puoi continuare a nidificare i breadcrumb purché l'intervallo di selezione sia superiore a 5 millisecondi.
4. Per passare a un livello di zoom scelto, fai clic sul breadcrumb corrispondente nella catena nella parte superiore della Panoramica della sequenza temporale.

Per rimuovere i breadcrumb secondari di un breadcrumb, fai clic con il tasto destro del mouse sul breadcrumb principale e seleziona Rimuovi breadcrumb secondario.

Scorrere un flame chart lungo

Per scorrere un grafico a fiamma lungo nella traccia Principale o in una delle tracce vicine, fai clic e tieni premuto, quindi trascina in qualsiasi direzione finché non visualizzi ciò che stai cercando.

Ignorare gli script irrilevanti nel flame chart

Per concentrarti meglio sul codice, puoi aggiungere script non pertinenti all'elenco di elementi da ignorare.

Per ignorare gli script, esegui una delle seguenti operazioni:

• Fai clic su Comprimi Mostra finestra di dialogo delle impostazioni dell'elenco di elementi da ignorare nella barra delle azioni in alto e digita un'espressione regolare nel campo di immissione. Il flame chart applicherà la nuova regola durante la digitazione.
• Fai clic con il tasto destro del mouse su uno script e seleziona Aggiungi script all'elenco di elementi da ignorare. Il riquadro Rendimento aggiunge questo script all'elenco nella finestra di dialogo Comprimi Mostra finestra di dialogo delle impostazioni dell'elenco di elementi da ignorare.

Il riquadro comprimerà automaticamente l'annidamento eccessivo per questi script e li contrassegnerà come On ignore list (REGULAR_EXPRESSION).

Nella finestra di dialogo Mostra finestra di dialogo delle impostazioni dell'elenco di elementi da ignorare compress, puoi attivare e disattivare le regole dell'elenco di elementi da ignorare.

Per rimuovere uno script dall'elenco di elementi da ignorare, fai clic con il tasto destro del mouse sul flame chart e seleziona Rimuovi script dall'elenco di elementi da ignorare oppure passaci sopra il mouse nella finestra di dialogo compress Mostra impostazioni elenco di elementi da ignorare e fai clic su delete Rimuovi.

DevTools salva le regole dell'elenco di elementi da ignorare che aggiungi in Impostazioni Impostazioni > Elenco di elementi da ignorare.

Inoltre, per concentrarti solo sugli script proprietari, seleziona check_box Dim 3rd parties (Attenua terze parti). Il riquadro Prestazioni mostrerà gli script di terze parti in grigio.

Cerca attività

Puoi eseguire ricerche tra le attività nella traccia Principale e le richieste nella traccia Rete.

Per aprire una casella di ricerca nella parte inferiore del riquadro Prestazioni, premi:

• macOS: Comando+F
• Windows, Linux: Ctrl+F

Questo esempio mostra un'espressione regolare nella casella di ricerca in basso che trova qualsiasi attività che inizia con E.

Per scorrere le attività che corrispondono alla tua query:

• Fai clic sui pulsanti expand_less Indietro o expand_more Avanti.
• Premi Maiusc+Invio per selezionare l'elemento precedente o Invio per selezionare quello successivo.

Il riquadro Rendimento mostra una descrizione comando sopra l'attività selezionata nella casella di ricerca.

Per modificare le impostazioni delle query:

• Fai clic su match_case Maiuscole/minuscole per rendere la query sensibile alle maiuscole.
• Fai clic su regular_expression Espressione regolare per utilizzare un'espressione regolare nella query.

Per nascondere la casella di ricerca, fai clic su Annulla.

Modificare l'ordine delle tracce e nasconderle

Per riordinare la traccia delle prestazioni, puoi modificare l'ordine delle tracce e nascondere quelle non pertinenti nella modalità di configurazione delle tracce.

Per spostare e nascondere le tracce:

1. Per accedere alla modalità di configurazione, fai clic con il tasto destro del mouse sul nome di una traccia e seleziona Configura tracce.
2. Fai clic su arrow_upward o arrow_downward per spostare una traccia verso l'alto o verso il basso. Fai clic su visibility_off per nasconderlo.
3. Al termine, fai clic su Completa la configurazione dei canali in basso per uscire dalla modalità di configurazione.

Guarda il video per vedere questo flusso di lavoro in azione.

Il riquadro Prestazioni salva la configurazione delle tracce per le nuove tracce, ma non nelle sessioni successive di DevTools.

Visualizzare l'attività del thread principale

Utilizza la traccia Principale per visualizzare l'attività che si è verificata nel thread principale della pagina.

Fai clic su un evento per visualizzare ulteriori informazioni nella scheda Riepilogo, tra cui, a titolo esemplificativo: durata (e durata autonoma), link alla riga corrispondente nello script di origine, URL di origine (con un nome di entità, se noto), analisi dello stack, se presente, e suddivisione delle tempistiche in un grafico a torta.

Il riquadro Prestazioni evidenzia l'evento selezionato in blu.

Questo esempio mostra ulteriori informazioni sull'evento di chiamata di funzione get nella scheda Riepilogo.

Distinguere tra eventi proprietari e di terze parti

Un affidamento eccessivo al codice di terze parti può influire negativamente sulle prestazioni del caricamento. Il riquadro Rendimento può aiutarti a distinguere visivamente gli eventi proprietari e di terze parti nella traccia, in modo da prendere una decisione più informata sulla riduzione o sul posticipo del caricamento del codice di terze parti per dare la priorità ai contenuti della pagina.

Per concentrarti solo sul rendimento del codice proprietario:

1. Assicurati che non sia selezionato nulla nella traccia del rendimento o nella scheda Insight. Per farlo, fai clic su uno spazio vuoto nella traccia.
2. Seleziona check_box Attenua terze parti nella barra delle azioni in alto. Il riquadro Rendimento disattiva gli eventi correlati a terze parti dalla traccia del rendimento e lascia evidenziati solo quelli proprietari.

Evidenzia gli eventi con la tabella "Proprietarie / terze parti"

All'interno di un intervallo selezionato nella panoramica della sequenza temporale e quando non è selezionato nessuno degli eventi, la scheda Riepilogo mostra una tabella Prima / Terza parte che elenca le rispettive dimensioni di trasferimento e i tempi del thread principale di quanto segue:

• Entità proprietaria contrassegnata da un badge 1st party.
• Tutte le entità di terze parti rilevate nell'intervallo selezionato, non contrassegnate.
• Estensioni contrassegnate con badge Extension.
• Altre entità [unattributed].

Per visualizzare gli eventi correlati evidenziati nella traccia e il resto in grigio, passa il mouse sopra le entità nella tabella. Per lasciare evidenziati gli eventi di un'entità, selezionala nella tabella. Per rimuovere l'evidenziazione, fai clic su uno spazio vuoto nella traccia.

Per aprire le attività raggruppate in base a questa entità nella scheda Bottom-up, passa il mouse sopra l'entità nella tabella e fai clic su account_tree Bottom-up accanto.

Leggi il flame chart

Il riquadro Prestazioni mostra l'attività del thread principale in un flame chart. L'asse X rappresenta la registrazione nel tempo. L'asse y rappresenta lo stack di chiamate. Gli eventi in alto causano quelli in basso.

Questo esempio mostra un flame chart nella traccia Principale. Un evento click ha causato una chiamata di funzione anonima. Questa funzione, a sua volta, ha chiamato onEndpointClick_, che ha chiamato handleClick_ e così via.

Il riquadro Prestazioni assegna colori casuali agli script per suddividere il flame chart e renderlo più leggibile. Nell'esempio precedente, le chiamate di funzione da uno script sono colorate di azzurro. Le chiamate da un altro script sono di colore rosa chiaro. Il giallo più scuro rappresenta l'attività di scripting, mentre l'evento viola rappresenta l'attività di rendering. Questi eventi di colore giallo e viola più scuro sono coerenti in tutte le registrazioni.

Anche le attività lunghe sono evidenziate con un triangolo rosso e la parte superiore a 50 millisecondi è ombreggiata in rosso:

In questo esempio, l'attività ha richiesto più di 400 millisecondi, quindi la parte che rappresenta gli ultimi 350 millisecondi è ombreggiata in rosso, mentre i primi 50 millisecondi non lo sono.

Inoltre, la traccia Principale mostra informazioni sui profili CPU avviati e arrestati con le funzioni della console profile() e profileEnd(). La chiamata di console.profileEnd() nel codice o nella Console apre automaticamente il riquadro Prestazioni e mostra la traccia registrata.

Per nascondere il flame chart dettagliato delle chiamate JavaScript, consulta Disattiva i campioni JavaScript. Quando i campioni JS sono disattivati, vengono visualizzati solo gli eventi di alto livello, come Event (click) e Function Call.

Monitora gli attivatori di eventi

La traccia Principale può mostrare frecce che collegano i seguenti attivatori e gli eventi che hanno causato:

• Invalidamento dello stile o del layout -> Ricalcola stili o Layout
• Richiedi frame dell'animazione -> Frame dell'animazione attivato
• Richiedi callback di inattività -> Attiva callback di inattività
• Installa timer -> Timer attivato
• Crea WebSocket -> Invia… e Ricevi l'handshake di WebSocket o Elimina WebSocket
• Pianifica postTask -> Avvia postTask o Interrompi postTask

Per visualizzare le frecce, individua un iniziatore o l'evento che ha causato nel grafico a fiamma e selezionalo.

Se selezionata, la scheda Riepilogo mostra i link Iniziatore per per gli iniziatori e i link Iniziato da per gli eventi che hanno causato. Fai clic su questi indicatori per passare da un evento all'altro.

Nascondere le funzioni e i relativi elementi secondari nel grafico a fiamma

Per fare ordine nel grafico a fiamma nel thread Principale, puoi nascondere le funzioni selezionate o i relativi elementi secondari:

1. Nella traccia Principale, fai clic con il tasto destro del mouse su una funzione e scegli una delle seguenti opzioni o premi la scorciatoia corrispondente:

   • Funzione Nascondi (H)
   • Nascondi elementi secondari (C)
   • Nascondi gli elementi secondari che si ripetono (R)
   • Reimposta elementi secondari (U)
   • Reimposta traccia (T)
   • Aggiungi script all'elenco di elementi da ignorare (I)

   

   Accanto al nome della funzione con elementi secondari nascosti viene visualizzato un pulsante a discesa arrow_drop_down.

2. Per visualizzare il numero di elementi secondari nascosti, passa il mouse sopra il pulsante del menu a discesa arrow_drop_down.

   

3. Per reimpostare una funzione con elementi secondari nascosti o l'intero flame chart, seleziona la funzione e premi U o fai clic con il tasto destro del mouse su una funzione e seleziona Reimposta traccia.

Ignora gli script nel flame chart

Per aggiungere uno script all'elenco di elementi da ignorare, fai clic con il tasto destro del mouse su uno script nel grafico e seleziona Aggiungi script all'elenco di elementi da ignorare.

Il grafico comprime gli script ignorati, li contrassegna come Nell'elenco di elementi da ignorare e li aggiunge alle regole di Esclusione personalizzata in Impostazioni Impostazioni > Elenco di elementi da ignorare. Gli script ignorati vengono salvati finché non li rimuovi dalla traccia o dalle regole di esclusione personalizzate.

Visualizza le attività in una tabella

Dopo aver registrato una pagina, non devi fare affidamento solo alla traccia Principale per analizzare le attività. DevTools fornisce anche tre visualizzazioni tabellari per analizzare le attività. Ogni visualizzazione offre una prospettiva diversa sulle attività:

• Quando vuoi visualizzare le attività principali che causano il maggior carico di lavoro, utilizza la scheda Albero delle chiamate.
• Quando vuoi visualizzare le attività in cui è stato impiegato direttamente più tempo, utilizza la scheda Bottom-up.
• Quando vuoi visualizzare le attività nell'ordine in cui si sono verificate durante la registrazione, utilizza la scheda Log eventi.

Puoi fare clic su un elemento in una delle tre tabelle (e nella tabella di prima / terza parte nella scheda Riepilogo) per mantenere evidenziati gli eventi corrispondenti nella traccia e oscurare il resto mentre navighi nella traccia del rendimento.

Per aiutarti a trovare più rapidamente ciò che cerchi, tutte e tre le schede hanno pulsanti per il filtro avanzato accanto alla barra Filtra:

• match_case Maiuscole/minuscole.
• regular_expression Espressione regolare.
• match_word Trova parola intera.

Ogni visualizzazione tabulare nel riquadro Prestazioni mostra i link per attività come le chiamate di funzione. Per aiutarti a eseguire il debug, DevTools trova le dichiarazioni delle funzioni corrispondenti nei file di origine. Inoltre, se sono presenti e abilitate le mappe di origine appropriate, DevTools trova automaticamente i file originali.

Fai clic su un link per aprire un file sorgente nel riquadro Origini.

Attività principali

Di seguito è riportata una spiegazione del concetto di attività principali menzionato nelle sezioni della scheda Albero delle chiamate, della scheda Bottom-up e della sezione Log eventi.

Le attività principali sono quelle che fanno sì che il browser esegua un lavoro. Ad esempio, quando fai clic su una pagina, il browser attiva un'attività Event come attività principale. Questo Event potrebbe quindi causare l'esecuzione di un gestore.

Nel flame chart della traccia Principale, le attività principali si trovano nella parte superiore del grafico. Nelle schede Albero chiamate e Log eventi, le attività principali sono gli elementi di primo livello.

Per un esempio di attività principali, consulta la scheda Albero delle chiamate.

Scheda Albero delle chiamate

Utilizza la scheda Albero delle chiamate per visualizzare quali attività radice causano il maggior lavoro.

La scheda Albero delle chiamate mostra solo le attività durante la parte selezionata della registrazione. Consulta Seleziona una parte di una registrazione per scoprire come selezionare le parti.

In questo esempio, gli elementi di primo livello nella colonna Attività, come Event, Paint e Composite Layers, sono attività principali. La nidificazione rappresenta lo stack di chiamate. In questo esempio, Event ha causato Function Call, che ha causato button.addEventListener, che ha causato b e così via.

Tempo personale rappresenta il tempo trascorso direttamente in quell'attività. Tempo totale rappresenta il tempo trascorso in quell'attività o in una delle relative attività secondarie.

Fai clic su Tempo personale, Tempo totale o Attività per ordinare la tabella in base a quella colonna.

Utilizza la casella Filtro per filtrare gli eventi in base al nome dell'attività.

Per impostazione predefinita, il menu Raggruppamento è impostato su Nessun raggruppamento. Utilizza il menu Raggruppamento per ordinare la tabella delle attività in base a vari criteri.

Scheda Dal basso verso l'alto

Utilizza la scheda Dal basso per visualizzare le attività che hanno richiesto più tempo in totale.

La scheda Bottom-up mostra solo le attività durante la parte selezionata della registrazione. Consulta Seleziona una parte di una registrazione per scoprire come selezionare le parti.

Nel grafico a fiamma della traccia Principale di questo esempio, puoi notare che quasi tutto il tempo è stato impiegato per eseguire le tre chiamate a wait(). Di conseguenza, l'attività principale nella scheda Dal basso è wait. Nel grafico a fiamma, il colore giallo sotto le chiamate a wait corrisponde in realtà a migliaia di chiamate a Minor GC. Di conseguenza, puoi notare che nella scheda Dal basso verso l'alto, l'attività più costosa successiva è Minor GC.

La colonna Tempo personale rappresenta il tempo aggregato trascorso direttamente in quell'attività, in tutte le sue occorrenze.

La colonna Tempo totale rappresenta il tempo aggregato dedicato all'attività o alle relative attività secondarie.

Tabella Stack più pesante

Sul lato destro delle schede Albero delle chiamate o Bottom-up, fai clic su right_panel_open Mostra stack più pesante per visualizzare la tabella Stack più pesante.

Questa tabella mostra quali figli dell'attività selezionata hanno impiegato più tempo per essere eseguiti. Passa il mouse sopra un elemento della tabella per visualizzare l'evento corrispondente evidenziato nella traccia Principale e il resto oscurato.

In questo modo, puoi trovare visivamente nella traccia del rendimento le attività nidificate dello stack di chiamate che richiedono più tempo.

Scheda Log eventi

Utilizza la scheda Log eventi per visualizzare le attività nell'ordine in cui si sono verificate durante la registrazione.

La scheda Log eventi mostra solo le attività durante la parte selezionata della registrazione. Consulta Selezionare una parte di una registrazione per scoprire come selezionare le parti.

La colonna Ora di inizio rappresenta il momento in cui è iniziata l'attività, rispetto all'inizio della registrazione. L'ora di inizio di 1573.0 ms per l'elemento selezionato in questo esempio significa che l'attività è iniziata 1573 ms dopo l'inizio della registrazione.

La colonna Tempo autonomo rappresenta il tempo trascorso direttamente in quell'attività.

Le colonne Tempo totale rappresentano il tempo trascorso direttamente in quell'attività o in una delle sue attività secondarie.

Fai clic su Ora di inizio, Tempo autonomo o Tempo totale per ordinare la tabella in base a quella colonna.

Utilizza la casella Filtro per filtrare le attività in base al nome.

Utilizza il menu Durata per filtrare le attività che hanno richiesto meno di 1 ms o 15 ms. Per impostazione predefinita, il menu Durata è impostato su Tutte, il che significa che vengono visualizzate tutte le attività.

Disattiva le caselle di controllo Caricamento, Scripting, Rendering o Pittura per filtrare tutte le attività di queste categorie.

Visualizzare gli indicatori di rendimento

In un overlay con linee verticali lungo la traccia delle prestazioni, puoi vedere importanti indicatori di prestazioni, come:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Evento DOMContentLoaded (DCL)
• Evento Onload (L)

Passa il mouse sopra i nomi dei marker nella parte inferiore della traccia per visualizzarne il timestamp.

Visualizzare i tempi personalizzati

Nella traccia Tempi, visualizza i tuoi indicatori di rendimento personalizzati, ad esempio:

• Chiamate performance.mark(). Di seguito è riportato un singolo indicatore con tooltip a 813,44 ms, con l'etichetta Avvio dell'esecuzione di JavaScript.
• Chiamate performance.measure(). Di seguito è mostrato un intervallo giallo, etichettato come Interazione lenta.

Seleziona un indicatore per visualizzare ulteriori dettagli nella scheda Riepilogo, tra cui il timestamp, il tempo totale, il tempo autonomo e l'oggetto detail. Per le chiamate performance.mark() e performance.measure(), la scheda mostra anche le analisi dello stack.

Visualizza le interazioni

Visualizza le interazioni utente nella traccia Interazioni per individuare potenziali problemi di reattività.

Per visualizzare le interazioni:

1. Apri DevTools, ad esempio in questa pagina demo.
2. Apri il riquadro Rendimento e avvia una registrazione.
3. Fai clic su un elemento (caffè) e interrompi la registrazione.
4. Trova la traccia Interazioni nella sequenza temporale.

In questo esempio, la traccia Interazioni mostra l'interazione Puntatore. Le interazioni hanno dei baffi che indicano i ritardi di input e presentazione ai limiti del tempo di elaborazione. Passa il mouse sopra l'interazione per visualizzare una descrizione comando con il ritardo di input, il tempo di elaborazione e il ritardo di presentazione.

La traccia Interazioni mostra anche gli avvisi relativi a Interaction to Next Paint (INP) per le interazioni che durano più di 200 millisecondi nella scheda Riepilogo e in una descrizione comando al passaggio del mouse:

La traccia Interazioni contrassegna le interazioni superiori a 200 millisecondi con un triangolo rosso nell'angolo in alto a destra.

Visualizza le variazioni del layout

Visualizza le variazioni del layout nella traccia Variazioni del layout. I turni sono mostrati come rombi viola e sono raggruppati in cluster (linee viola) in base alla loro vicinanza sulla sequenza temporale.

Per evidenziare un elemento che ha causato una variazione del layout nell'area visibile, passa il mouse sopra il rombo corrispondente.

Per visualizzare ulteriori informazioni su una o più variazioni del layout nella scheda Riepilogo con tempi, punteggi, elementi e potenziali cause, fai clic sul rombo o sul cluster corrispondente.

Per saperne di più, consulta Cumulative Layout Shift (CLS).

Visualizza le animazioni

Visualizza le animazioni sulla traccia Animazioni. Le animazioni vengono denominate come le proprietà o gli elementi CSS corrispondenti, se presenti, ad esempio transform o my-element. Le animazioni non di compositing sono contrassegnate da triangoli rossi nell'angolo in alto a destra.

Seleziona un'animazione per visualizzare ulteriori dettagli nella scheda Riepilogo, inclusi i motivi degli errori di composizione.

Visualizza l'attività della GPU

Visualizza l'attività della GPU nella sezione GPU.

Visualizza l'attività del raster

Visualizza l'attività raster nella sezione Pool di thread.

Analizza i frame al secondo (FPS)

DevTools offre numerosi modi per analizzare i frame al secondo:

• Utilizza la sezione Frame per visualizzare la durata di un determinato frame.
• Utilizza il misuratore di FPS per una stima in tempo reale degli FPS durante l'esecuzione della pagina. Consulta Visualizzare i frame al secondo in tempo reale con il misuratore FPS.

La sezione Cornici

La sezione Frame indica esattamente il tempo impiegato da un determinato frame.

Passa il mouse sopra un frame per visualizzare un tooltip con ulteriori informazioni.

Questo esempio mostra un tooltip quando passi il mouse sopra un frame.

La sezione Frame può mostrare quattro tipi di frame:

1. Frame inattivo (bianco). Nessuna modifica.
2. Frame (verde). Rendering eseguito come previsto e in tempo.
3. Frame parziale (giallo con un motivo a linee tratteggiate ampie e sparse). Chrome ha fatto del suo meglio per eseguire il rendering di almeno alcuni aggiornamenti visivi in tempo. Ad esempio, nel caso in cui il lavoro del thread principale del processo del renderer (animazione canvas) sia in ritardo, ma il thread del compositore (scorrimento) sia in tempo.
4. Frame interrotto (rosso con un motivo a linee continue fitte). Chrome non riesce a eseguire il rendering del frame in un tempo ragionevole.

Questo esempio mostra un tooltip quando passi il mouse sopra un frame presentato parzialmente.

Fai clic su un frame per visualizzare ulteriori informazioni nella scheda Riepilogo. DevTools evidenzia il frame selezionato in blu.

Visualizza le richieste di rete

Espandi la sezione Rete per visualizzare una struttura a cascata delle richieste di rete che si sono verificate durante la registrazione delle prestazioni.

Accanto al nome della traccia Rete, è presente una legenda con i tipi di richieste codificati per colore.

Le richieste che bloccano il rendering sono contrassegnate da un triangolo rosso nell'angolo in alto a destra.

Passa il mouse sopra una richiesta per visualizzare una descrizione comando con:

• L'URL della richiesta e il tempo totale impiegato per eseguirla.
• Priorità o modifica della priorità, ad esempio Medium -> High.
• Indica se la richiesta è Render-blocking o meno.
• Una suddivisione delle tempistiche delle richieste, descritta in seguito.

Quando fai clic su una richiesta, la traccia Rete disegna una freccia dall'iniziatore alla richiesta.

Inoltre, il riquadro Prestazioni mostra la scheda Riepilogo con ulteriori informazioni sulla richiesta, inclusi, a titolo esemplificativo, i campi Priorità iniziale e Priorità (finale). Se i valori sono diversi, la priorità di recupero della richiesta è cambiata durante la registrazione. Per saperne di più, consulta Ottimizzare il caricamento delle risorse con l'API Fetch Priority.

La scheda Riepilogo mostra anche una suddivisione delle tempistiche della richiesta.

In questo esempio, la richiesta di www.google.com è rappresentata da una linea a sinistra (|–), una barra al centro con una parte scura e una chiara e una linea a destra (–|).

Se presente, la scheda Riepilogo mostra anche una suddivisione delle tempistiche del server per le richieste di rete che implementano tecnologie di rendering lato server. Per queste richieste, il riquadro Rendimento prende i dati dall'intestazione della risposta Server-Timing.

Puoi trovare un'altra suddivisione dei tempi nella scheda Rete. Fai clic con il tasto destro del mouse sulla richiesta nella traccia Rete o sul relativo URL nella scheda Riepilogo e fai clic su Mostra nel riquadro Rete. DevTools ti reindirizza al riquadro Rete e seleziona la richiesta corrispondente. Apri la scheda Timing.

Ecco come vengono mappate queste due suddivisioni:

• La linea sinistra (|–) rappresenta tutto ciò che precede il gruppo di eventi Connection start, incluso. In altre parole, tutto ciò che precede Request Sent.
• La parte chiara della barra è Request sent e Waiting for server response.
• La parte scura della barra è Content download.
• La linea destra (–|) indica il tempo trascorso in attesa del thread principale. La scheda Rete > Tempistiche non lo mostra.

Visualizza le metriche di memoria

Attiva la casella di controllo Memoria per visualizzare le metriche relative alla memoria dell'ultima registrazione.

DevTools mostra un nuovo grafico Memoria sopra la scheda Riepilogo. Sotto il grafico NET è presente anche un nuovo grafico, chiamato HEAP. Il grafico HEAP fornisce le stesse informazioni della riga JS Heap nel grafico Memory.

Questo esempio mostra le metriche della memoria sopra la scheda Riepilogo.

Le linee colorate nel grafico corrispondono alle caselle di controllo colorate sopra il grafico. Deseleziona una casella di controllo per nascondere la categoria dal grafico.

Il grafico mostra solo la regione della registrazione selezionata. Nell'esempio precedente, il grafico Memoria mostra solo la memoria utilizzata per l'inizio della registrazione, fino a circa il segno di 1000 ms.

Visualizza la durata di una parte di una registrazione

Quando analizzi una sezione come Rete o Principale, a volte hai bisogno di una stima più precisa della durata di determinati eventi. Tieni premuto Maiusc, fai clic e tieni premuto e trascina verso sinistra o destra per selezionare una parte della registrazione. Nella parte inferiore della selezione, DevTools mostra il tempo impiegato per quella parte.

In questo esempio, il timestamp 488.53ms nella parte inferiore della porzione selezionata indica la durata di quella porzione.

Visualizzare uno screenshot

Consulta la sezione Acquisire screenshot durante la registrazione per scoprire come attivare gli screenshot.

Passa il mouse sopra la panoramica della sequenza temporale per visualizzare uno screenshot dell'aspetto della pagina in quel momento della registrazione. La Panoramica della sequenza temporale è la sezione che contiene i grafici CPU, FPS e NET.

Puoi anche visualizzare gli screenshot facendo clic su un frame nella sezione Frame. DevTools mostra una versione ridotta dello screenshot nella scheda Riepilogo.

Questo esempio mostra lo screenshot del frame 195.5ms nella scheda Riepilogo quando fai clic sul frame nella sezione Frame.

Fai clic sulla miniatura nella scheda Riepilogo per aumentare lo zoom dello screenshot.

Questo esempio mostra uno screenshot ingrandito dopo aver fatto clic sulla relativa miniatura nella scheda Riepilogo.

Visualizza le informazioni sui livelli

Per visualizzare le informazioni sui livelli avanzati di un frame:

1. Abilita la strumentazione avanzata della verniciatura.
2. Seleziona una cornice nella sezione Cornici. DevTools visualizza le informazioni sui livelli nella nuova scheda Livelli, accanto alla scheda Log eventi.

Passa il mouse sopra un livello per evidenziarlo nel diagramma.

Questo esempio mostra il livello #39 evidenziato quando passi il mouse sopra.

Per spostare il diagramma:

• Fai clic su Modalità panoramica per spostarti lungo gli assi X e Y.
• Fai clic su Modalità rotazione per ruotare lungo l'asse Z.
• Fai clic su Reimposta trasformazione per ripristinare la posizione originale del diagramma.

Guarda l'analisi dei livelli in azione:

Visualizzare il profiler di rendering

Per visualizzare informazioni avanzate su un evento di pittura:

1. Attiva la strumentazione di visualizzazione avanzata.
2. Seleziona un evento Paint nella traccia Principale.

Analizzare il rendimento del rendering con la scheda Rendering

Utilizza le funzionalità della scheda Rendering per visualizzare meglio il rendimento del rendering della pagina.

Apri la scheda Rendering.

Visualizza i frame al secondo in tempo reale con il misuratore di FPS

Le statistiche di rendering dei frame sono un overlay visualizzato nell'angolo in alto a destra dell'area visibile. Fornisce una stima in tempo reale dei frame al secondo (FPS) durante l'esecuzione della pagina.

Consulta Statistiche di rendering del frame.

Visualizza gli eventi di pittura in tempo reale con Paint Flashing

Utilizza Paint Flashing per visualizzare in tempo reale tutti gli eventi di rendering sulla pagina.

Consulta la sezione Sfarfallio della pittura.

Visualizzare una sovrapposizione di livelli con i bordi dei livelli

Utilizza Bordi dei livelli per visualizzare una sovrapposizione di bordi e riquadri dei livelli nella parte superiore della pagina.

Vedi Bordi dei livelli.

Trovare problemi di prestazioni di scorrimento in tempo reale

Utilizza Problemi di prestazioni di scorrimento per identificare gli elementi della pagina che hanno listener di eventi correlati allo scorrimento che potrebbero influire negativamente sulle prestazioni della pagina. DevTools evidenzia in verde acqua gli elementi potenzialmente problematici.

Consulta Problemi di prestazioni di scorrimento.